/* ─────────────────────────────────────────────────────────
   Scroll-FX layer, perspective parallax, scrub-driven motion,
   immersive backdrops. Reads vars set by scroll-fx.js:

     :root            --scroll-progress  0..1
                      --scroll-vel       smoothed px/frame
                      --scroll-tilt      capped deg
     [data-scene]     --scene-p / -q / -c
   ───────────────────────────────────────────────────────── */

:root {
  --scroll-y: 0px;
  --scroll-progress: 0;
  --scroll-vel: 0;
  --scroll-tilt: 0deg;
  --fx-z-canvas: 0;
  --fx-z-grid:   1;
  --fx-z-noise:  2;
  --fx-z-aurora: 0;   /* below content but inside the section's stacking context */
  --fx-z-content: 3;
}

/* Stacking from back to front:
   html ground  →  fixed canvas (z 0)  →  fixed grid + noise (1, 2)
   →  main / sections (z 3, transparent)  →  per-section .scene-fx
   (absolute behind the section's own content) */

html { background: var(--ink-950); }
body { background: transparent; }

/* Lift the document above the fixed backdrop layers. Negative z-index on
   fixed elements is unreliable across browsers; pin everything explicitly. */
main, .site-footer { position: relative; z-index: var(--fx-z-content); }

/* Every top-level section renders transparent so the canvas + grid show
   through. Their own .scene-fx layer paints the per-scene aurora. */
.hero,
.rant,
.backbone-chapter,
.grok,
.relay-reveal,
.relay-architecture,
.waitlist,
.principles,
.site-footer { background: transparent !important; }

/* Ditto for the .stop blocks inside backbone-chapter */
.backbone-chapter .stop { background: transparent !important; }

/* Hero's own ::before glow is now redundant against the canvas; calm it. */
.hero::before { opacity: 0.35 !important; }

/* Slabs in the principles section had ink-950 backgrounds, let them
   inherit the section's transparency but keep a faint card surface. */
.principles .slab {
  background: rgba(11, 11, 10, 0.55) !important;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* The page needs perspective for nested transforms. */
body {
  perspective: 1600px;
  perspective-origin: 50% 30%;
}

/* ── Global backdrop ─────────────────────────────────────── */

#scroll-canvas {
  position: fixed;
  inset: 0;
  z-index: var(--fx-z-canvas);
  pointer-events: none;
  opacity: 0.95;
  /* Sit behind document content but visible. */
  /* Small scroll-driven hue shift adds a 'breathing' across the doc */
  filter: saturate(calc(100% + var(--scroll-progress) * 25%))
          hue-rotate(calc(var(--scroll-progress) * 18deg));
  will-change: filter;
}

/* Static atmospheric grid that parallaxes with scroll.
   Two crossing lines at 80px, plus a soft vignette. */
#scroll-grid {
  position: fixed;
  inset: -10vh -2vw;
  z-index: var(--fx-z-grid);
  /* still behind content; main is z-3 */
  pointer-events: none;
  background-image:
    linear-gradient(to right,  rgba(255,255,255,0.035) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.035) 1px, transparent 1px);
  background-size: 80px 80px, 80px 80px;
  /* Parallax: very slow drift, subtle skew with scroll velocity. */
  transform:
    translate3d(0, calc(var(--scroll-y) * -0.04), 0)
    skewY(calc(var(--scroll-tilt) * 0.05));
  mask-image: radial-gradient(ellipse 80% 60% at 50% 40%, #000 30%, transparent 95%);
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 40%, #000 30%, transparent 95%);
  opacity: 0.55;
  will-change: transform;
}

/* A second, larger grid layer for depth, moves opposite. */
#scroll-grid::after {
  content: "";
  position: absolute;
  inset: -20vh -10vw;
  background-image:
    linear-gradient(to right,  rgba(255,255,255,0.018) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.018) 1px, transparent 1px);
  background-size: 240px 240px, 240px 240px;
  transform: translate3d(0, calc(var(--scroll-y) * 0.025), 0);
  will-change: transform;
}

/* Soft scanline noise overlay (extremely faint). */
#scroll-noise {
  position: fixed;
  inset: 0;
  z-index: var(--fx-z-noise);
  pointer-events: none;
  opacity: 0.06;
  mix-blend-mode: overlay;
  background-image:
    repeating-linear-gradient(
      to bottom,
      rgba(255,255,255,0.10) 0 1px,
      transparent 1px 3px
    );
}

/* ── Scene framework ─────────────────────────────────────── */

[data-scene] {
  position: relative;
  isolation: isolate;
  --scene-p: 0;
  --scene-q: 0;
  --scene-c: 0;
}

/* Section content sits above the in-section aurora */
[data-scene] > *:not(.scene-fx) { position: relative; z-index: 1; }

.scene-fx {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  contain: paint;
}

.scene-fx > .layer {
  position: absolute;
  inset: 0;
  will-change: transform, opacity;
}

/* The fx layer brightens as the scene enters, fades as it leaves. */
[data-scene] .scene-fx {
  opacity: clamp(0, calc(var(--scene-q) * 1.6), 1);
}

/* ── Layer primitives ────────────────────────────────────── */

/* Aurora, large soft radial blooms, brand-tinted, parallaxed by scene-q. */
.fx-aurora {
  background:
    radial-gradient(ellipse 60% 50% at calc(20% + var(--scene-q) * 30%) 30%,
      color-mix(in oklab, var(--fx-tint-a, var(--ember)) 35%, transparent) 0%,
      transparent 65%),
    radial-gradient(ellipse 70% 55% at calc(80% - var(--scene-q) * 30%) 70%,
      color-mix(in oklab, var(--fx-tint-b, var(--violet)) 30%, transparent) 0%,
      transparent 65%);
  filter: blur(40px);
  transform: translate3d(0, calc((1 - var(--scene-q)) * 30px), 0);
}

/* Conic mesh, slow rotation, mostly invisible at edges. */
.fx-conic {
  background:
    conic-gradient(from calc(var(--scene-q) * 360deg) at 50% 50%,
      color-mix(in oklab, var(--fx-tint-a, var(--ember)) 18%, transparent),
      transparent 18%,
      color-mix(in oklab, var(--fx-tint-b, var(--violet)) 12%, transparent) 50%,
      transparent 70%,
      color-mix(in oklab, var(--fx-tint-a, var(--ember)) 18%, transparent));
  mix-blend-mode: screen;
  opacity: 0.55;
  filter: blur(24px);
  mask-image: radial-gradient(circle at 50% 50%, #000 0%, transparent 70%);
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 0%, transparent 70%);
  transform: translate3d(0,0,0) rotate(calc(var(--scene-c) * 4deg));
}

/* Beam, single horizontal scanning gradient, tied to scene-q. */
.fx-beam {
  background: linear-gradient(
    180deg,
    transparent 0%,
    color-mix(in oklab, var(--fx-tint-a, var(--ember)) 14%, transparent) 48%,
    color-mix(in oklab, var(--fx-tint-a, var(--ember)) 22%, transparent) 50%,
    color-mix(in oklab, var(--fx-tint-a, var(--ember)) 14%, transparent) 52%,
    transparent 100%
  );
  mix-blend-mode: screen;
  opacity: 0.7;
  transform: translate3d(0, calc((var(--scene-q) - 0.5) * 220%), 0);
}

/* Vertical color rails (left/right). */
.fx-rails {
  background:
    linear-gradient(90deg,
      color-mix(in oklab, var(--fx-tint-a, var(--ember)) 22%, transparent) 0%,
      transparent 14%,
      transparent 86%,
      color-mix(in oklab, var(--fx-tint-b, var(--violet)) 22%, transparent) 100%);
  mix-blend-mode: screen;
  opacity: calc(0.4 + var(--scene-q) * 0.6);
}

/* Floor / horizon, ground plane that recedes with perspective. */
.fx-horizon {
  background: linear-gradient(
    180deg,
    transparent 60%,
    color-mix(in oklab, var(--fx-tint-a, var(--ember)) 16%, transparent) 100%
  );
  transform-origin: bottom center;
  transform:
    perspective(800px)
    rotateX(70deg)
    translate3d(0, calc(50% + (1 - var(--scene-q)) * 8%), -60px);
  filter: blur(2px);
}

/* Vignette to keep edges quiet. */
.fx-vignette {
  background:
    radial-gradient(ellipse 80% 70% at 50% 50%,
      transparent 40%,
      rgba(6,6,5,0.55) 95%);
  mix-blend-mode: multiply;
}

/* Color anchors per scene type. */
[data-scene="hero"]         { --fx-tint-a: var(--ember);  --fx-tint-b: var(--violet); }
[data-scene="rant"]         { --fx-tint-a: var(--ember);  --fx-tint-b: var(--info); }
[data-scene="backbone"]     { --fx-tint-a: var(--violet); --fx-tint-b: var(--signal); }
[data-scene="grok"]         { --fx-tint-a: var(--signal); --fx-tint-b: var(--ember); }
[data-scene="relay-reveal"] { --fx-tint-a: var(--violet); --fx-tint-b: var(--info); }
[data-scene="architecture"] { --fx-tint-a: var(--info);   --fx-tint-b: var(--violet); }
[data-scene="waitlist"]     { --fx-tint-a: var(--ember);  --fx-tint-b: var(--warning); }
[data-scene="principles"]   { --fx-tint-a: var(--violet); --fx-tint-b: var(--signal); }
[data-scene="footer"]       { --fx-tint-a: var(--ember);  --fx-tint-b: var(--violet); }

/* Per-stop variations: cycle the palette across the 15 stops. */
[data-stop="I"]     { --fx-tint-a: var(--ember);  --fx-tint-b: var(--violet); }
[data-stop="II"]    { --fx-tint-a: var(--violet); --fx-tint-b: var(--info); }
[data-stop="III"]   { --fx-tint-a: var(--ember);  --fx-tint-b: var(--warning); }
[data-stop="IV"]    { --fx-tint-a: var(--ember);  --fx-tint-b: var(--signal); }
[data-stop="V"]     { --fx-tint-a: var(--signal); --fx-tint-b: var(--info); }
[data-stop="VI"]    { --fx-tint-a: var(--info);   --fx-tint-b: var(--violet); }
[data-stop="VII"]   { --fx-tint-a: var(--ember);  --fx-tint-b: var(--info); }
[data-stop="VIII"]  { --fx-tint-a: var(--violet); --fx-tint-b: var(--warning); }
[data-stop="IX"]    { --fx-tint-a: var(--info);   --fx-tint-b: var(--signal); }
[data-stop="X"]     { --fx-tint-a: var(--signal); --fx-tint-b: var(--violet); }
[data-stop="XI"]    { --fx-tint-a: var(--warning);--fx-tint-b: var(--ember); }
[data-stop="XII"]   { --fx-tint-a: var(--violet); --fx-tint-b: var(--info); }
[data-stop="XIII"]  { --fx-tint-a: var(--info);   --fx-tint-b: var(--signal); }
[data-stop="XIV"]   { --fx-tint-a: var(--signal); --fx-tint-b: var(--violet); }
[data-stop="XV"]    { --fx-tint-a: var(--ember);  --fx-tint-b: var(--violet); }

/* ── Scrub primitives applied to existing content ────────── */

/* Lift content into a 3D layer so it can tilt with scroll. */
.fx-tilt {
  transform-style: preserve-3d;
  transform:
    perspective(1400px)
    rotateX(calc(var(--scene-c) * -2.5deg))
    translate3d(0, calc(var(--scene-c) * -10px), 0);
  transition: transform 80ms linear;
}

/* Headings reveal as a vertical sweep, clipped + ember underline grows. */
.fx-headline {
  position: relative;
  display: inline-block;
}
.fx-headline::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -0.18em;
  height: 2px;
  width: calc(var(--scene-q, 0) * 100%);
  background: linear-gradient(90deg, var(--fx-tint-a, var(--ember)), transparent);
  transition: width 60ms linear;
}

/* Card stacks: each card slides up + fades as scene-q grows.
   Stagger via :nth-child by reducing entry threshold. */
.fx-stack > * {
  opacity: clamp(0, calc((var(--scene-q) - 0.05) * 4), 1);
  transform: translate3d(0, calc((1 - clamp(0, var(--scene-q) * 2, 1)) * 40px), 0)
             rotateX(calc((1 - clamp(0, var(--scene-q) * 2, 1)) * 6deg));
  transition: opacity 120ms linear, transform 120ms linear;
  transform-origin: top center;
}
.fx-stack > *:nth-child(2) { transition-delay: 40ms; }
.fx-stack > *:nth-child(3) { transition-delay: 80ms; }
.fx-stack > *:nth-child(4) { transition-delay: 120ms; }
.fx-stack > *:nth-child(5) { transition-delay: 160ms; }
.fx-stack > *:nth-child(6) { transition-delay: 200ms; }

/* Per-section overrides for staggers using --scene-q directly. */
.fx-rise {
  opacity: clamp(0, calc(var(--scene-q) * 2.2 - 0.1), 1);
  transform: translate3d(0, calc((1 - clamp(0, var(--scene-q) * 2, 1)) * 60px), 0);
}

/* Counter-scroll: things that move opposite to the page. */
.fx-counter {
  transform: translate3d(0, calc((0.5 - var(--scene-q)) * 80px), 0);
}

/* Slow parallax, moves with scroll but at a slower rate. */
.fx-slow {
  transform: translate3d(0, calc((0.5 - var(--scene-q)) * -120px), 0);
}

/* Pop, scale-in centered, used for big focal items. */
.fx-pop {
  opacity: clamp(0, calc(var(--scene-q) * 2 - 0.2), 1);
  transform: scale(calc(0.92 + clamp(0, var(--scene-q) * 1.5, 1) * 0.08));
  transform-origin: center;
}

/* ── Hero overrides ──────────────────────────────────────── */

[data-scene="hero"] .fx-aurora {
  background:
    radial-gradient(ellipse 70% 55% at calc(20% + var(--scene-q) * 50%) 35%,
      color-mix(in oklab, var(--ember) 45%, transparent) 0%, transparent 60%),
    radial-gradient(ellipse 50% 45% at calc(80% - var(--scene-q) * 40%) 75%,
      color-mix(in oklab, var(--violet) 40%, transparent) 0%, transparent 60%),
    radial-gradient(ellipse 90% 60% at 50% 110%,
      color-mix(in oklab, var(--ember) 30%, transparent) 0%, transparent 70%);
}

[data-scene="hero"] .stage {
  /* The whole stage gently tilts as you scroll past it. */
  transform:
    perspective(1600px)
    rotateX(calc(var(--scene-q) * 6deg))
    translate3d(0, calc(var(--scene-q) * -40px), 0)
    scale(calc(1 - var(--scene-q) * 0.04));
  transition: transform 100ms linear;
}

[data-scene="hero"] .top-bar {
  transform: translate3d(0, calc(var(--scene-q) * -30px), 0);
  opacity: calc(1 - var(--scene-q) * 1.4);
}

[data-scene="hero"] .scroll-prompt {
  opacity: calc(1 - var(--scene-q) * 2);
}

/* ── Rant overrides ─────────────────────────────────────── */

[data-scene="rant"] .post {
  transform: translate3d(0, calc((0.5 - var(--scene-q)) * 60px), 0);
}
[data-scene="rant"] .receipt {
  transform: translate3d(0, calc((var(--scene-q) - 0.5) * 60px), 0);
}
[data-scene="rant"] .receipt .row {
  opacity: clamp(0, calc(var(--scene-q) * 3 - 0.4), 1);
  transform: translate3d(0, calc((1 - clamp(0, var(--scene-q) * 2, 1)) * 18px), 0);
}
[data-scene="rant"] .receipt .row:nth-child(1) { transition-delay: 0ms; }
[data-scene="rant"] .receipt .row:nth-child(2) { transition-delay: 40ms; }
[data-scene="rant"] .receipt .row:nth-child(3) { transition-delay: 80ms; }
[data-scene="rant"] .receipt .row:nth-child(4) { transition-delay: 120ms; }
[data-scene="rant"] .receipt .row:nth-child(5) { transition-delay: 160ms; }
[data-scene="rant"] .receipt .row:nth-child(6) { transition-delay: 200ms; }
[data-scene="rant"] .receipt .row:nth-child(7) { transition-delay: 240ms; }

/* ── BACKBONE chapter overrides ─────────────────────────── */

.backbone-chapter .stop {
  /* Each stop tilts toward the camera at its center. */
  transform-style: preserve-3d;
}

.backbone-chapter .stop > .container {
  transform:
    perspective(1400px)
    rotateX(calc(var(--scene-c) * -2deg))
    translate3d(0, calc(var(--scene-c) * 18px), 0);
  transition: transform 100ms linear;
}

.backbone-chapter .stop h3 {
  transform: translate3d(0, calc((1 - clamp(0, var(--scene-q) * 2.2, 1)) * 30px), 0);
  opacity: clamp(0.2, calc(var(--scene-q) * 2 - 0.1), 1);
  transition: transform 120ms linear, opacity 120ms linear;
}

.backbone-chapter .stop .stop-lede {
  transform: translate3d(0, calc((1 - clamp(0, var(--scene-q) * 2, 1)) * 20px), 0);
  opacity: clamp(0, calc(var(--scene-q) * 2.2 - 0.2), 1);
  transition: transform 120ms linear 50ms, opacity 120ms linear 50ms;
}

/* Lexicon terms: rise + slight rotateX, staggered by data-stop III layout */
.backbone-chapter [data-stop="III"] .lexicon .term {
  opacity: clamp(0, calc(var(--scene-q) * 2.5 - 0.2), 1);
  transform:
    translate3d(0, calc((1 - clamp(0, var(--scene-q) * 2, 1)) * 28px), 0)
    rotateX(calc((1 - clamp(0, var(--scene-q) * 2, 1)) * 14deg));
  transform-origin: top center;
  transition: opacity 120ms linear, transform 140ms linear;
}
.backbone-chapter [data-stop="III"] .lexicon .term:nth-child(odd)  { transition-delay: 30ms; }
.backbone-chapter [data-stop="III"] .lexicon .term:nth-child(even) { transition-delay: 70ms; }

/* Compare: two columns counter-translate */
.backbone-chapter [data-stop="IV"] .compare .col.bad {
  transform: translate3d(calc((var(--scene-q) - 0.5) * -40px), 0, 0);
}
.backbone-chapter [data-stop="IV"] .compare .col.good {
  transform: translate3d(calc((var(--scene-q) - 0.5) *  40px), 0, 0);
}

/* Branches: pop on, with depth and slight tilt */
.backbone-chapter [data-stop="V"] .branch {
  opacity: clamp(0, calc(var(--scene-q) * 2.4 - 0.3), 1);
  transform-origin: bottom center;
  transform:
    translate3d(0, calc((1 - clamp(0, var(--scene-q) * 2, 1)) * 50px), 0)
    rotateX(calc((1 - clamp(0, var(--scene-q) * 2, 1)) * 18deg));
  transition: transform 160ms linear, opacity 120ms linear;
}
.backbone-chapter [data-stop="V"] .branch:nth-child(1) { transition-delay: 0ms; }
.backbone-chapter [data-stop="V"] .branch:nth-child(2) { transition-delay: 60ms; }
.backbone-chapter [data-stop="V"] .branch:nth-child(3) { transition-delay: 120ms; }

/* Pipeline: stages cascade in from the left */
.backbone-chapter [data-stop="VI"] .pipeline .stage {
  opacity: clamp(0, calc(var(--scene-q) * 2 - 0.1), 1);
  transform: translate3d(calc((1 - clamp(0, var(--scene-q) * 2, 1)) * -40px), 0, 0);
  transition: opacity 120ms linear, transform 140ms linear;
}
.backbone-chapter [data-stop="VI"] .pipeline .stage:nth-child(1) { transition-delay: 0ms; }
.backbone-chapter [data-stop="VI"] .pipeline .stage:nth-child(2) { transition-delay: 30ms; }
.backbone-chapter [data-stop="VI"] .pipeline .stage:nth-child(3) { transition-delay: 60ms; }
.backbone-chapter [data-stop="VI"] .pipeline .stage:nth-child(4) { transition-delay: 90ms; }
.backbone-chapter [data-stop="VI"] .pipeline .stage:nth-child(5) { transition-delay: 120ms; }
.backbone-chapter [data-stop="VI"] .pipeline .stage:nth-child(6) { transition-delay: 150ms; }
.backbone-chapter [data-stop="VI"] .pipeline .stage:nth-child(7) { transition-delay: 180ms; }

/* Radar pulses with scroll center */
.backbone-chapter [data-stop="VII"] .radar {
  transform: scale(calc(0.94 + var(--scene-q) * 0.1))
             rotate(calc(var(--scene-q) * 18deg));
  transition: transform 140ms linear;
}

/* Matrix: cells stamp in */
.backbone-chapter [data-stop="VIII"] .matrix {
  transform:
    perspective(1200px)
    rotateX(calc((1 - clamp(0, var(--scene-q) * 2, 1)) * 14deg))
    translate3d(0, calc((1 - clamp(0, var(--scene-q) * 2, 1)) * 30px), 0);
  transform-origin: top center;
  transition: transform 160ms linear;
}

/* Worked example terminals: opposing translate */
.backbone-chapter [data-stop="X"] .terminal-card.bad {
  transform: translate3d(calc((var(--scene-q) - 0.5) * -30px), 0, 0)
             rotateY(calc((1 - clamp(0, var(--scene-q) * 2, 1)) * 4deg));
}
.backbone-chapter [data-stop="X"] .terminal-card.good {
  transform: translate3d(calc((var(--scene-q) - 0.5) * 30px), 0, 0)
             rotateY(calc((1 - clamp(0, var(--scene-q) * 2, 1)) * -4deg));
}

/* Gauge needle: scrub-fade in */
.backbone-chapter [data-stop="XI"] .gauge {
  transform: scale(calc(0.92 + var(--scene-q) * 0.1));
  transition: transform 120ms linear;
}

/* Self-check loop: rotates with scroll */
.backbone-chapter [data-stop="XII"] .loop > svg {
  transform: rotate(calc(var(--scene-q) * 30deg));
  transform-origin: 50% 50%;
  transition: transform 120ms linear;
}
.backbone-chapter [data-stop="XII"] .loop .qbutton {
  opacity: clamp(0, calc(var(--scene-q) * 2.4 - 0.4), 1);
  transition: opacity 120ms linear;
}

/* Targets: counter-rise with depth */
.backbone-chapter [data-stop="XIII"] .targets .target {
  opacity: clamp(0, calc(var(--scene-q) * 2.4 - 0.2), 1);
  transform:
    translate3d(0, calc((1 - clamp(0, var(--scene-q) * 2, 1)) * 50px), 0)
    rotateX(calc((1 - clamp(0, var(--scene-q) * 2, 1)) * 12deg));
  transform-origin: top center;
  transition: transform 160ms linear, opacity 140ms linear;
}
.backbone-chapter [data-stop="XIII"] .targets .target:nth-child(1) { transition-delay: 0ms; }
.backbone-chapter [data-stop="XIII"] .targets .target:nth-child(2) { transition-delay: 70ms; }
.backbone-chapter [data-stop="XIII"] .targets .target:nth-child(3) { transition-delay: 140ms; }

/* Provider grid: scale-in + faint chromatic shift */
.backbone-chapter [data-stop="XIV"] .target-card {
  opacity: clamp(0, calc(var(--scene-q) * 2.6 - 0.3), 1);
  transform:
    translate3d(0, calc((1 - clamp(0, var(--scene-q) * 2, 1)) * 24px), 0);
  transition: transform 130ms linear, opacity 120ms linear;
}
.backbone-chapter [data-stop="XIV"] .target-card:nth-child(1)  { transition-delay: 0ms; }
.backbone-chapter [data-stop="XIV"] .target-card:nth-child(2)  { transition-delay: 30ms; }
.backbone-chapter [data-stop="XIV"] .target-card:nth-child(3)  { transition-delay: 60ms; }
.backbone-chapter [data-stop="XIV"] .target-card:nth-child(4)  { transition-delay: 90ms; }
.backbone-chapter [data-stop="XIV"] .target-card:nth-child(5)  { transition-delay: 120ms; }
.backbone-chapter [data-stop="XIV"] .target-card:nth-child(6)  { transition-delay: 150ms; }
.backbone-chapter [data-stop="XIV"] .target-card:nth-child(7)  { transition-delay: 180ms; }
.backbone-chapter [data-stop="XIV"] .target-card:nth-child(8)  { transition-delay: 210ms; }

/* Motto: massive scale on entry */
.backbone-chapter [data-stop="XV"] .motto {
  letter-spacing: calc((1 - var(--scene-q)) * -0.04em + var(--scene-q) * -0.02em);
  transform: scale(calc(0.94 + var(--scene-q) * 0.08));
  transform-origin: center;
}

/* ── Grok overrides ─────────────────────────────────────── */

[data-scene="grok"] .exchange .tweet:nth-child(1) {
  transform: translate3d(calc((var(--scene-q) - 0.5) * -40px), 0, 0)
             rotateY(calc((1 - clamp(0, var(--scene-q) * 2, 1)) * 5deg));
}
[data-scene="grok"] .exchange .tweet:nth-child(2) {
  transform: translate3d(calc((var(--scene-q) - 0.5) *  40px), 0, 0)
             rotateY(calc((1 - clamp(0, var(--scene-q) * 2, 1)) * -5deg));
}
[data-scene="grok"] .verdict .quote {
  transform: scale(calc(0.94 + var(--scene-q) * 0.08));
  opacity: clamp(0, calc(var(--scene-q) * 2.2 - 0.4), 1);
}

/* ── Relay reveal overrides ─────────────────────────────── */

[data-scene="relay-reveal"] .wordmark-stage {
  transform:
    perspective(1400px)
    rotateX(calc((1 - clamp(0, var(--scene-q) * 2, 1)) * 8deg))
    translate3d(0, calc((1 - clamp(0, var(--scene-q) * 2, 1)) * 30px), 0);
}

[data-scene="relay-reveal"] .wordmark {
  letter-spacing: calc((var(--scene-q) - 0.5) * -0.03em);
  transform: scale(calc(0.96 + var(--scene-q) * 0.06));
  transform-origin: center;
}

[data-scene="relay-reveal"] .watch-stage,
[data-scene="relay-reveal"] .phone-stage,
[data-scene="relay-reveal"] .voice-stage {
  /* Each sub-stage gets a small parallax of its own using --scene-q from parent. */
  transform: translate3d(0, calc((1 - clamp(0, var(--scene-q) * 1.6, 1)) * 30px), 0);
  opacity: clamp(0, calc(var(--scene-q) * 2 - 0.2), 1);
  transition: transform 140ms linear, opacity 140ms linear;
}

[data-scene="relay-reveal"] .watch {
  transform:
    perspective(1000px)
    rotateY(calc((var(--scene-q) - 0.5) * 14deg))
    rotateX(calc((1 - clamp(0, var(--scene-q) * 2, 1)) * 8deg));
  transition: transform 140ms linear;
}

[data-scene="relay-reveal"] .phone {
  transform:
    perspective(1200px)
    rotateY(calc((0.5 - var(--scene-q)) * 12deg))
    translate3d(0, calc((0.5 - var(--scene-q)) * 30px), 0);
  transition: transform 140ms linear;
}

[data-scene="relay-reveal"] .waveform {
  transform: scaleY(calc(0.6 + var(--scene-q) * 0.7));
  transform-origin: center;
}

/* ── Architecture overrides ─────────────────────────────── */

[data-scene="architecture"] .arch-grid .arch-card {
  opacity: clamp(0, calc(var(--scene-q) * 2.2 - 0.2), 1);
  transform:
    translate3d(0, calc((1 - clamp(0, var(--scene-q) * 2, 1)) * 36px), 0)
    rotateX(calc((1 - clamp(0, var(--scene-q) * 2, 1)) * 10deg));
  transform-origin: top center;
  transition: transform 140ms linear, opacity 120ms linear;
}
[data-scene="architecture"] .arch-grid .arch-card:nth-child(1) { transition-delay: 0ms; }
[data-scene="architecture"] .arch-grid .arch-card:nth-child(2) { transition-delay: 40ms; }
[data-scene="architecture"] .arch-grid .arch-card:nth-child(3) { transition-delay: 80ms; }
[data-scene="architecture"] .arch-grid .arch-card:nth-child(4) { transition-delay: 120ms; }
[data-scene="architecture"] .arch-grid .arch-card:nth-child(5) { transition-delay: 160ms; }
[data-scene="architecture"] .arch-grid .arch-card:nth-child(6) { transition-delay: 200ms; }

[data-scene="architecture"] .timeline .row {
  opacity: clamp(0, calc(var(--scene-q) * 2.6 - 0.6), 1);
  transform: translate3d(calc((1 - clamp(0, var(--scene-q) * 2, 1)) * -28px), 0, 0);
  transition: transform 140ms linear, opacity 120ms linear;
}

/* ── Waitlist overrides ─────────────────────────────────── */

[data-scene="waitlist"] .form-wrap > div {
  transform: translate3d(calc((var(--scene-q) - 0.5) * -30px), 0, 0);
}
[data-scene="waitlist"] .specs {
  transform: translate3d(calc((var(--scene-q) - 0.5) *  30px), 0, 0);
}
[data-scene="waitlist"] .specs .row {
  opacity: clamp(0, calc(var(--scene-q) * 2.4 - 0.3), 1);
}

/* ── Principles overrides ───────────────────────────────── */

[data-scene="principles"] .slab {
  opacity: clamp(0, calc(var(--scene-q) * 2.2 - 0.2), 1);
  transform:
    translate3d(0, calc((1 - clamp(0, var(--scene-q) * 2, 1)) * 40px), 0)
    rotateX(calc((1 - clamp(0, var(--scene-q) * 2, 1)) * 8deg));
  transform-origin: top center;
  transition: transform 140ms linear, opacity 140ms linear;
}
[data-scene="principles"] .slab:nth-child(1) { transition-delay: 0ms; }
[data-scene="principles"] .slab:nth-child(2) { transition-delay: 80ms; }
[data-scene="principles"] .slab:nth-child(3) { transition-delay: 160ms; }

/* ── Footer ─────────────────────────────────────────────── */

[data-scene="footer"] {
  background: linear-gradient(180deg, transparent 0%, rgba(232,96,58,0.08) 100%);
}
[data-scene="footer"] .marks {
  transform: translate3d(0, calc((0.5 - var(--scene-q)) * 16px), 0);
}

/* ── Reduced motion ─────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  #scroll-canvas { display: none; }
  #scroll-grid, #scroll-noise { opacity: 0.3; }
  [data-scene] * {
    transform: none !important;
    opacity: 1 !important;
    transition: none !important;
  }
}