html.motion .sequence { position: relative; height: 100svh; overflow: hidden; background: var(--space); }
html.motion .sequence > .chapter { position: absolute; inset: 0; min-height: 0; background: transparent; }
/* until the sequence is built (slow network), the pinned stage is just the hero: no scene layers, no other chapters */
html.motion:not(.seq-ready) .seq-stage > :not(#stage), html.motion:not(.seq-ready) .sequence > .chapter:not(#ignition) { visibility: hidden; }
html.motion .seq-stage { display: block; position: absolute; inset: 0; pointer-events: none; }
html.motion .seq-stage > * { position: absolute; }
/* The canvas is transparent until the 3D renders, so it needs no hidden state (a CSS opacity:0 here was captured by GSAP as the "before" value and restored on reverse). */
html.motion #stage { inset: 0; width: 100%; height: 100%; z-index: 2; }
html.motion .rocket-box .poster { transition: opacity 0.45s ease; }
html.motion.webgl-ready .rocket-box .poster { opacity: 0; }
/* exhaust wipe (spec §1b): grows from under the rocket to fill the frame, then clears into the trail. Sits under the particles. */
html.motion .smoke { left: -30vw; right: -30vw; bottom: -55svh; height: 170svh; transform-origin: 50% 85%; z-index: 1; opacity: 0; background: url('../img/smoke.webp') center bottom / cover no-repeat; mix-blend-mode: screen; will-change: transform, opacity;
  /* flame-lit, warm exhaust; feathered so it never shows a box edge */
  filter: brightness(0.55) sepia(0.35) saturate(1.6) hue-rotate(-18deg);
  -webkit-mask-image: radial-gradient(ellipse 58% 52% at 50% 70%, #000 45%, transparent 78%); mask-image: radial-gradient(ellipse 58% 52% at 50% 70%, #000 45%, transparent 78%); }
html.motion .trail { inset: 0; width: 100%; height: 100%; z-index: 5; overflow: visible; }
.trail path { fill: none; stroke: url(#fire); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 0 99999; filter: drop-shadow(0 0 6px #E23A9B); }
.trail .spark { fill: #FFF6EC; opacity: 0; filter: drop-shadow(0 0 6px #FFFFFF) drop-shadow(0 0 16px #FF6A2B) drop-shadow(0 0 34px #E23A9B); }
html.motion .rip { left: 0; top: 0; z-index: 6; visibility: hidden; transform-origin: 0 0; }
.rip-half { position: absolute; overflow: hidden; will-change: transform; }
.rip-inner { position: absolute; left: 0; top: 0; transform-origin: 0 0; will-change: transform; }
.jeral-scene { position: relative; background: var(--cream); }
.jeral-scene .browser { position: absolute; right: 4vw; top: 22vh; width: min(50vw, 780px); border-radius: 12px; overflow: hidden; box-shadow: 0 40px 80px -30px rgb(20 18 23 / .45); background: #fff; }
.jeral-scene .browser::before { content: ''; display: block; height: 28px; background: #EDE6DA radial-gradient(circle at 16px 14px, #FF6A2B 4px, transparent 5px), radial-gradient(circle at 32px 14px, #C9962B 4px, transparent 5px); }
.jeral-scene .browser { display: grid; grid-template-rows: 28px auto; }
.jeral-scene .browser::before { grid-row: 1; grid-column: 1; }
.jeral-scene .browser img { grid-row: 2; grid-column: 1; display: block; width: 100%; height: auto; }
.jeral-scene .phone { display: grid; }
.jeral-scene .phone img { grid-area: 1 / 1; display: block; width: 100%; height: auto; }
.jeral-scene .shot-es-wrap { display: block; overflow: hidden; transform-origin: 50% 0; will-change: transform; }
.jeral-scene .shot-es-wrap img { transform-origin: 50% 0; }
.jeral-scene .browser .shot-es-wrap { grid-row: 2; grid-column: 1; }
.jeral-scene .phone .shot-es-wrap { grid-area: 1 / 1; }
.jeral-scene .phone { position: absolute; right: 3vw; bottom: 6vh; width: min(15vw, 210px); border-radius: 28px; overflow: hidden; border: 6px solid #141217; box-shadow: 0 30px 60px -25px rgb(20 18 23 / .5); }
@media (max-width: 700px) { .jeral-scene .browser { display: none; } .jeral-scene .phone { width: 42vw; right: 50%; translate: 50% 0; bottom: 3vh; } }
/* twin of the SVG slash (stroke 2.5px, 6px magenta glow); colours set per point in sequence.js. box-shadow, not filter: filters on long rotated layers get clipped */
.rip-edge { position: absolute; left: 0; top: 0; height: 2.5px; margin-top: -1.25px; border-radius: 2px; box-shadow: 0 0 6px #E23A9B; will-change: transform; }
html.motion [data-chapter="trajectory"] :is(.copy, .label), html.motion [data-chapter="with-jeral"] :is(.copy, .label) { opacity: 0; }
html.motion [data-chapter="with-jeral"] { color: var(--ink); z-index: 7; }
html.motion [data-chapter="with-jeral"] .jeral-static { display: none; }
html.motion .flip { position: relative; perspective: 900px; }
html.motion .flip-es { display: block; position: absolute; inset: 0; }
.flip .w { backface-visibility: hidden; will-change: transform, opacity; }
html.motion [data-chapter="ignition"] { z-index: 4; }
html.motion [data-chapter="trajectory"] { z-index: 5; }
html.motion .sequence > .chapter .copy { will-change: transform, opacity; }

/* With Jeral headline stacks one word per line (like withjeral.com) and stays left of the screenshots */
html.motion [data-chapter="with-jeral"] .copy { max-width: min(38vw, 520px); }
html.motion .flip .w { display: block; white-space: nowrap; }
@media (max-width: 700px) { html.motion [data-chapter="with-jeral"] .copy { max-width: none; } html.motion [data-chapter="with-jeral"] { align-content: start; padding-top: 8rem; } }
html.motion #ignition h1 .hw { display: inline-block; will-change: transform, opacity, filter; }
html.motion #ignition .copy p, html.motion #ignition .label { will-change: transform, opacity, filter; }

/* ---------- round 1: night → origami fold → neon phone → rings → flip to gold ---------- */
html.motion .night { top: 0; bottom: 0; left: -80vw; right: 0; z-index: 8; background: radial-gradient(120% 90% at 70% 70%, #3a1609 0%, var(--ember-night) 45%, var(--space) 100%);
  will-change: transform;   /* position driven by GSAP xPercent only (a CSS transform here is read as a px offset) */
  /* curved front (a bulging wave, not a vertical panel); 80vw of slack keeps its corners off-screen once arrived */
  -webkit-mask-image: radial-gradient(160% 120% at 100% 50%, #000 58%, transparent 74%); mask-image: radial-gradient(160% 120% at 100% 50%, #000 58%, transparent 74%); }
html.motion .night::after { content: ''; position: absolute; inset: 0; opacity: calc(var(--gold, 0) * (1 - var(--plumA, 0)));   /* gold gives way to plum */
  background: radial-gradient(110% 90% at 70% 60%, #6b4a12 0%, #2a1c07 45%, var(--space) 100%); }
html.motion .wire { inset: 0; width: 100%; height: 100%; z-index: 9; overflow: visible; }
.wire-path { fill: none; stroke: url(#fire); stroke-width: 2.5; stroke-linecap: round; filter: drop-shadow(0 0 6px #E23A9B); }
.wire-spark { fill: #FFF6EC; opacity: 0; filter: drop-shadow(0 0 6px #fff) drop-shadow(0 0 16px #FF6A2B) drop-shadow(0 0 34px #E23A9B); }
html.motion .device { left: 0; top: 0; z-index: 10; visibility: hidden; perspective: 1400px; transform-origin: 0 0; will-change: transform; }
.device-3d { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; will-change: transform; }
.device .face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; transform-style: preserve-3d; }
.device .face.back { transform: rotateY(180deg); }
.fold-panel { position: absolute; top: 0; height: 100%; overflow: hidden; backface-visibility: hidden; background: #fff; will-change: transform, opacity; }
.fold-panel.l { transform-origin: 100% 50%; } .fold-panel.r { transform-origin: 0 50%; }
.neon { position: absolute; left: 50%; top: 50%; overflow: visible; }
/* the real phone's black frame, drawn on the neon body's exact shape: it lights up into the neon tube at power-on */
.bezel { position: absolute; left: 50%; top: 50%; opacity: 0; pointer-events: none; } .bezel path { fill: #141217; }
.neon .n { fill: none; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.neon.bad .n { stroke: url(#phoneFire); } .neon.good .n { stroke: url(#phoneGold); }
.neon .n-t { font: 600 30px var(--font-display); text-anchor: middle; }
.neon .n-t.small { font: 400 16px var(--font-mono); letter-spacing: .12em; text-transform: uppercase; }
.neon.bad .n-t { fill: #FFB08A; } .neon.good .n-t { fill: #FFE3A3; }
.neon.bad { filter: drop-shadow(0 0 5px #FF6A2B) drop-shadow(0 0 18px #E23A9B); }
.neon.good { filter: drop-shadow(0 0 5px #FFD27A) drop-shadow(0 0 20px #F2B640); }
html.motion .confetti { inset: 0; width: 100%; height: 100%; z-index: 11; pointer-events: none; }
html.motion [data-chapter="gotbadnews"], html.motion [data-chapter="gotgoodnews"] { z-index: 12; color: var(--starlight); pointer-events: none; }
html.motion [data-chapter="gotbadnews"] :is(.copy, .label, .transcript), html.motion [data-chapter="gotgoodnews"] :is(.copy, .label, .transcript) { opacity: 0; }
html.motion [data-chapter="gotbadnews"] :is(a, button), html.motion [data-chapter="gotgoodnews"] :is(a, button) { pointer-events: auto; }
html.motion .sequence .transcript { position: absolute; max-width: min(30ch, 34vw); }
html.motion .sequence .transcript li { position: absolute; left: 0; right: 0; white-space: normal; background: color-mix(in oklab, var(--space) 94%, transparent); border: 1px solid color-mix(in oklab, currentColor 18%, transparent); opacity: 0; will-change: transform, opacity; }
html.motion [data-chapter="gotbadnews"] .copy, html.motion [data-chapter="gotgoodnews"] .copy { max-width: min(40vw, 560px); }
@media (max-width: 700px) {
  html.motion [data-chapter="gotbadnews"], html.motion [data-chapter="gotgoodnews"] { align-content: start; padding-top: 7.5rem; }
  html.motion [data-chapter="gotbadnews"] .copy, html.motion [data-chapter="gotgoodnews"] .copy { max-width: none; }
  html.motion .sequence .transcript { max-width: none; }
}
/* clones of the With Jeral browser/phone inside the fold panels keep the original look */
.fold-panel .clone.browser { display: grid; grid-template-rows: 28px auto; background: #fff; border-radius: 12px; overflow: hidden; }
.fold-panel .clone.browser::before { content: ''; display: block; grid-row: 1; grid-column: 1; background: #EDE6DA radial-gradient(circle at 16px 14px, #FF6A2B 4px, transparent 5px), radial-gradient(circle at 32px 14px, #C9962B 4px, transparent 5px); }
.fold-panel .clone.browser > img, .fold-panel .clone.browser > .shot-es-wrap { grid-row: 2; grid-column: 1; }
.fold-panel .clone img { display: block; width: 100%; height: auto; }
.fold-panel .clone.phone { display: grid; border-radius: 28px; overflow: hidden; border: 6px solid #141217; }
.fold-panel .clone.phone > * { grid-area: 1 / 1; }
.fold-panel .clone .shot-es-wrap { display: block; overflow: hidden; }
.fold-panel { background: transparent; }
.wire .callring { fill: none; stroke: url(#fire); stroke-width: 2; opacity: 0; filter: drop-shadow(0 0 6px #E23A9B); }
@media (min-width: 701px) { html.motion [data-chapter="gotbadnews"], html.motion [data-chapter="gotgoodnews"] { align-content: start; padding-top: 16vh; } }

/* ---------- round 2: waveform, plum scene, studio board ---------- */
html.motion .night::before { content: ""; position: absolute; inset: 0; opacity: var(--plumA, 0); background: radial-gradient(110% 90% at 70% 65%, #4a1f5c 0%, var(--plum) 45%, var(--space) 100%); }
html.motion .void { inset: 0; z-index: 8; background: var(--space); opacity: 0; pointer-events: none; }
html.motion .wave { inset: 0; width: 100%; height: 100%; z-index: 9; overflow: visible; }
.wave-path { fill: none; stroke: url(#fire); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; opacity: 0; filter: drop-shadow(0 0 6px #E23A9B) drop-shadow(0 0 16px #FF6A2B); }
html.motion .board { inset: 0; width: 100%; height: 100%; z-index: 9; overflow: visible; visibility: hidden; }
.board .seg { stroke: url(#boardFire); stroke-width: var(--seg-w, 6px); stroke-linecap: round; opacity: 0; }
/* one glow for the whole board, on its own composited layer (40 per-segment drop-shadows dropped 13% of studio frames) */
html.motion .board { filter: drop-shadow(0 0 3px rgba(226, 58, 155, 0.95)) drop-shadow(0 0 12px rgba(255, 106, 43, 0.55)); will-change: filter; }
.board .flabel { fill: var(--starlight-dim); font: 400 16px var(--font-mono); letter-spacing: .08em; text-anchor: middle; opacity: 0; }
@media (max-width: 700px) { .board .flabel { font-size: 11px; } }
html.motion [data-chapter="voice-lab"], html.motion [data-chapter="studio"] { z-index: 12; color: var(--starlight); pointer-events: none; }
html.motion :is([data-chapter="voice-lab"], [data-chapter="studio"]) :is(.copy, .chapter > .label) { opacity: 0; visibility: hidden; }   /* (a bare "> .label" inside :is() is invalid and was silently dropped) */
html.motion [data-chapter="voice-lab"] :is(a, button), html.motion [data-chapter="studio"] :is(a, button) { pointer-events: auto; }
html.motion [data-chapter="studio"] .facts { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }   /* real facts stay for screen readers; drawn as neon digits */
@media (min-width: 701px) { html.motion [data-chapter="voice-lab"], html.motion [data-chapter="studio"] { align-content: start; padding-top: 16vh; } html.motion [data-chapter="voice-lab"] .copy, html.motion [data-chapter="studio"] .copy { max-width: min(44vw, 620px); } }
@media (max-width: 700px) { html.motion [data-chapter="voice-lab"], html.motion [data-chapter="studio"] { align-content: start; padding-top: 7.5rem; } }
.actions .grant img { display: block; height: 32px; width: auto; }
/* short phones (SE-class): the pinned chapters must fit copy, controls, caption band and phone in one screen */
@media (max-width: 700px) and (max-height: 760px) {
  html.motion :is([data-chapter="gotbadnews"], [data-chapter="gotgoodnews"], [data-chapter="voice-lab"], [data-chapter="studio"]) { padding-top: 5.75rem; }
  html.motion :is([data-chapter="gotbadnews"], [data-chapter="gotgoodnews"], [data-chapter="voice-lab"], [data-chapter="studio"]) > .label { top: 4.35rem; }
  html.motion :is([data-chapter="gotbadnews"], [data-chapter="gotgoodnews"], [data-chapter="voice-lab"], [data-chapter="studio"]) h2 { font-size: 2.1rem; }
  html.motion :is([data-chapter="gotbadnews"], [data-chapter="gotgoodnews"], [data-chapter="voice-lab"]) .actions { margin-top: 0.75rem; row-gap: 0.5rem; }
}

.fold-panel .mshot { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; opacity: 0; }   /* desktop: With Jeral mobile page on the phone-to-be */

/* ---------- round 3: the landing ---------- */
html.motion [data-chapter="launch-pad"] { z-index: 12; pointer-events: none; }
html.motion [data-chapter="launch-pad"] :is(a, button) { pointer-events: auto; }
html.motion [data-chapter="launch-pad"] :is(.copy, .contact, .wordmark, .chapter > .label) { opacity: 0; }
html.motion [data-chapter="launch-pad"] .contact { border-top-color: transparent; }   /* the drawn rule is the line */
html.motion .land-box .poster { opacity: 0; }   /* shown by landing.js only when there is no 3D */
html.motion .rule { inset: 0; width: 100%; height: 100%; z-index: 8; overflow: visible; pointer-events: none; }
.rule .r-line { stroke: var(--starlight); stroke-width: 1; opacity: 0; }
.rule .r-ripple { fill: none; stroke: var(--starlight); stroke-width: 1; opacity: 0; }
.rule .r-pulse { stroke: var(--starlight); stroke-width: 1.5; stroke-linecap: round; opacity: 0; filter: drop-shadow(0 0 4px rgba(245, 241, 234, 0.6)); }