/* ============================================================================
 * Studio by Bichachi — Atelier Motion Layer (CSS)
 * ----------------------------------------------------------------------------
 * The high-end animation system, as a STANDALONE additive stylesheet.
 *
 * Designed to drop onto ANY page — including ones that still carry their own
 * inline <style> — without colliding with existing rules:
 *   - It only introduces NEW classes (.ambient .reveal .spotlight .gleam
 *     .lift .sheen) plus a few `.motion-ready`-scoped enhancements of
 *     existing patterns (.display-h em, .modal-title em, .logo::before).
 *   - Every colour/easing is read from the page's own design tokens via
 *     var(--token, fallback), so it looks correct whether the page defines
 *     the Bichachi tokens or not.
 *
 * Pair with studio-motion.js, and include BOTH in <head>:
 *   <link rel="stylesheet" href="/static/studio-motion.css">
 *   <script src="/static/studio-motion.js"></script>
 *
 * studio-motion.js adds `.motion-ready` to <html> before first paint, so the
 * hidden initial states below ONLY apply when JS runs — if the script is
 * blocked or errors, the page stays fully visible. Everything also collapses
 * under prefers-reduced-motion (guard at the bottom).
 *
 * Class reference:
 *   reveal     -> fades + rises in on scroll (auto-staggered by sibling order)
 *   spotlight  -> soft gold glow follows the cursor inside the element
 *   gleam      -> animated gold facet sweep across text
 *   lift       -> springy hover lift + soft shadow
 *   sheen      -> one-shot light sweep on hover (good on primary buttons)
 *   <span data-count="248">0</span> -> counts up when scrolled into view
 *        optional attrs: data-prefix="$"  data-suffix="+"  data-decimals="2"
 * ========================================================================== */

/* Motion-only tokens (additive — won't disturb a page's own :root) */
:root {
  --accent-2: #E7CB86;                                  /* lighter gold facet highlight */
  --atelier-ease: var(--ease-out, cubic-bezier(0.22, 1, 0.36, 1));
  --atelier-shadow: 0 24px 60px -28px rgba(0, 0, 0, 0.55);
}
[data-theme="light"] {
  --accent-2: #C9A85C;
  --atelier-shadow: 0 24px 60px -30px rgba(50, 40, 20, 0.22);
}

/* ---- Animated gold facet gleam -------------------------------- */
.motion-ready .display-h em,
.motion-ready .modal-title em,
.gleam {
  background: linear-gradient(100deg,
    var(--accent, #C29E52) 20%,
    var(--accent-2, #E7CB86) 50%,
    var(--accent, #C29E52) 80%);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: atelierGleam 5.5s ease-in-out infinite;
}
@keyframes atelierGleam {
  0%, 100% { background-position: 200% 0; }
  50%      { background-position: 0 0; }
}

/* ---- Ambient drifting light (injected into <body> by JS) ------ */
.ambient { position: fixed; inset: -20vmax; z-index: -2; pointer-events: none; overflow: hidden; }
.ambient span { position: absolute; border-radius: 50%; filter: blur(80px); opacity: 0.5; will-change: transform; }
.ambient .a1 {
  width: 60vmax; height: 60vmax; left: -10vmax; top: -12vmax;
  background: radial-gradient(circle, var(--accent-glow, rgba(194,158,82,0.14)), transparent 62%);
  animation: atelierDrift1 28s var(--atelier-ease) infinite alternate;
}
.ambient .a2 {
  width: 48vmax; height: 48vmax; right: -8vmax; top: 28vmax;
  background: radial-gradient(circle, rgba(120, 150, 180, 0.10), transparent 60%);
  animation: atelierDrift2 34s var(--atelier-ease) infinite alternate;
}
.ambient .a3 {
  width: 40vmax; height: 40vmax; left: 30vmax; bottom: -16vmax;
  background: radial-gradient(circle, var(--accent-glow, rgba(194,158,82,0.14)), transparent 64%);
  animation: atelierDrift3 40s var(--atelier-ease) infinite alternate;
}
@keyframes atelierDrift1 { to { transform: translate3d(14vmax, 8vmax, 0) scale(1.15); } }
@keyframes atelierDrift2 { to { transform: translate3d(-12vmax, -10vmax, 0) scale(1.10); } }
@keyframes atelierDrift3 { to { transform: translate3d(8vmax, -12vmax, 0) scale(1.20); } }

/* ---- Brand diamond shimmer (existing .logo::before glyph) ----- */
.motion-ready .logo::before { animation: atelierGemPulse 4.5s ease-in-out infinite; }
@keyframes atelierGemPulse {
  0%, 100% { opacity: 1;   text-shadow: 0 0 0 transparent; }
  50%      { opacity: 0.7; text-shadow: 0 0 8px var(--accent-glow, rgba(194,158,82,0.4)); }
}

/* ---- Scroll reveal (hidden state scoped to .motion-ready) ----- */
.motion-ready .reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.7s var(--atelier-ease), transform 0.7s var(--atelier-ease);
}
.motion-ready .reveal.in { opacity: 1; transform: none; }

/* ---- Cursor-follow spotlight ----------------------------------
 * Glow sits between the element's background and its content via a negative
 * z-index inside an isolated stacking context, so text stays legible. */
.spotlight { position: relative; isolation: isolate; }
.spotlight::after {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  opacity: 0; pointer-events: none;
  background: radial-gradient(220px circle at var(--mx, 50%) var(--my, 50%),
    var(--accent-glow, rgba(194,158,82,0.14)), transparent 65%);
  transition: opacity 0.4s;
}
.spotlight:hover::after { opacity: 1; }

/* ---- Springy hover lift --------------------------------------- */
.motion-ready .lift { transition: transform 0.45s var(--atelier-ease), box-shadow 0.45s, border-color 0.35s; }
.motion-ready .lift:hover { transform: translateY(-5px); box-shadow: var(--atelier-shadow); }

/* ---- One-shot light sweep (opt-in on buttons) ----------------- */
.motion-ready .sheen { position: relative; overflow: hidden; }
.motion-ready .sheen::after {
  content: ""; position: absolute; top: 0; left: -130%; width: 55%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.35), transparent);
  transform: skewX(-18deg); pointer-events: none;
}
.motion-ready .sheen:hover::after { animation: atelierSheen 0.8s var(--atelier-ease); }
@keyframes atelierSheen { to { left: 170%; } }

/* ---- Reduced-motion: collapse everything to static ------------ */
@media (prefers-reduced-motion: reduce) {
  .ambient { display: none; }
  .motion-ready .display-h em,
  .motion-ready .modal-title em,
  .gleam,
  .motion-ready .logo::before { animation: none; }
  .motion-ready .reveal { opacity: 1; transform: none; transition: none; }
  .spotlight::after { display: none; }
  .motion-ready .sheen::after { display: none; }
}
