/* =============================================================
 *  TRUEF — "Chromatic Scroll" FX engine.
 *
 *  A living-surface layer for the whole site. Everything here is
 *  PROGRESSIVE ENHANCEMENT and COMPOSITOR-DRIVEN:
 *    • Native CSS scroll-driven animations (animation-timeline) run
 *      off the main thread — no JS scroll handlers, no jank.
 *    • @property typed custom props let a COLOUR animate, so the
 *      brand accent can flow through a curated palette as you scroll.
 *    • View Transitions morph between the landing and the studio.
 *  Nothing mutates the DOM or a backdrop-filter while WebGL renders
 *  (the site's hard rule) — motion is transform/opacity/colour only.
 *  Unsupported browsers + reduced-motion fall back to a clean static
 *  page (or the JS shims in fx.js); the site is never broken or blank.
 * ============================================================= */

/* ---- typed, animatable accent (the "living" colour) --------------------- */
@property --fx-accent   { syntax: "<color>"; inherits: true; initial-value: #b78a2e; }
@property --fx-accent-2 { syntax: "<color>"; inherits: true; initial-value: #e2c37e; }
:root { --fx-accent: #b78a2e; --fx-accent-2: #e2c37e; }

/* Curated jewel-tone flow — gold → violet → teal → ember → gold — bound to
   overall page scroll. Muted, luxe stops (not neon) so it stays on-brand. */
@supports (animation-timeline: scroll()) {
  @keyframes fx-chroma {
    0%   { --fx-accent: #b78a2e; --fx-accent-2: #e2c37e; }
    25%  { --fx-accent: #6d5ed6; --fx-accent-2: #a99cf0; }
    50%  { --fx-accent: #148f84; --fx-accent-2: #63d7c9; }
    75%  { --fx-accent: #c9552f; --fx-accent-2: #f0916f; }
    100% { --fx-accent: #b78a2e; --fx-accent-2: #e2c37e; }
  }
  :root { animation: fx-chroma linear both; animation-timeline: scroll(root block); }
}

/* ---- 1. ambient aurora: two soft chromatic blobs pinned to the viewport,
   very low opacity, drifting. Reads as a colour-wash over white sections and
   a glow over dark ones — the same living light unifies the whole site. ---- */
.fx-aurora {
  position: fixed; inset: -20vh -20vw; z-index: 2; pointer-events: none;
  filter: blur(64px);
  /* screen blend: adds a soft colour glow over the dark sections and simply
     disappears over the white ones (screen can only lighten) — so it can never
     reduce text contrast, and the same living light threads the whole page. */
  mix-blend-mode: screen;
}
.fx-aurora::before, .fx-aurora::after {
  content: ""; position: absolute; width: 62vmax; height: 62vmax; border-radius: 50%;
}
.fx-aurora::before {
  top: -20vmax; left: -14vmax;
  background: radial-gradient(circle, var(--fx-accent) 0%, transparent 60%);
  opacity: .22; animation: fx-drift1 34s ease-in-out infinite alternate;
}
.fx-aurora::after {
  bottom: -22vmax; right: -16vmax;
  background: radial-gradient(circle, var(--fx-accent-2) 0%, transparent 60%);
  opacity: .18; animation: fx-drift2 42s ease-in-out infinite alternate;
}
@keyframes fx-drift1 { from { transform: translate3d(0,0,0) scale(1); } to { transform: translate3d(9vw,6vh,0) scale(1.15); } }
@keyframes fx-drift2 { from { transform: translate3d(0,0,0) scale(1.1); } to { transform: translate3d(-8vw,-5vh,0) scale(.9); } }
/* nav + progress ride ABOVE the aurora so they're never tinted */
.v2nav { z-index: 60; }
.fx-progress { z-index: 120; }

/* ---- 2. chromatic scroll-progress bar (top edge, always on top) --------- */
.fx-progress {
  position: fixed; inset: 0 0 auto 0; height: 3px; z-index: 120;
  transform-origin: 0 50%; transform: scaleX(0);
  background: linear-gradient(90deg, var(--fx-accent), var(--fx-accent-2));
  box-shadow: 0 0 16px var(--fx-accent); pointer-events: none;
}
@supports (animation-timeline: scroll()) {
  @keyframes fx-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
  .fx-progress { animation: fx-grow linear both; animation-timeline: scroll(root block); }
}

/* ---- 3. native scroll-driven reveals + parallax ------------------------- */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    [data-fx="rise"] {
      animation: fx-rise linear both;
      animation-timeline: view();
      animation-range: entry 2% entry 46%;
    }
    @keyframes fx-rise { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: none; } }

    [data-fx="parallax"] {
      animation: fx-parallax linear both;
      animation-timeline: view(); animation-range: cover;
    }
    @keyframes fx-parallax { from { transform: translateY(-7%); } to { transform: translateY(7%); } }
  }
}
/* JS fallback (Safari etc.): only hide once fx.js confirms it can reveal */
@supports not (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    html.fx-js [data-fx="rise"] { opacity: 0; transform: translateY(40px);
      transition: opacity .7s cubic-bezier(.2,.8,.3,1), transform .7s cubic-bezier(.2,.8,.3,1); }
    html.fx-js [data-fx="rise"].fx-in { opacity: 1; transform: none; }
  }
}

/* ---- 4. the gold How-It-Works timeline draws itself on scroll ----------- */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .hiw-steps::before {
      transform-origin: top; animation: fx-draw linear both;
      animation-timeline: view(); animation-range: entry 14% cover 42%;
    }
    @keyframes fx-draw { from { transform: translateX(-50%) scaleY(0); } to { transform: translateX(-50%) scaleY(1); } }
  }
}

/* ---- 5. magnetic CTAs (spring driven in fx.js) ------------------------- */
.fx-magnetic { will-change: transform; }

/* ---- 6. chromatic CTA glow on hover (uses the living accent) ------------ */
@media (hover: hover) {
  .btn-pill:hover, .hiw-cta:hover {
    box-shadow: 0 14px 40px color-mix(in srgb, var(--fx-accent) 55%, transparent);
  }
}

/* ---- 7. View Transitions: morph between landing and studio ------------- */
@view-transition { navigation: auto; }
.mark    { view-transition-name: vt-brand; }   /* landing nav brand mark */
.ed-back { view-transition-name: vt-brand; }   /* studio back brand mark */
@media (prefers-reduced-motion: no-preference) {
  ::view-transition-old(root), ::view-transition-new(root) { animation-duration: .5s; }
  ::view-transition-group(vt-brand) { animation-duration: .5s; animation-timing-function: cubic-bezier(.2,.8,.3,1); }
}

/* ---- global reduced-motion & aurora-off safety ------------------------- */
@media (prefers-reduced-motion: reduce) {
  :root { animation: none !important; }
  .fx-aurora::before, .fx-aurora::after { animation: none !important; }
  .fx-progress { animation: none !important; }
}