/* =====================================================================
   VESTIGE HOMEPAGE STORY — STYLES (v2)
   01 Tokens · 02 Base · 03 Stage layout · 04 Light · 05 Scene poses
   06 Anchor vessel, swirl, orb · 07 Person + icons · 08 Mascot
   09 Round table · 10 Phone + collection + cover · 11 Copy
   12 State label, actions, controls · 13 Footer · 14 Desktop
   15 Pause + reduced motion
   ===================================================================== */

/* ---------- 01 TOKENS ---------- */
@property --fg      { syntax: '<color>'; inherits: true; initial-value: #f6f1e8; }
@property --fg-soft { syntax: '<color>'; inherits: true; initial-value: rgba(246,241,232,.82); }
@property --flame   { syntax: '<color>'; inherits: true; initial-value: rgba(0,0,0,0); }
/* Pose variables: registered so the whole composition glides between scenes */
@property --ax  { syntax: '<length>'; inherits: true; initial-value: 0px; }
@property --ab  { syntax: '<length>'; inherits: true; initial-value: 0px; }
@property --aw  { syntax: '<length>'; inherits: true; initial-value: 0px; }
@property --pcx { syntax: '<length>'; inherits: true; initial-value: 0px; }
@property --pb  { syntax: '<length>'; inherits: true; initial-value: 0px; }
@property --ph  { syntax: '<length>'; inherits: true; initial-value: 0px; }

:root {
  --ink: #24211f; --night: #1b1917; --paper: #fbf8f1; --gold: #b99053;
  --flame-white: #f1ede4; --flame-gold: #e3b965; --flame-blue: #93b3dc; --flame-grey: #aaa7a2;
  --display: "Cormorant Garamond", Georgia, serif;
  --body: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --ease: cubic-bezier(.22,.61,.36,1);
  --pose: 1.5s;
  --pad: clamp(16px, 5vw, 40px);
}

/* ---------- 02 BASE ---------- */
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--night); }
body { font-family: var(--body); color: var(--ink); -webkit-font-smoothing: antialiased; }
a { color: inherit; }
button { font: inherit; }
img, video { display: block; max-width: none; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 6px; }

/* ---------- 03 STAGE LAYOUT (mobile first) ---------- */
.stage {
  --fg: #f6f1e8; --fg-soft: rgba(246,241,232,.82);
  position: relative; height: 100vh; height: 100svh; min-height: 600px;
  overflow: hidden; isolation: isolate; color: var(--fg);
  display: grid; grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto 1fr auto auto;
  grid-template-areas: "header" "copy" "scene" "foot" "controls";
  transition: --fg .8s var(--ease), --fg-soft .8s var(--ease);
}
.stage[data-scene="starter"], .stage[data-scene="final"] { --fg: #24211f; --fg-soft: rgba(36,33,31,.8); }

.stage__header { grid-area: header; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: max(14px, env(safe-area-inset-top)) var(--pad) 0; }
.brand { display: grid; gap: 3px; text-decoration: none; }
.brand__word { font-family: var(--display); font-size: 21px; font-weight: 600; letter-spacing: .16em; line-height: 1; }
.brand__id { white-space: nowrap; font-size: 10px; font-weight: 500; letter-spacing: .02em; color: var(--fg-soft); }
.appstore-pill { flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 12px; border-radius: 999px; text-decoration: none; white-space: nowrap; font-size: 12px; font-weight: 600; background: rgba(246,241,232,.94); color: var(--ink); transition: background 1.4s var(--ease), color 1.4s var(--ease); }
.appstore-pill__icon { width: 14px; height: 14px; margin-top: -2px; }
.stage[data-scene="starter"] .appstore-pill, .stage[data-scene="final"] .appstore-pill { background: var(--ink); color: var(--paper); }

.copy { grid-area: copy; z-index: 12; display: grid; padding: clamp(14px, 3svh, 30px) var(--pad) 0; }
.scene { grid-area: scene; position: relative; z-index: 5; min-height: 0; container-type: size; }
.state-label, .actions { grid-area: foot; z-index: 14; }
.controls { grid-area: controls; z-index: 20; }

/* ---------- 04 LIGHT — one room, changing light ---------- */
.light { --lx: 55%; --ly: 62%; position: absolute; inset: 0; z-index: -1; background: #121110; }
.light__layer { position: absolute; inset: 0; opacity: 0; transition: opacity 1.8s var(--ease); }
.stage[data-scene="starter"] .light__layer { transition-duration: .8s; }
.light__layer--dusk { background: radial-gradient(60% 40% at 15% 20%, rgba(150,158,176,.12), transparent 70%), linear-gradient(180deg, #171615, #121110); }
.light__layer--dawn { background: radial-gradient(60% 40% at var(--lx) var(--ly), rgba(214,168,92,.22), transparent 72%), linear-gradient(180deg, #1e1b17, #15130f); }
.light__layer--reading { background: radial-gradient(48% 30% at 50% 58%, color-mix(in srgb, var(--flame) 32%, transparent), transparent 72%), linear-gradient(180deg, #171513, #100f0e); transition: opacity 1.8s var(--ease), --flame 1s var(--ease); }
.light__layer--gallery { background: radial-gradient(50% 45% at 50% 55%, rgba(210,200,185,.12), transparent 72%), linear-gradient(180deg, #1a1816, #121110); }
.light__layer--paper { background: radial-gradient(60% 40% at 35% 65%, rgba(205,164,80,.2), transparent 72%), linear-gradient(180deg, #f7f2e9, #efe7da); }
.light__grain { position: absolute; inset: 0; opacity: .07; mix-blend-mode: overlay; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.stage[data-scene="weight"] .light__layer--dusk,
.stage[data-scene="entry"] .light__layer--dawn, .stage[data-scene="way"] .light__layer--dawn,
.stage[data-scene="reading"] .light__layer--reading,
.stage[data-scene="vessels"] .light__layer--gallery,
.stage[data-scene="starter"] .light__layer--paper, .stage[data-scene="final"] .light__layer--paper { opacity: 1; }

.stage[data-orb="white"] { --flame: var(--flame-white); }
.stage[data-orb="gold"]  { --flame: var(--flame-gold); }
.stage[data-orb="blue"]  { --flame: var(--flame-blue); }
.stage[data-orb="grey"]  { --flame: var(--flame-grey); }

/* ---------- 05 SCENE POSES — edit composition here ----------
   --ax / --ab / --aw : anchor vessel centre-x, bottom, width
   --pcx / --pb / --ph: phone centre-x, bottom, height
   All in container units of the scene box.                     */
.room {
  position: absolute; inset: 0;
  --ax: 70cqw; --ab: 6cqh; --aw: min(44cqw, 42cqh);
  --pcx: 50cqw; --pb: 2cqh; --ph: 92cqh;
  transition: --ax var(--pose) var(--ease), --ab var(--pose) var(--ease), --aw var(--pose) var(--ease),
              --pcx var(--pose) var(--ease), --pb var(--pose) var(--ease), --ph var(--pose) var(--ease);
}
.stage[data-scene="entry"]   .room { --ax: 70cqw; --ab: 6cqh;  --aw: min(44cqw, 42cqh); --pcx: 50cqw; --pb: 2cqh; --ph: 94cqh; }
.stage[data-scene="way"]     .room { --ax: 27cqw; --ab: 8cqh;  --aw: min(44cqw, 40cqh); --pcx: 75cqw; --pb: 3cqh; --ph: 86cqh; }
.stage[data-scene="reading"] .room { --ax: 50cqw; --ab: 12cqh; --aw: min(50cqw, 44cqh); --pcx: 75cqw; --pb: 3cqh; --ph: 86cqh; }
.stage[data-scene="vessels"] .room { --ax: 50cqw; --ab: 12cqh; --aw: min(42cqw, 38cqh); --pcx: 50cqw; --pb: 3cqh; --ph: 90cqh; }
.stage[data-scene="starter"] .room { --ax: 27cqw; --ab: 6cqh;  --aw: min(42cqw, 38cqh); --pcx: 50cqw; --pb: 3cqh; --ph: 90cqh; }
.stage[data-scene="final"]   .room { --ax: 27cqw; --ab: 6cqh;  --aw: min(42cqw, 38cqh); --pcx: 75cqw; --pb: 3cqh; --ph: 86cqh; }

/* derived geometry */
.room {
  --aTop:   calc(100cqh - var(--ab) - var(--aw) * 1.164);
  --orbY:   calc(var(--aTop) - var(--aw) * .03);
  --mouthY: calc(var(--aTop) + var(--aw) * .13);
  --pw:     calc(var(--ph) * .46);
}

/* ---------- 06 ANCHOR VESSEL, SWIRL, ORB ---------- */
.vessel {
  position: absolute; z-index: 4;
  left: calc(var(--ax) - var(--aw) / 2); top: var(--aTop); width: var(--aw); height: auto;
  filter: brightness(var(--vb, 1)) saturate(var(--vs, 1)) drop-shadow(0 18px 24px rgba(0,0,0,.3));
  transition: filter 1.6s var(--ease), opacity 1s var(--ease);
}
.stage[data-scene="weight"]  .vessel { --vb: .52; --vs: .6; }
.stage[data-scene="entry"]   .vessel { --vb: .4;  --vs: .6; opacity: .55; }
.stage[data-scene="way"]     .vessel { --vb: .9;  --vs: .92; }
.stage[data-scene="reading"] .vessel,
.stage[data-scene="vessels"] .vessel,
.stage[data-scene="starter"] .vessel { opacity: 0; }
.stage[data-scene="final"]   .vessel { filter: drop-shadow(0 22px 24px rgba(80,60,30,.18)); }

.swirl {
  position: absolute; z-index: 5; pointer-events: none;
  left: calc(var(--ax) - var(--aw) * .31); top: calc(var(--mouthY) - var(--aw) * .1);
  width: calc(var(--aw) * .62); height: calc(var(--aw) * .2);
  border-radius: 50%; overflow: hidden; opacity: 0; mix-blend-mode: screen;
  background: radial-gradient(closest-side, rgba(255,226,160,.55), rgba(255,226,160,0));
  transition: opacity .6s var(--ease);
}
.swirl svg { width: 100%; height: 300%; margin-top: -33%; transform: scaleY(.34); transform-origin: 50% 50%; }
.swirl path { fill: none; stroke: #ffe3a3; stroke-width: 3.2; stroke-linecap: round; opacity: .9; }
.swirl .swirl__b { stroke: #fff6e4; stroke-width: 2; opacity: .7; }
.swirl__spin { transform-origin: 0 0; animation: spin 1.1s linear infinite; }
.stage[data-swirl="true"] .swirl { opacity: 1; }
@keyframes spin { to { transform: rotate(360deg); } }

.glow {
  position: absolute; z-index: 3; pointer-events: none;
  left: calc(var(--ax) - var(--aw) * .75); top: calc(var(--orbY) - var(--aw) * .75);
  width: calc(var(--aw) * 1.5); aspect-ratio: 1; border-radius: 50%; filter: blur(16px); opacity: 0;
  background: radial-gradient(circle, color-mix(in srgb, var(--flame) 48%, transparent), color-mix(in srgb, var(--flame) 10%, transparent) 45%, transparent 70%);
  transition: opacity 1.2s var(--ease), --flame 1s var(--ease);
}
.stage:not([data-orb="none"]) .glow { opacity: .9; }

.orb {
  position: absolute; z-index: 6; pointer-events: none;
  left: calc(var(--ax) - var(--aw) * .52); top: calc(var(--orbY) - var(--aw) * .52);
  width: calc(var(--aw) * 1.04); aspect-ratio: 1;
  opacity: 0; transform: scale(.7); transition: opacity 1s var(--ease), transform 1.2s var(--ease);
}
.stage:not([data-orb="none"]) .orb { opacity: 1; transform: none; }
.stage[data-orb="white"] .orb { filter: brightness(1.55) saturate(.4); }
.orb__canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.orb__fallback { position: absolute; inset: 31%; border-radius: 50%; opacity: 0; background: radial-gradient(circle at 38% 34%, #fff8e6, var(--flame) 40%, color-mix(in srgb, var(--flame) 60%, #000)); box-shadow: 0 0 40px 6px color-mix(in srgb, var(--flame) 50%, transparent); }
.orb[data-fallback] .orb__fallback { opacity: 1; }
.orb[data-fallback] .orb__canvas { display: none; }

/* Burn / Flow annotations beside the orb (scene 3) */
.note { position: absolute; z-index: 7; margin: 0; top: calc(var(--orbY) - var(--aw) * .5); display: grid; gap: 2px; opacity: 0; transition: opacity .8s var(--ease) .5s; }
.note b { font-family: var(--display); font-size: 25px; font-weight: 600; line-height: 1; }
.note span { font-size: 11px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--fg-soft); }
.note--burn { right: calc(100cqw - var(--ax) + var(--aw) * .3); text-align: right; }
.note--flow { left: calc(var(--ax) + var(--aw) * .3); }
.stage[data-scene="reading"] .note { opacity: 1; }

/* ---------- 07 PERSON + MONEY ICONS (scene 1) ---------- */
.person {
  position: absolute; z-index: 3; left: -4cqw; bottom: 2cqh; height: 70cqh; width: auto;
  opacity: 0; transform: translateY(4%); transition: opacity 1s var(--ease), transform 1.4s var(--ease), filter 1s var(--ease);
}
.stage[data-person="in"] .person { opacity: 1; transform: none; }
.stage[data-person="out"] .person { opacity: 0; filter: blur(6px); transform: translateY(-3%) scale(.96); }

.icon {
  --s: min(14cqw, 13cqh, 64px);
  position: absolute; z-index: 8; width: var(--s); height: auto;
  left: calc(var(--x) - var(--s) / 2); top: calc(var(--y) - var(--s) / 2);
  opacity: 0; scale: .6;
  filter: drop-shadow(0 8px 10px rgba(0,0,0,.35));
  animation: bob 2.6s ease-in-out infinite alternate; animation-delay: calc(var(--i) * -.45s);
}
.icon--1 { --i: 0; --x: 10cqw; --y: 14cqh; }
.icon--2 { --i: 1; --x: 34cqw; --y: 6cqh;  }
.icon--3 { --i: 2; --x: 58cqw; --y: 14cqh; }
.icon--4 { --i: 3; --x: 7cqw;  --y: 40cqh; }
.icon--5 { --i: 4; --x: 46cqw; --y: 34cqh; }
.icon--6 { --i: 5; --x: 27cqw; --y: 30cqh; }
.stage[data-icons="orbit"] .icon { opacity: 1; scale: 1; transition: opacity .6s var(--ease) calc(var(--i) * .08s), scale .8s var(--ease) calc(var(--i) * .08s); }
.stage[data-icons="drop"] .icon {
  left: calc(var(--ax) - var(--s) / 2); top: calc(var(--mouthY) - var(--s) / 2);
  scale: .22; opacity: 0;
  filter: drop-shadow(0 0 10px rgba(255,214,130,.95));
  transition: left .95s cubic-bezier(.2,.7,.4,1) calc(var(--i) * .1s), top .95s cubic-bezier(.7,-0.4,.9,.6) calc(var(--i) * .1s),
              scale .95s var(--ease) calc(var(--i) * .1s), opacity .25s linear calc(.8s + var(--i) * .1s), filter .3s;
}
.stage[data-icons="gone"] .icon { opacity: 0; transition: none; }
@keyframes bob { from { translate: 0 0; rotate: -4deg; } to { translate: 0 -8px; rotate: 4deg; } }

/* ---------- 08 MASCOT ---------- */
.mascot {
  --mx: 110cqw; --my: 12cqh; --ms: min(17cqw, 15cqh);
  position: absolute; z-index: 11; width: var(--ms); aspect-ratio: 440 / 672;
  left: calc(var(--mx) - var(--ms) / 2); top: calc(var(--my) - var(--ms) * .76);
  opacity: 0; pointer-events: none;
  transition: left 1.1s var(--ease), top 1.1s var(--ease), width 1.1s var(--ease), opacity .7s var(--ease);
}
.mascot__body { position: relative; width: 100%; height: 100%; animation: float 3s ease-in-out infinite alternate; filter: drop-shadow(0 10px 14px rgba(0,0,0,.28)); }
.mascot__body img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.mascot__closed { opacity: 0; animation: blink 3.4s steps(1) infinite; }   /* open-eyes base never hides */

.stage[data-mascot="enter"]   .mascot { --mx: 112cqw; --my: 8cqh; }
.stage[data-mascot="hover"]   .mascot { --mx: 62cqw; --my: 30cqh; opacity: 1; transition-duration: 1.8s, 1.8s, 1.1s, .7s; }
.stage[data-mascot="cast"]    .mascot { --mx: calc(var(--ax) - var(--aw) * .58); --my: calc(var(--aTop) - var(--aw) * .05); opacity: 1; }
.stage[data-mascot="login"]   .mascot { --mx: calc(var(--pcx) + var(--ph) * .0506); --my: calc(100cqh - var(--pb) - var(--ph) * .78 + var(--ms) * .76 - var(--ms) * .76); --ms: calc(var(--ph) * .062); opacity: 1; transition-duration: 1.3s, 1.3s, 1.3s, .5s; }
.stage[data-mascot="handoff"] .mascot { --mx: calc(var(--pcx) + var(--ph) * .0506); --my: calc(100cqh - var(--pb) - var(--ph) * .78); --ms: calc(var(--ph) * .062); opacity: 0; }
.stage[data-mascot="orb"]     .mascot { --mx: calc(var(--ax) - var(--aw) * .42); --my: calc(var(--orbY) + var(--aw) * .02); --ms: calc(var(--aw) * .32); opacity: 1; }
.stage[data-mascot="dance"]   .mascot { --mx: calc(var(--ax) - var(--aw) * .66); --my: calc(100cqh - var(--ab) - var(--aw) * .28); --ms: calc(var(--aw) * .34); opacity: 1; }
.stage[data-mascot="dance"]   .mascot__body { animation: dance .9s ease-in-out infinite; }
.stage[data-mascot="hidden"]  .mascot { opacity: 0; }
.stage[data-mascot="final"]   .mascot { --mx: calc(var(--ax) - var(--aw) * .46); --my: calc(var(--orbY) + var(--aw) * .06); --ms: calc(var(--aw) * .3); opacity: 1; }
.stage[data-mascot="cast"]    .mascot__body { animation: cast .6s ease-in-out infinite alternate; }

@keyframes float { from { translate: 0 0; rotate: -3deg; } to { translate: 0 -9px; rotate: 3deg; } }
@keyframes cast  { from { translate: 0 0; rotate: 8deg; } to { translate: 3px -6px; rotate: 16deg; } }
@keyframes dance { 0% { translate: 0 0; rotate: -10deg; } 25% { translate: 6px -14px; rotate: 0deg; } 50% { translate: 12px 0; rotate: 10deg; } 75% { translate: 6px -10px; rotate: 0deg; } 100% { translate: 0 0; rotate: -10deg; } }
@keyframes blink { 0%, 44% { opacity: 0; } 46% { opacity: 1; } 49%, 90% { opacity: 0; } 92% { opacity: 1; } 95%, 100% { opacity: 0; } }

/* spell sparks */
.spark { position: absolute; width: 7px; height: 7px; border-radius: 50%; background: #fff3cf; box-shadow: 0 0 10px 3px rgba(255,210,120,.9); opacity: 0; }
.spark--1 { left: 90%; top: 20%; } .spark--2 { left: 105%; top: 45%; } .spark--3 { left: 80%; top: -4%; }
.spark--4 { left: 115%; top: 10%; } .spark--5 { left: 96%; top: 70%; }
.stage[data-spell="true"] .spark { animation: twinkle .7s ease-in-out infinite; }
.spark--2 { animation-delay: .15s !important; } .spark--3 { animation-delay: .3s !important; } .spark--4 { animation-delay: .45s !important; } .spark--5 { animation-delay: .2s !important; }
@keyframes twinkle { 0%, 100% { opacity: 0; transform: scale(.4) translate(0,0); } 50% { opacity: 1; transform: scale(1.2) translate(6px,-6px); } }
.stage[data-mascot="orb"] .spark, .stage[data-mascot="final"] .spark { left: auto; right: -30%; }

/* ---------- 09 ROUND TABLE (scene 3) ---------- */
.table {
  position: absolute; z-index: 1; pointer-events: none;
  left: calc(var(--ax) - var(--aw) * 1.15); bottom: calc(var(--ab) - var(--aw) * .12);
  width: calc(var(--aw) * 2.3); height: calc(var(--aw) * .62); border-radius: 50%;
  background: radial-gradient(ellipse at 50% 40%, rgba(236,226,210,.16), rgba(236,226,210,.04) 60%, transparent 72%);
  box-shadow: inset 0 1px 0 rgba(236,226,210,.25);
  border: 1px solid rgba(236,226,210,.14);
  opacity: 0; transition: opacity 1s var(--ease);
}
.stage[data-scene="reading"] .table { opacity: 1; }

.tv {
  --k: 1; --dx: 0; --lift: 0; --z: 4; --br: 1;
  position: absolute; z-index: var(--z); height: auto;
  width: calc(var(--aw) * var(--k));
  left: calc(var(--ax) + var(--aw) * var(--dx) - var(--aw) * var(--k) / 2);
  bottom: calc(var(--ab) + var(--aw) * var(--lift));
  filter: brightness(var(--br)) drop-shadow(0 16px 20px rgba(0,0,0,.35));
  opacity: 0;
  transition: left 1.1s var(--ease), bottom 1.1s var(--ease), width 1.1s var(--ease), filter 1.1s var(--ease), opacity .9s var(--ease);
}
.stage[data-scene="reading"] .tv { opacity: 1; }
/* slots: front / back-right / back-left */
.stage[data-turn="0"] .tv--founders, .stage[data-turn="1"] .tv--heritage, .stage[data-turn="2"] .tv--sovereign { --k: 1; --dx: 0; --lift: 0; --z: 4; --br: .92; }
.stage[data-turn="0"] .tv--heritage, .stage[data-turn="1"] .tv--sovereign, .stage[data-turn="2"] .tv--founders { --k: .52; --dx: .72; --lift: .3; --z: 2; --br: .5; }
.stage[data-turn="0"] .tv--sovereign, .stage[data-turn="1"] .tv--founders, .stage[data-turn="2"] .tv--heritage { --k: .52; --dx: -.72; --lift: .3; --z: 2; --br: .5; }

/* ---------- 10 PHONE, COLLECTION, COVER ---------- */
.phone {
  position: absolute; z-index: 9; margin: 0;
  left: calc(var(--pcx) - var(--pw) / 2); bottom: var(--pb);
  width: var(--pw); height: var(--ph);
  border-radius: calc(var(--ph) * .07); overflow: hidden; background: #f3ede3;
  box-shadow: 0 0 0 5px #1f1d1b, 0 30px 50px rgba(0,0,0,.35);
  opacity: 0; transform: translateY(14%);
  transition: opacity .9s var(--ease), transform 1.3s var(--ease);
}
.stage:not([data-screen="none"]) .phone { opacity: 1; transform: none; }
.stage[data-scene="final"] .phone { box-shadow: 0 0 0 5px #24211f, 0 30px 50px rgba(80,60,30,.22); }
.phone__screen { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; opacity: 0; transition: opacity .7s var(--ease); }
.stage[data-screen="login"] .phone__screen[data-for="login"],
.stage[data-screen="ritual"] .phone__screen[data-for="ritual"],
.stage[data-screen="vesselsTab"] .phone__screen[data-for="vesselsTab"],
.stage[data-screen="zenTask"] .phone__screen[data-for="zenTask"] { opacity: 1; }
/* push-in when entering the app */
.stage[data-scene="entry"] .phone { animation: pushin 2.3s var(--ease) both; }
@keyframes pushin { from { scale: .92; } to { scale: 1; } }

.cv {
  --w: min(21cqw, 17cqh, 120px);
  position: absolute; z-index: 10; width: var(--w); height: auto;
  left: calc(var(--x) - var(--w) / 2); top: calc(var(--y) - var(--w) * .55);
  opacity: 0; scale: .7; translate: 0 10px;
  filter: drop-shadow(0 12px 14px rgba(0,0,0,.4));
  transition: opacity .6s var(--ease), scale .8s var(--ease), translate .8s var(--ease);
}
.cv--1 { --x: 12cqw; --y: 18cqh; --d: 0s; }   .cv--2 { --x: 12cqw; --y: 50cqh; --d: .12s; } .cv--3 { --x: 12cqw; --y: 82cqh; --d: .24s; }
.cv--4 { --x: 88cqw; --y: 18cqh; --d: .06s; } .cv--5 { --x: 88cqw; --y: 50cqh; --d: .18s; } .cv--6 { --x: 88cqw; --y: 82cqh; --d: .3s; }
.stage[data-scene="vessels"] .cv { opacity: 1; scale: 1; translate: 0 0; transition-delay: calc(.5s + var(--d)); animation: bob 3s ease-in-out infinite alternate; }

.cover {
  position: absolute; z-index: 10; height: min(80cqh, 150cqw); width: auto; aspect-ratio: 1080 / 1398;
  left: 50%; bottom: 4cqh; translate: -50% 0;
  border-radius: 10px; box-shadow: 0 24px 40px rgba(80,60,30,.24);
  opacity: 0; scale: .94; transition: opacity .7s var(--ease), scale 1s var(--ease);
}
.stage[data-scene="starter"] .cover { opacity: 1; scale: 1; }

/* ---------- 11 COPY ---------- */
.copy__block { grid-area: 1 / 1; align-self: start; opacity: 0; transform: translateY(10px); filter: blur(5px); transition: opacity .6s var(--ease), transform .9s var(--ease), filter .7s var(--ease); pointer-events: none; }
.copy__block.is-active { opacity: 1; transform: none; filter: none; pointer-events: auto; transition-delay: .3s; }
.stage[data-scene="starter"] .copy__block.is-active { transition-delay: .1s; }
.copy__headline { margin: 0; max-width: 14ch; font-family: var(--display); font-weight: 600; letter-spacing: -.02em; font-size: clamp(32px, 9vw, 46px); line-height: .98; text-wrap: balance; }
.copy__headline--long { max-width: 16ch; font-size: clamp(29px, 8vw, 42px); }
.copy__support { margin: 10px 0 0; max-width: 34ch; font-size: 15px; line-height: 1.45; color: var(--fg-soft); }
.copy__note { margin: 8px 0 0; font-family: var(--display); font-style: italic; font-size: 19px; line-height: 1.2; color: var(--fg); }

/* ---------- 12 STATE LABEL, ACTIONS, CONTROLS ---------- */
.state-label { padding: 0 var(--pad); text-align: center; opacity: 0; transition: opacity .6s var(--ease); pointer-events: none; }
.stage[data-scene="reading"] .state-label { opacity: 1; }
.state-label__note { margin: 0 0 5px; font-size: 11px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--fg-soft); }
.state-label__text { margin: 0; min-height: 1.2em; font-family: var(--display); font-size: 26px; font-weight: 600; line-height: 1.1; transition: opacity .3s var(--ease); }
.state-label__text.is-swapping { opacity: 0; }
.state-label__dots { display: flex; justify-content: center; gap: 8px; margin: 8px 0 0; padding: 0; list-style: none; }
.state-label__dots li { width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .25; transition: all .5s; }
.stage[data-orb="gold"] [data-dot="gold"], .stage[data-orb="blue"] [data-dot="blue"], .stage[data-orb="grey"] [data-dot="grey"] { opacity: 1; background: var(--flame); transform: scale(1.3); }

.actions { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 6px var(--pad) 0; opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .7s var(--ease), transform .9s var(--ease), visibility 0s .9s; }
.stage[data-cta="starter"] .actions, .stage[data-cta="final"] .actions { opacity: 1; visibility: visible; transform: none; transition-delay: .2s, .2s, 0s; }
.stage[data-cta="starter"] .btn--primary { display: none; }
.stage[data-cta="starter"] .btn--text { padding: 0 22px; min-height: 48px; border: 1px solid var(--ink); border-radius: 999px; text-decoration: none; }
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; border-radius: 999px; text-decoration: none; font-weight: 600; font-size: 15px; }
.btn--primary { padding: 0 24px; background: var(--ink); color: var(--paper); box-shadow: 0 12px 24px rgba(36,33,31,.16); }
.btn--primary:hover { background: #3a3531; }
.btn--text { min-height: 40px; padding: 0 4px; font-size: 14px; text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; color: var(--fg); }

.controls { display: flex; align-items: center; gap: 2px; padding: 6px calc(var(--pad) - 10px) max(10px, env(safe-area-inset-bottom)); }
.progress { flex: 1; height: 1px; margin: 0 10px; background: color-mix(in srgb, var(--fg) 20%, transparent); overflow: hidden; }
.progress__bar { display: block; height: 100%; background: var(--fg); transform-origin: 0 50%; transform: scaleX(0); }
.ctrl { min-height: 44px; min-width: 44px; padding: 0 10px; border: 0; background: none; color: var(--fg); font-size: 12.5px; font-weight: 600; cursor: pointer; border-radius: 999px; }
.ctrl:hover { background: color-mix(in srgb, var(--fg) 10%, transparent); }
.ctrl[disabled] { opacity: .55; cursor: default; background: none; }


/* ---------- 13b QR (desktop only) + ABOUT ---------- */
.qr { display: none; }
@media (min-width: 900px) {
  .qr { display: flex; align-items: center; gap: 12px; margin-top: 10px; font-size: 12.5px; line-height: 1.35; max-width: 220px; color: var(--fg-soft); }
  .qr img { width: 84px; height: 84px; border-radius: 10px; box-shadow: 0 6px 16px rgba(36,33,31,.12); }
  .stage[data-cta="starter"] .qr { display: none; }
}
.about { padding: 48px var(--pad) 44px; background: #f4eee4; color: var(--ink); }
.about h2 { margin: 0 0 14px; font-family: var(--display); font-size: 32px; font-weight: 600; letter-spacing: -.01em; }
.about p { margin: 0 0 12px; max-width: 62ch; font-size: 15.5px; line-height: 1.6; color: rgba(36,33,31,.82); }
.about__link { display: inline-flex; align-items: center; min-height: 44px; margin-top: 4px; font-weight: 600; font-size: 15px; text-underline-offset: 4px; }
@media (min-width: 900px) { .about { padding: 72px max(var(--pad), calc((100vw - 760px) / 2)); } .about h2 { font-size: 40px; } }

/* ---------- 13 FOOTER ---------- */
.footer { padding: 36px var(--pad) 34px; background: #1b1917; color: rgba(246,241,232,.84); font-size: 13px; }
.footer__brand { margin: 0 0 6px; font-family: var(--display); font-size: 22px; font-weight: 600; letter-spacing: .16em; color: var(--paper); }
.footer__line { margin: 0 0 16px; line-height: 1.5; color: rgba(246,241,232,.66); }
.footer__links { display: flex; flex-wrap: wrap; gap: 0 20px; margin: 0; padding: 0; list-style: none; }
.footer__links a { display: inline-flex; align-items: center; min-height: 40px; text-underline-offset: 4px; }
.footer__social { margin-top: 6px; padding-top: 6px; border-top: 1px solid rgba(246,241,232,.12); }
.footer__copy { margin: 14px 0 0; font-size: 12px; color: rgba(246,241,232,.45); }

/* ---------- Narrow + short phones ---------- */
@media (max-width: 390px) {
  .stage { --pad: 16px; }
  .appstore-pill { font-size: 11.5px; gap: 4px; padding: 0 10px; }
  .brand__id { font-size: 9.5px; }
  .brand__word { font-size: 19px; }
}
@media (max-width: 340px) { .appstore-pill__icon { display: none; } }
@media (max-height: 700px) and (max-width: 899px) {
  .copy__headline { font-size: clamp(29px, 8vw, 36px); }
  .copy__headline--long { font-size: clamp(26px, 7.2vw, 32px); }
  .copy__support { font-size: 14px; margin-top: 6px; }
  .state-label__text { font-size: 22px; }
}

/* ---------- 14 DESKTOP ---------- */
@media (min-width: 900px) {
  .stage {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-rows: auto 1fr auto auto;
    grid-template-areas: "header header" "copy scene" "foot scene" "controls controls";
    column-gap: 2vw; padding: 0 max(0px, calc((100vw - 1320px) / 2));
  }
  .stage__header { padding-top: 26px; }
  .brand__word { font-size: 24px; } .brand__id { font-size: 11.5px; }
  .copy { align-self: end; padding: 0 0 26px var(--pad); }
  .copy__headline { font-size: clamp(46px, 4.4vw, 70px); max-width: 12ch; }
  .copy__headline--long { font-size: clamp(40px, 3.8vw, 58px); max-width: 14ch; }
  .copy__support { font-size: 17px; margin-top: 16px; }
  .state-label, .actions { align-self: start; padding-left: var(--pad); text-align: left; min-height: 110px; }
  .state-label__dots { justify-content: flex-start; }
  .scene { margin-top: 12px; }
  .ctrl { font-size: 14px; padding: 0 14px; }
  .controls { padding: 10px var(--pad) 18px; }
}

/* ---------- 15 PAUSE + REDUCED MOTION ---------- */
.stage[data-paused="true"] *, .stage[data-paused="true"] *::before { animation-play-state: paused !important; }
@media (prefers-reduced-motion: reduce) {
  .stage, .stage * { transition-duration: .01ms !important; transition-delay: 0s !important; animation: none !important; }
}