/* The landing page as a film.
   Five scenes after the hero, each a pinned stage that the scroll scrubs.
   film.js writes progress into custom properties (--fly, --walk, --rot …) and
   everything here is a pure function of them: no timers, no keyframes on the
   things that scrub, so scrolling back plays the scene backwards.

   Every custom property has a fallback that is the SETTLED state of its scene.
   That is what makes the no-script and reduced-motion pages readable: they are
   the same markup with nothing scrubbing it, i.e. every scene at its last frame.

   Geometry inside a scene is in `em` on the scene root, where 1em is 1/100 of
   the width (or 1.6 x the height, whichever is smaller). Text is set in px on
   the leaves so type does not scale with the stage. */

:root { --ink: #0B0712; --gold-a: #6d4f0d; --gold-b: #edc24d; }

/* ── the reel: what act you are in ─────────────────────────────────────── */
.reel {
  position: fixed; right: 22px; top: 50%; z-index: 40;
  transform: translateY(-50%); display: none; flex-direction: column;
  gap: 14px; align-items: flex-end; pointer-events: none;
}
.film-on .reel { display: flex; }
.reel i {
  display: block; width: 18px; height: 1px; background: var(--hair);
  position: relative; transition: width .5s var(--ease), background .5s;
}
.reel i b {
  position: absolute; right: 26px; top: -6px; white-space: nowrap;
  font: 400 8.5px/1 var(--mono); letter-spacing: .2em; text-transform: uppercase;
  color: var(--acc); opacity: 0; transform: translateX(6px);
  transition: opacity .4s, transform .5s var(--ease);
}
.reel i.on { width: 40px; background: var(--acc); box-shadow: var(--glow); }
.reel i.on b { opacity: 1; transform: none; }
.reel .tc {
  margin-top: 8px; font: 400 8.5px/1 var(--mono); letter-spacing: .18em;
  color: var(--faint); font-variant-numeric: tabular-nums;
}
@media (max-width: 900px) { .film-on .reel { display: none; } }

nav::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  background: linear-gradient(90deg, var(--acc), rgba(var(--accg), .1));
  transform-origin: 0 50%; transform: scaleX(var(--film, 0)); pointer-events: none;
}

/* ── the hero: the product's own moment, before the film starts ───────────
   The Live Activity floats over the same walking floor Act II uses, and its
   answer changes shop by shop as the ground slides under it. So the page opens
   on exactly what it is about, and Act II is the same thing told at length.
   Everything is CSS; hero.js only swaps the words (and never runs when motion
   is reduced). Scrolling out is --hp: the floor tips, the slab lifts away. */
@property --e { syntax: '<number>'; inherits: true; initial-value: 1; }
.hero .hstage {
  --u: min(1.2vw, 1.5svh); font-size: var(--u);
  width: 100vw; margin: 8px 0 0 calc(50% - 50vw); flex: 1 1 auto; height: auto; min-height: min(46svh, 420px);
  perspective: 900px; perspective-origin: 50% 20%; overflow: hidden;
}
.hero .hstage::after { display: none; }
.hfloor {
  position: absolute; left: 50%; bottom: -8em; width: 260em; height: 110em; margin-left: -130em;
  transform-origin: 50% 100%; transform: rotateX(calc(66deg + var(--hp, 0) * 12deg));
  background:
    linear-gradient(90deg, rgba(var(--accg), .24) 1px, transparent 1px) 50% 0 / 6em 100%,
    linear-gradient(0deg, rgba(var(--accg), .24) 1px, transparent 1px) 0 0 / 100% 6em;
  -webkit-mask-image: linear-gradient(to top, #000 6%, rgba(0,0,0,.55) 40%, transparent 88%);
          mask-image: linear-gradient(to top, #000 6%, rgba(0,0,0,.55) 40%, transparent 88%);
  animation: hwalk 3.6s linear infinite;
}
@keyframes hwalk { to { background-position: 50% 0, 0 6em; } }
.hring, .hdot { position: absolute; left: 50%; top: 33em; }
.hring { width: 12em; height: 12em; margin: -6em 0 0 -6em; border-radius: 50%; border: 1px solid rgba(var(--accg), .8); transform: rotateX(66deg); animation: hping 2.8s var(--ease) infinite; }
.hring.r2 { animation-delay: 1.4s; }
@keyframes hping { 0% { transform: rotateX(66deg) scale(.3); opacity: 1 } 100% { transform: rotateX(66deg) scale(3.6); opacity: 0 } }
.hdot { width: 1.3em; height: 1.3em; margin: -.65em 0 0 -.65em; border-radius: 50%; background: var(--acc); box-shadow: 0 0 2.4em var(--acc); transform: rotateX(66deg); }
.hla {
  --e: 1; position: absolute; left: 50%; top: 1.5em; width: min(36em, 90vw); margin-left: max(-18em, -45vw); padding: 1.3em; border-radius: 2.4em; color: var(--tx);
  background: linear-gradient(160deg, #2E1C48, #1D1030);
  box-shadow: 0 3em 7em -1em rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.08), inset 0 1px 0 rgba(255,255,255,.14), 0 0 8em rgba(var(--accg), .18);
  transform: translate3d(0, calc((1 - var(--e)) * 14em - var(--hp, 0) * 7em), calc((6 + var(--hp, 0) * 14) * 1em)) rotateX(calc((1 - var(--e)) * 50deg));
  opacity: calc(min(1, var(--e) * 1.6) * (1 - var(--hp, 0) * 1.05));
}
.js .hero .hstage:not(.shown) .hla { --e: 0; }
.js .hero .hstage.shown .hla { animation: ent 1s var(--ease) both, hbob 5.5s ease-in-out 1s infinite; }
@keyframes ent { from { --e: 0 } to { --e: 1 } }
@keyframes hbob { 0%, 100% { translate: 0 0 } 50% { translate: 0 -.8em } }
.hhead { display: flex; gap: .9em; align-items: stretch; }
.hrail { flex: 1; display: flex; align-items: center; min-height: 3.6em; padding: 0 1.2em; border-radius: 1.1em; min-width: 0;
  background: linear-gradient(90deg, #7d3fc0, #a45ae4); box-shadow: inset 0 .25em .6em rgba(0,0,0,.55), inset 0 -1px 0 rgba(255,255,255,.14), 0 0 2.2em rgba(var(--accg), .4);
  font: 500 clamp(10px, 1.02em, 13px)/1 var(--mono); letter-spacing: .18em; text-transform: uppercase; color: #12061e; white-space: nowrap; overflow: hidden; }
.hkey { flex: none; width: 3.6em; height: 3.6em; border-radius: 1.1em; display: grid; place-items: center;
  background: linear-gradient(160deg, #46305f, #2c1c42); box-shadow: 0 .5em 1.1em -.1em rgba(0,0,0,.65), inset 0 1px 0 rgba(255,255,255,.2), inset 0 -.2em .3em rgba(0,0,0,.35); }
.hkey svg { width: 46%; height: 46%; stroke: var(--acc); fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.hrow { display: flex; align-items: center; justify-content: space-between; margin-top: 1em; gap: 1em; }
.hchipc { font: 500 clamp(12px, 1.7em, 21px)/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: #211200; padding: .62em 1.1em; border-radius: 99px;
  background: linear-gradient(150deg, #a07b1d, #eec54f); box-shadow: 0 .4em .9em -.1em rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.4); white-space: nowrap; }
.hrate { font: 300 clamp(38px, 5.2em, 72px)/1 var(--sans); letter-spacing: -.045em; font-variant-numeric: tabular-nums; }
.hrate i { font-style: normal; color: var(--acc); font-size: .62em; margin-left: .04em; }
.hrow2 { display: grid; grid-template-rows: 1fr; transition: grid-template-rows .5s var(--ease); }
.hrow2 > div { display: flex; align-items: center; gap: 1em; margin-top: 1.05em; overflow: hidden; min-height: 0; transition: margin .5s var(--ease); }
.hpill { font: 500 clamp(12px, 1.5em, 19px)/1 var(--mono); padding: .55em .8em; border-radius: .9em; color: #05261b; background: linear-gradient(150deg, #22886a, #58d8a8); box-shadow: 0 .3em .8em -.1em rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.35); white-space: nowrap; }
.hcn { flex: 1; font: 400 clamp(10px, 1.05em, 13px)/1.3 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--dim); min-width: 0; }
.hdays { font: 500 clamp(9px, .95em, 12px)/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: #eec54f; padding: .6em .9em; border-radius: 99px; background: #100a02; box-shadow: inset 0 .15em .4em rgba(0,0,0,.8); white-space: nowrap; }
.hla[data-noc] .hrow2 { grid-template-rows: 0fr; }
.hla[data-noc] .hrow2 > div { margin-top: 0; }
@media (max-aspect-ratio: 1/1), (max-width: 820px) {
  .hero .hstage { --u: min(2.5vw, 1.05svh); min-height: min(38svh, 340px); }
  .hla { top: 1em; width: 92vw; margin-left: -46vw; }
  .hcn { display: none; }
  .hrow2 > div { justify-content: space-between; }
}
.hero .wrap > .eyebrow, .hero h1, .hero .lede {
  transform: translateY(calc(var(--hp, 0) * -40px));
  opacity: calc(1 - var(--hp, 0) * 1.1);
}
.hero { min-height: calc(100vh - 62px); min-height: calc(100lvh - 62px); display: flex; flex-direction: column; }   /* the first screen is all hero: the stage stretches to the bottom edge, so no empty band and nothing of Act I peeks in */
.hero > .wrap { flex: 1 1 auto; display: flex; flex-direction: column; }
@media (min-width: 821px) and (min-aspect-ratio: 1/1) { .hero { min-height: calc(100vh - 84px); min-height: calc(100lvh - 84px); } }
.cue {   /* a hairline that drips down, floating at the bottom of the first screen; it goes as soon as you scroll */
  position: fixed; left: 50%; bottom: max(22px, env(safe-area-inset-bottom)); width: 1px; height: 40px; margin: 0;
  transform: translateX(-50%); overflow: hidden; pointer-events: none; z-index: 30;
  opacity: calc(1 - var(--hp, 0) * 5);
}
.cue::before { content: ''; display: block; width: 1px; height: 100%; background: linear-gradient(var(--acc), transparent); animation: cue 2.2s var(--ease) infinite; transform-origin: top; }
@keyframes cue { 0% { transform: scaleY(0) } 60% { transform: scaleY(1) } 100% { transform: scaleY(1); opacity: 0 } }

/* ── scene chassis ─────────────────────────────────────────────────────── */
.scene { position: relative; }
.js .scene { height: var(--len, 400vh); }
.pin {
  position: relative; width: 100%; overflow: hidden;
  font-size: min(1vw, 1.6svh);
}
.js .pin { position: sticky; top: 0; height: 100vh; height: 100svh; height: 100dvh; }
.pin::before {                      /* each scene's own light, breathing with progress */
  content: ''; position: absolute; inset: -10%; pointer-events: none;
  background:
    radial-gradient(60em 40em at var(--lx, 20%) var(--ly, 10%), rgba(var(--accg), calc(.10 + var(--glow-k, .5) * .12)), transparent 70%);
}
.slate {
  position: absolute; left: 4em; top: 6.5em; z-index: 5;
  font: 500 10px/1 var(--mono); letter-spacing: .3em; text-transform: uppercase; color: var(--dim);
  display: flex; gap: 14px; align-items: center;
}
.slate b { color: var(--acc); font-weight: 500; }
.slate::after { content: ''; width: 46px; height: 1px; background: var(--hair); }

.big {
  font-weight: 300; letter-spacing: -.04em; line-height: 1.02; color: var(--tx);
  font-size: clamp(34px, 5.6em, 92px); margin: 0;
}
.big em { font-style: normal; color: var(--acc); }
.cap { position: absolute; z-index: 6; }
.cap h2 { margin: 0 0 14px; font-size: clamp(26px, 3.2em, 46px); font-weight: 300; letter-spacing: -.035em; line-height: 1.08; color: var(--tx); }
.cap p { font-size: clamp(14px, 1.25em, 17px); line-height: 1.6; max-width: 34ch; color: var(--dim); margin: 0; }
.cap .k { font: 500 9.5px/1 var(--mono); letter-spacing: .28em; text-transform: uppercase; color: var(--acc); margin-bottom: 16px; display: block; }

/* laminate card face — the app's own */
.lam {
  position: relative; width: var(--cw, 22em); aspect-ratio: 1.586; border-radius: 1.4em;
  background: var(--g, linear-gradient(150deg, var(--gold-a), var(--gold-b)));
  box-shadow: var(--lam), inset 0 1px 0 rgba(255,255,255,.28);
  overflow: hidden; flex: none;
}
.lam::after { content: ''; position: absolute; inset: 0; background: linear-gradient(142deg, rgba(255,255,255,.3), transparent 52%); pointer-events: none; }
.lam .n { position: absolute; left: 1.4em; top: 1.2em; font: 500 max(8px, .78em)/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: rgba(12,6,0,.62); }
.lam .r { position: absolute; right: 1.3em; bottom: .8em; font: 300 clamp(20px, 3.4em, 46px)/1 var(--sans); letter-spacing: -.04em; color: rgba(16,8,0,.78); }
.lam .r small { font-size: .5em; opacity: .6; }
.g-gold { --g: linear-gradient(150deg, #6d4f0d, #edc24d); }
.g-blue { --g: linear-gradient(150deg, #23366e, #8f6ae0); }
.g-orange { --g: linear-gradient(150deg, #8a2f0a, #f08a3a); }
.g-jade { --g: linear-gradient(150deg, #0b4a38, #55d6a4); }
.g-violet { --g: linear-gradient(150deg, #3d1466, #c07af0); }
.g-rose { --g: linear-gradient(150deg, #5c1233, #f27fa8); }
.g-sky { --g: linear-gradient(150deg, #0e2c52, #62a6ee); }

/* ══ ACT I — the choice ═══════════════════════════════════════════════════ */
.s-choice { --len: 430vh; }
.s-choice .pin { perspective: 1000px; perspective-origin: 50% 46%; }
.deck { position: absolute; inset: 0; transform-style: preserve-3d; }
.deck .lam {
  --l: clamp(0, calc((var(--fly, 1) - var(--d)) / (1 - var(--d))), 1);
  --cw: 19em;
  position: absolute; left: 50%; top: 50%; margin: -6em 0 0 -9.5em;
  transform:
    translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc((var(--z0) + (var(--z1) - var(--z0)) * var(--l)) * 1em))
    rotateY(calc(var(--ry) * 1deg * (1 - var(--l) * .6))) rotateZ(calc(var(--rz) * 1deg + var(--l) * var(--spin) * 1deg));
  opacity: calc(min(1, var(--l) * 5) * (1 - var(--out, 0)) * (1 - max(0, var(--l) - .86) * 7));
  will-change: transform, opacity;
}
.answer {
  position: absolute; left: 50%; top: 50%; z-index: 4; margin: -8em 0 0 -14em;
  --cw: 28em;
  transform: translateZ(0) scale(calc(.72 + var(--ans, 1) * .28)) rotateX(calc((1 - var(--ans, 1)) * 24deg)) rotateY(calc((1 - var(--ans, 1)) * -18deg));
  opacity: var(--ans, 1);
}
.answer .lam { --cw: 28em; box-shadow: 0 3em 6em -1em rgba(0,0,0,.6), 0 0 6em rgba(237,194,77,.22), inset 0 1px 0 rgba(255,255,255,.3); }
.line {
  position: absolute; left: 0; right: 0; top: 50%; z-index: 5; text-align: center;
  --shade: radial-gradient(closest-side, rgba(11,7,18,.72), transparent);
  padding: 0 6vw; transform: translateY(-50%);
  opacity: var(--t, 1);
  transform: translateY(calc(-50% + (1 - var(--t, 1)) * 28px)) translateZ(0) scale(calc(.94 + var(--t, 1) * .06));
}
.line .big { max-width: 16ch; margin: 0 auto; }
.line.l4 { top: auto; bottom: 9%; transform: translateY(calc((1 - var(--t, 1)) * 24px)); }
.line.l4 .big { font-size: clamp(28px, 4.2em, 64px); max-width: 34ch; text-wrap: balance; }
.js .line { --t: 0; }
.js .line.l4 { --t: 0; }

/* ══ ACT II — the walk-in ═════════════════════════════════════════════════ */
.s-walk { --len: 820vh; }
.s-walk .pin { perspective: 1500px; perspective-origin: 50% 34%; }
.world { position: absolute; inset: 0; transform-style: preserve-3d; }
.street {
  position: absolute; left: 50%; bottom: 7em; width: 240em; height: 120em; margin-left: -120em;
  transform-origin: 50% 100%; transform: rotateX(68deg) translateZ(0);
  transform-style: preserve-3d; opacity: calc(.15 + var(--rise, 1) * .85);
}
.floor {
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(var(--accg), .20) 1px, transparent 1px) calc(50% + 0em) 0 / 6em 100%,
    linear-gradient(0deg, rgba(var(--accg), .20) 1px, transparent 1px) 0 calc(var(--walk, 0) * 1em) / 100% 6em;
  -webkit-mask-image: linear-gradient(to top, #000 8%, rgba(0,0,0,.6) 45%, transparent 92%);
          mask-image: linear-gradient(to top, #000 8%, rgba(0,0,0,.6) 45%, transparent 92%);
}
.road {
  position: absolute; left: 50%; top: 0; bottom: 0; width: 30em; margin-left: -15em;
  background: linear-gradient(90deg, transparent, rgba(var(--accg), .07) 20%, rgba(var(--accg), .07) 80%, transparent);
  -webkit-mask-image: linear-gradient(to top, #000 10%, transparent 90%);
          mask-image: linear-gradient(to top, #000 10%, transparent 90%);
}
.shop {
  position: absolute; left: 50%; width: 34em; height: 19em; margin-left: calc(var(--sx, 0) * 1em - 17em);
  top: calc((var(--sy) + var(--walk, 0)) * 1em); transform-style: preserve-3d;
}
.shop .slab {
  position: absolute; inset: 0; border-radius: 1.6em;
  background: linear-gradient(160deg, #33224a, #21133a);
  box-shadow: var(--lam), inset 0 1px 0 rgba(255,255,255,.1);
  border: 1px solid var(--hair);
  transition: box-shadow .6s var(--ease), border-color .6s, background .6s;
}
.shop .plaque {
  position: absolute; left: 0; right: 0; bottom: 4em; transform-origin: 50% 100%; opacity: var(--near, 1);
  transform: rotateX(-68deg) translateZ(0); text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.shop .plaque svg { width: 58px; height: 58px; stroke: var(--dim); fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: stroke .5s; }
.shop .plaque span { font: 500 13px/1 var(--mono); letter-spacing: .22em; text-transform: uppercase; color: var(--dim); white-space: nowrap; transition: color .5s; }
.shop .plaque em { font: 300 46px/1 var(--sans); font-style: normal; letter-spacing: -.04em; color: var(--faint); transition: color .5s, opacity .5s; opacity: .0; }
.shop[data-on] .slab { border-color: rgba(var(--accg), .7); background: linear-gradient(160deg, #4b2f72, #2b1a4b); box-shadow: var(--lam), 0 0 5em rgba(var(--accg), .45), inset 0 1px 0 rgba(255,255,255,.18); }
.shop[data-on] .plaque svg { stroke: var(--acc); }
.shop[data-on] .plaque span { color: var(--tx); }
.shop[data-on] .plaque em { color: var(--acc); opacity: 1; }
.you {
  position: absolute; left: 50%; bottom: 13em; width: 0; height: 0; z-index: 3;
}
.you::before, .you::after {
  content: ''; position: absolute; left: -2.6em; top: -2.6em; width: 5.2em; height: 5.2em; border-radius: 50%;
  border: 1px solid rgba(var(--accg), .8); transform: rotateX(68deg); animation: ping 2.6s var(--ease) infinite;
}
.you::after { animation-delay: 1.3s; }
.you i { position: absolute; left: -.55em; top: -.55em; width: 1.1em; height: 1.1em; border-radius: 50%; background: var(--acc); box-shadow: 0 0 2em var(--acc); transform: rotateX(68deg); }
@keyframes ping { 0% { transform: rotateX(68deg) scale(.3); opacity: 1 } 100% { transform: rotateX(68deg) scale(3.4); opacity: 0 } }

.phone {
  position: absolute; left: 66em; top: 48%; width: 20em; aspect-ratio: 393/852; z-index: 4;
  margin: -21.6em 0 0 -10em; transform-style: preserve-3d;
  transform: translateY(calc((1 - var(--rise, 1)) * 60em)) rotateX(calc((1 - var(--rise, 1)) * 72deg)) rotateY(calc(var(--yaw, 0) * 1deg));
  opacity: calc(.2 + var(--rise, 1) * .8);
}
.dev {
  position: relative; width: 100%; aspect-ratio: 393/852; border-radius: 12%/5.6%;
  background: #05030a; padding: 2.2%; box-shadow: 0 5em 9em -2em rgba(0,0,0,.75), 0 0 0 1px rgba(255,255,255,.12), inset 0 0 0 2px rgba(255,255,255,.05);
}
.dev .scr { position: relative; width: 100%; height: 100%; border-radius: 10.4%/4.8%; overflow: hidden; background: linear-gradient(180deg, #1A0C2A, #0B0712); }
.dev img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: cover; opacity: 0; transition: opacity .7s var(--ease); }
.dev img.on { opacity: 1; }
.dev .isle { position: absolute; left: 50%; top: 2.4%; width: 27%; height: 3.4%; margin-left: -13.5%; border-radius: 99px; background: #000; z-index: 3; }
.dev::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: linear-gradient(120deg, rgba(255,255,255,.10), transparent 30%); }

/* the Live Activity, as the app's extension draws it */
.la {
  position: absolute; left: 46em; top: 55%; width: 31em; z-index: 7; margin-top: -3em;
  padding: 1.3em; border-radius: 2.4em; color: var(--tx);
  background: linear-gradient(160deg, #2E1C48, #1D1030);
  box-shadow: 0 3em 7em -1em rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.08), inset 0 1px 0 rgba(255,255,255,.14);
  transform: translateZ(calc(var(--lift, 1) * 9em)) rotateY(calc(var(--yaw, 0) * -1.2deg)) rotateX(calc(var(--flip, 0) * 1deg));
  opacity: var(--laO, 1);
  transition: none;
}
.la .head { display: flex; gap: .9em; align-items: stretch; }
.la .rail {
  flex: 1; display: flex; align-items: center; min-height: 3.6em; padding: 0 1.2em; border-radius: 1.1em;
  background: linear-gradient(90deg, #7d3fc0, #a45ae4); box-shadow: inset 0 .25em .6em rgba(0,0,0,.55), inset 0 -1px 0 rgba(255,255,255,.14), 0 0 2.2em rgba(var(--accg), .4);
  font: 500 clamp(10px, 1.02em, 13px)/1 var(--mono); letter-spacing: .18em; text-transform: uppercase; color: #12061e; white-space: nowrap; overflow: hidden;
}
.la .key {
  flex: none; width: 3.6em; height: 3.6em; border-radius: 1.1em; display: grid; place-items: center;
  background: linear-gradient(160deg, #46305f, #2c1c42);
  box-shadow: 0 .5em 1.1em -.1em rgba(0,0,0,.65), inset 0 1px 0 rgba(255,255,255,.2), inset 0 -.2em .3em rgba(0,0,0,.35);
  transform: translateY(calc(var(--press, 0) * .28em)) scale(calc(1 - var(--press, 0) * .05));
}
.la .key svg { width: 46%; height: 46%; stroke: var(--acc); fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transform: rotate(calc(var(--spinr, 0) * 1deg)); filter: drop-shadow(0 0 6px rgba(var(--accg), .7)); }
.la .row { display: flex; align-items: center; justify-content: space-between; margin-top: 1em; gap: 1em; }
.la .lchip {
  font: 500 clamp(12px, 1.7em, 21px)/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: #211200; padding: .62em 1.1em; border-radius: 99px;
  background: linear-gradient(150deg, #a07b1d, #eec54f); box-shadow: 0 .4em .9em -.1em rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.4); white-space: nowrap;
}
.la .rate { font: 300 clamp(38px, 5.2em, 72px)/1 var(--sans); letter-spacing: -.045em; font-variant-numeric: tabular-nums; }
.la .rate i { font-style: normal; color: var(--acc); font-size: .62em; margin-left: .04em; }
.la .row2 { display: grid; grid-template-rows: 1fr; transition: none; }
.la .row2 > div { display: flex; align-items: center; gap: 1em; margin-top: 1.05em; overflow: hidden; min-height: 0; }
.la .lpill { font: 500 clamp(12px, 1.5em, 19px)/1 var(--mono); padding: .55em .8em; border-radius: .9em; color: #05261b; background: linear-gradient(150deg, #22886a, #58d8a8); box-shadow: 0 .3em .8em -.1em rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.35); white-space: nowrap; }
.la .cn { flex: 1; font: 400 clamp(10px, 1.05em, 13px)/1.3 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--dim); }
.la .days { font: 500 clamp(9px, .95em, 12px)/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: #eec54f; padding: .6em .9em; border-radius: 99px; background: #100a02; box-shadow: inset 0 .15em .4em rgba(0,0,0,.8); white-space: nowrap; }
.la[data-noc] .row2 { grid-template-rows: 0fr; }
.la[data-noc] .row2 > div { margin-top: 0; }

.beat { position: absolute; left: 4em; top: 40%; width: clamp(240px, 30em, 460px); z-index: 6; transform: translateY(-50%); opacity: 0; pointer-events: none; }
.beat .k, .beat h2, .beat p { display: block; }
.beat > * { transform: translateY(1.6em); opacity: 0; filter: blur(8px); transition: transform .9s var(--ease), opacity .7s, filter .7s; }
.beat[data-on] { pointer-events: auto; opacity: 1; }
.beat[data-on] > * { transform: none; opacity: 1; filter: none; }
.beat[data-on] > :nth-child(2) { transition-delay: .06s }
.beat[data-on] > :nth-child(3) { transition-delay: .14s }
.beat h2 { font-size: clamp(28px, 3.5em, 52px); font-weight: 300; letter-spacing: -.04em; line-height: 1.05; margin: 0 0 16px; }
.beat p { font-size: clamp(14px, 1.3em, 18px); line-height: 1.6; max-width: 32ch; color: var(--dim); margin: 0; }
.beat .k { font: 500 9.5px/1 var(--mono); letter-spacing: .28em; text-transform: uppercase; color: var(--acc); margin-bottom: 16px; }

/* the walk's captions sit high: shops come down both sides of the road and pass under them */
.s-walk .beat { top: max(15%, 84px); transform: none; }

/* ══ ACT III — the room ═══════════════════════════════════════════════════ */
.s-room { --len: 560vh; }
.s-room .pin { perspective: 2000px; perspective-origin: 50% 46%; }
.orbit { position: absolute; left: 50%; top: 41%; width: 0; height: 0; transform-style: preserve-3d; transform: translateZ(-48em) rotateY(calc(var(--rot, 0) * -1deg)); }
.s-room .pin { --fw: min(19.5em, calc((100svh - 64px - var(--caph, 130px) - 28px) / 2.2)); }
.orbit .face {
  position: absolute; left: 0; top: 0; width: var(--fw, 19.5em);
  transform: translate(-50%, -50%) rotateY(calc(var(--i) * 60deg)) translateZ(48em);
  opacity: calc(.10 + var(--f, 1) * .9); 
  will-change: transform, opacity;
}
.orbit .face .dev { box-shadow: 0 4em 8em -2em rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.12); }
.orbit .face .dev img { opacity: 1; transition: none; }
.orbit .floor2 {
  position: absolute; left: -46em; top: 22em; width: 92em; height: 92em; margin: 0; border-radius: 50%;
  transform: rotateX(90deg) translateZ(0) rotateZ(0deg);
  background: radial-gradient(closest-side, rgba(var(--accg), .32), rgba(var(--accg), .07) 60%, transparent);
}
.s-room .beat { left: 0; right: 0; width: auto; top: auto; bottom: 5em; transform: none; text-align: center; padding: 0 6vw; }
.s-room .beat p { margin: 0 auto; max-width: 52ch; }
.s-room .beat h2 { font-size: clamp(26px, 3.2em, 46px); margin-bottom: 10px; }

/* ══ ACT IV — two cards, one purchase ═════════════════════════════════════ */
.s-split { --len: 520vh; }
.s-split .pin { perspective: 1500px; perspective-origin: 50% 40%; }
.duo { position: absolute; left: 68%; top: 55%; width: 0; height: 0; transform-style: preserve-3d; }
.duo .lam { --cw: 22em; position: absolute; margin: -7em 0 0 -11em; }
.duo .a {
  transform: translate3d(calc((1 - var(--join, 1)) * -22em - 6em * var(--join, 1)), calc(var(--join, 1) * -3.4em), calc(var(--join, 1) * 5em)) rotateY(calc((1 - var(--join, 1)) * 30deg - 4deg)) rotateZ(calc(var(--join, 1) * -3deg));
}
.duo .b {
  transform: translate3d(calc((1 - var(--join, 1)) * 22em + 6em * var(--join, 1)), calc(var(--join, 1) * 3.4em), calc(var(--join, 1) * -2em)) rotateY(calc((1 - var(--join, 1)) * -30deg + 4deg)) rotateZ(calc(var(--join, 1) * 3deg));
}
.duo .lam .r { font-size: clamp(22px, 3.8em, 52px); }
.buy {
  position: absolute; left: 68%; top: 12em; width: 46em; margin-left: -23em; z-index: 5;
  opacity: var(--buyO, 1); transform: translateY(calc((1 - var(--buyO, 1)) * -2em));
}
.buy .lab { display: flex; justify-content: space-between; font: 500 9.5px/1 var(--mono); letter-spacing: .24em; text-transform: uppercase; color: var(--dim); margin-bottom: 12px; }
.buy .lab b { color: var(--tx); font-weight: 500; }
.bar { height: 1.5em; border-radius: 99px; display: flex; overflow: hidden; background: #0d0716; box-shadow: inset 0 .2em .5em rgba(0,0,0,.8), 0 1px 0 rgba(255,255,255,.08); padding: .22em; gap: .22em; }
.bar i { display: block; height: 100%; border-radius: 99px; min-width: 0; }
.bar i:nth-child(1) { width: calc(100% - var(--split, 62) * 1%); background: linear-gradient(150deg, #23366e, #8f6ae0); }
.bar i:nth-child(2) { width: calc(var(--split, 62) * 1%); background: linear-gradient(150deg, #6d4f0d, #edc24d); }
.amounts { display: flex; justify-content: space-between; margin-top: 12px; font: 300 clamp(26px, 3.4em, 46px)/1 var(--sans); letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.amounts small { display: block; font: 500 9px/1 var(--mono); letter-spacing: .2em; text-transform: uppercase; color: var(--faint); margin-top: 8px; }
.votes { position: absolute; left: 68%; bottom: 5em; width: 54em; margin-left: -27em; z-index: 5; display: grid; gap: 1em; grid-template-columns: repeat(3, 1fr); }
.vote {
  padding: 1.2em 1.3em; border-radius: 1.6em; background: var(--surf); border: 1px solid var(--hair); box-shadow: var(--lam); position: relative; overflow: hidden;
  opacity: var(--vo, 1); transform: translateY(calc((1 - var(--vo, 1)) * 3em)) rotateX(calc((1 - var(--vo, 1)) * 40deg));
  transition: filter .8s var(--ease), border-color .8s, box-shadow .8s, background .8s;
}
.vote::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 50%; background: linear-gradient(180deg, var(--hi), transparent); pointer-events: none; }
.vote .k { font: 500 9px/1 var(--mono); letter-spacing: .22em; text-transform: uppercase; color: var(--dim); }
.vote .st { font: 300 clamp(28px, 3.6em, 50px)/1 var(--sans); letter-spacing: -.04em; margin: .35em 0 .2em; font-variant-numeric: tabular-nums; }
.vote .st small { font-size: .42em; opacity: .5; }
.vote p { font-size: 12.5px; line-height: 1.4; margin: 0; color: var(--dim); }
.vote[data-yes] { border-color: rgba(47,163,123,.65); box-shadow: var(--lam), 0 0 4em rgba(47,163,123,.25); }
.vote[data-yes] .k { color: var(--jade); }
.vote[data-out] { filter: grayscale(1) brightness(.6); }
.vote[data-out] .st { text-decoration: line-through; text-decoration-thickness: 1px; opacity: .6; }

/* ══ ACT V — nothing leaves ═══════════════════════════════════════════════ */
.s-vault { --len: 720vh; }
.s-vault .pin { perspective: 900px; perspective-origin: 50% 50%; background: radial-gradient(70em 50em at 50% 50%, rgba(var(--accg), .08), transparent 70%); }
.tunnel { position: absolute; inset: 0; transform-style: preserve-3d; transform: translateZ(calc(var(--cam, 0) * 1em)); }
.streaks { position: absolute; inset: -20%; pointer-events: none; opacity: calc(.15 + var(--speed, 0) * .6); background: repeating-conic-gradient(from 0deg at 50% 50%, rgba(var(--accg), .26) 0 .12deg, transparent .12deg 4.5deg); -webkit-mask-image: radial-gradient(circle at 50% 50%, transparent 12%, #000 70%); mask-image: radial-gradient(circle at 50% 50%, transparent 12%, #000 70%); transform: scale(calc(1 + var(--cam, 0) * .0009)); }
.gate {
  position: absolute; left: 50%; top: 50%; width: max(62em, min(94vw, 560px)); height: max(36em, min(84svh, 340px)); translate: -50% -50%;
  transform: translateZ(calc(var(--z) * -1em)); display: grid; place-items: center; text-align: center;
  opacity: var(--vis, 1);
}
.gate .frame {
  position: absolute; inset: 0; border-radius: 4em; border: 1px solid rgba(var(--accg), .55);
  background: linear-gradient(160deg, rgba(56,36,86,.42), rgba(20,10,34,.72));
  box-shadow: 0 0 6em rgba(var(--accg), .22), inset 0 1px 0 rgba(255,255,255,.14), inset 0 0 6em rgba(var(--accg), .12);
}
.gate .frame::after { content: ''; position: absolute; inset: 1.4em; border-radius: 3em; border: 1px solid var(--hair); }
.gate .in { position: relative; padding: 0 5em; max-width: clamp(300px, 52em, 760px); }
.gate .num { font: 500 10px/1 var(--mono); letter-spacing: .3em; text-transform: uppercase; color: var(--acc); margin-bottom: 18px; display: block; }
.gate h2 { font-size: clamp(26px, 4em, 62px); font-weight: 300; letter-spacing: -.04em; line-height: 1.05; margin: 0 0 16px; }
.gate p { font-size: clamp(14px, 1.35em, 18px); line-height: 1.6; color: var(--dim); margin: 0 auto; max-width: 42ch; }
.tail { position: absolute; left: 0; right: 0; bottom: 8%; z-index: 6; text-align: center; opacity: var(--tailO, 1); transform: translateY(calc((1 - var(--tailO, 1)) * 2em)); padding: 0 6vw; }
.tail p { margin: 0 auto; font: 400 10px/1.9 var(--mono); letter-spacing: .2em; text-transform: uppercase; color: var(--dim); max-width: none; }
.tail a { color: var(--acc); }

/* ══ finale ═══════════════════════════════════════════════════════════════ */
.s-end { --len: 300vh; }
.s-end .pin { perspective: 5000px; perspective-origin: 50% 75%; display: flex; flex-direction: column; }
/* the ring sits on the footer; the copy takes the room between the nav and the ring */
.halo3d { position: absolute; left: 50%; top: auto; bottom: calc(var(--fh, 90px) + 9em); width: 0; height: 0; transform-style: preserve-3d; transform: translateY(calc((1 - var(--up, 1)) * 26em)) rotateX(-14deg) rotateY(calc(var(--spin, 0) * 1deg)); }
.halo3d .lam { --cw: 8em; position: absolute; margin: -2.5em 0 0 -4em; transform: rotateY(calc(var(--i) * 30deg)) translateZ(24em); backface-visibility: visible; opacity: .92; }
.endcopy { position: relative; flex: 1 1 auto; min-height: 0; z-index: 6; text-align: center; padding: 100px 6vw min(20em, 26svh); display: flex; flex-direction: column; justify-content: center; align-items: center; transform: translateY(calc((1 - var(--tx2, 1)) * 3em)); opacity: var(--tx2, 1); }
.endcopy .big { font-size: clamp(34px, min(7em, 10svh), 108px); max-width: 12ch; margin: 0 auto 22px; text-shadow: 0 0 60px rgba(var(--ink), .7); }
.endcopy p { margin: 0 auto 10px; max-width: 44ch; }
.endcopy .pill { margin: 14px 0 6px; }
/* The footer belongs to the last frame and stays glued to the bottom of the
   screen (fixed, so no browser's toolbar arithmetic can leave a gap under it).
   Without the film (no script, reduced motion) it is an ordinary footer. */
.film-on footer { position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; margin: 0; padding: 16px 0 max(16px, env(safe-area-inset-bottom)); border-top: 1px solid var(--hair); background: rgba(11,7,18,.86); opacity: var(--fo, 0); pointer-events: none; }
.film-on footer .wrap { max-width: 960px; gap: 10px 22px; justify-content: center; }
.film-on footer .sp { display: none; }
.film-on footer .navlink, .film-on footer .micro { font-size: 10px; }

/* ── mobile: the same films, recomposed. Portrait gets the stage above the
      caption, a smaller unit, and only the parts that carry the story. ────── */
@media (max-aspect-ratio: 1/1), (max-width: 820px) {
  .pin { font-size: min(1.9vw, 1.1svh, 1.05em); font-size: min(1.9vw, 1.1svh); }
  .slate { left: 20px; right: 20px; top: 76px; white-space: nowrap; font-size: 9px; letter-spacing: .2em; gap: 10px; }
  .slate::after { flex: 1; width: auto; min-width: 12px; }
  .cap, .beat { left: 20px; right: 20px; width: auto; top: 100px; bottom: auto; transform: none; }
  .beat h2 { font-size: clamp(22px, 6.4vw, 32px); margin-bottom: 10px; }
  .beat p { font-size: clamp(12.5px, 3.5vw, 14px); line-height: 1.48; max-width: 40ch; }
  .beat .k { margin-bottom: 10px; }
  .street { width: 300em; margin-left: -150em; bottom: 12em; }
  /* stage below the caption: --cap is the measured bottom of the tallest caption (film.js) */
  .s-walk .pin { --pw: min(25em, calc((100svh - var(--cap, 250px) - 150px) / 2.2)); }
  .shop { width: 21em; height: 13em; margin-left: calc(var(--sx, 0) * .44em - 10.5em); }
  .shop .plaque { bottom: 3em; gap: 6px; }
  .shop .plaque svg { width: 34px; height: 34px; }
  .shop .plaque span { font-size: 10px; letter-spacing: .14em; }
  .shop .plaque em { display: none; }
  .phone { left: 50%; top: calc(var(--cap, 250px) + 1.5em); width: var(--pw); margin: 0 0 0 calc(var(--pw) / -2); }
  .la { left: 50%; width: min(44em, 92vw); margin: 0; transform-origin: 50% 50%; top: calc(var(--cap, 250px) + 1.5em + var(--pw) * .9); translate: -50% 0; }
  .s-room .pin { --fw: min(28em, calc((100svh - var(--caph, 170px) - 4svh - 120px) / 2.2)); }
  .orbit { left: 50%; top: calc((100svh - var(--caph, 170px) + 70px) / 2); transform: translateZ(-40em) rotateY(calc(var(--rot, 0) * -1deg)); }
  .orbit .face { transform: translate(-50%, -50%) rotateY(calc(var(--i) * 60deg)) translateZ(40em); }
  .s-room .beat { top: auto; bottom: 4svh; }
  .amounts { font-size: clamp(22px, 6.4vw, 28px); }
  /* Act IV is a column, not a set of pinned coordinates: caption, the purchase
     bar, the cards in whatever height is left, the votes. Nothing here can sit
     behind anything else, because nothing is positioned. */
  .s-split .pin { display: flex; flex-direction: column; gap: 14px; padding: 108px 20px max(14px, 2.4svh); }
  .s-split .beat, .s-split .buy, .s-split .votes { position: relative; left: auto; right: auto; top: auto; bottom: auto; width: auto; margin: 0; flex: none; }
  .s-split .duo { position: relative; left: auto; top: auto; width: auto; height: auto; margin: 0; flex: 1 1 0; min-height: 0; container-type: size; perspective: 900px; transform-style: flat; }
  .amounts { font-size: clamp(22px, 6.4vw, 28px); }
  .duo .lam { --cw: min(56cqw, 78cqh); left: 50%; top: 50%; margin: calc(var(--cw) / -3.172) 0 0 calc(var(--cw) / -2); }
  .duo .a { transform: translate3d(calc((1 - var(--join, 1)) * var(--cw) * -.34 + var(--join, 1) * var(--cw) * -.16), calc((1 - var(--join, 1)) * var(--cw) * -.3 + var(--join, 1) * var(--cw) * -.13), calc(var(--join, 1) * 5em)) rotateY(calc((1 - var(--join, 1)) * 30deg - 4deg)) rotateZ(calc(var(--join, 1) * -3deg)); }
  .duo .b { transform: translate3d(calc((1 - var(--join, 1)) * var(--cw) * .34 + var(--join, 1) * var(--cw) * .16), calc((1 - var(--join, 1)) * var(--cw) * .3 + var(--join, 1) * var(--cw) * .13), calc(var(--join, 1) * -2em)) rotateY(calc((1 - var(--join, 1)) * -30deg + 4deg)) rotateZ(calc(var(--join, 1) * 3deg)); }
  .votes { gap: 8px; grid-template-columns: repeat(3, 1fr); }
  .vote { padding: 12px 10px; border-radius: 16px; }
  .vote p { display: none; }
  .vote .st { font-size: clamp(22px, 6.6vw, 30px); }
  .s-room .micro { display: none; }
  .gate { width: 92vw; height: min(60svh, 470px); }
  .gate .in { padding: 0 6vw; }
  .gate h2 { font-size: clamp(22px, 7vw, 32px); }
  .gate p { font-size: clamp(12.5px, 3.6vw, 14.5px); line-height: 1.5; }
  .gate .frame::before { font-size: 16em; }
  .halo3d { bottom: calc(var(--fh, 120px) + 14em); }
  .halo3d .lam { transform: rotateY(calc(var(--i) * 30deg)) translateZ(40em); --cw: 12em; margin: -3.8em 0 0 -6em; }
  .endcopy { padding: 80px 6vw 26em; }
  .film-on footer { padding: 9px 0 max(9px, env(safe-area-inset-bottom)); }
  .film-on footer .wrap { flex-wrap: nowrap; gap: 0; justify-content: space-between; padding: 0 16px; }
  .film-on footer .micro { display: none; }
  .film-on footer .navlink, .film-on footer .micro { font-size: 9px; letter-spacing: .14em; }
  .endcopy p { font-size: clamp(12.5px, 3.5vw, 15px); }
  .deck .lam { --cw: 30em; margin: -9.5em 0 0 -15em; }
  .answer, .answer .lam { --cw: 40em; }
  .answer { margin: -12.6em 0 0 -20em; }
  .line .big { font-size: clamp(34px, 11vw, 52px); }
  .line.l4 .big { font-size: clamp(26px, 8vw, 40px); }
}
@media (max-height: 780px) and (min-aspect-ratio: 1/1) and (min-width: 821px) { .duo { top: 51.5%; } .duo .lam { --cw: 19em; margin: -6em 0 0 -9.5em; } }
/* short screens (an SE, a phone on its side): the words shrink before the stage does */
@media (max-height: 700px) {
  .beat h2 { font-size: clamp(20px, 5.6vw, 27px); margin-bottom: 8px; }
  .beat p { font-size: 12.5px; line-height: 1.42; }
  .gate p { font-size: 12.5px; }
  .halo3d { display: none; }
  .endcopy { padding-bottom: 4svh; }
  .gate h2 { font-size: clamp(20px, 6vw, 28px); }
}

/* a phone in Safari with its toolbars up (about 550-620 tall): captions keep the
   headline and lose the paragraph, so the stage still has room */
@media (max-height: 620px) and (max-aspect-ratio: 1/1) {
  .slate { display: none; }
  .beat p { display: none; }
  .beat, .s-walk .beat { top: 76px; }
  .beat h2 { margin-bottom: 0; }
  .beat .k { margin-bottom: 8px; }
  .s-split .pin { padding-top: 84px; gap: 10px; }
  .endcopy p { font-size: 12.5px; }
}

/* a phone on its side: the words are the constraint, so they lose their second line */
@media (max-height: 520px) and (min-aspect-ratio: 1/1) {
  .slate, .s-room .micro { display: none; }
  .reel { display: none !important; }
  .beat p { display: none; }
  .beat h2 { font-size: clamp(20px, 3.4em, 26px); margin-bottom: 0; }
  .beat .k { margin-bottom: 8px; }
  .s-walk .beat, .beat { top: max(17%, 84px); transform: none; }
  .s-room .beat { top: auto; bottom: 14px; }
  .gate .in { padding: 0 4em; }
  .gate .num { margin-bottom: 10px; }
  .gate h2 { font-size: 22px; margin-bottom: 8px; }
  .gate p { font-size: 12px; line-height: 1.45; }
  .halo3d { display: none; }
  .endcopy { padding: 66px 6vw 6px; }
  .endcopy .eyebrow { display: none; }
  .endcopy .big { font-size: 30px; margin-bottom: 10px; }
  .endcopy p { font-size: 12px; margin-bottom: 6px; }
  .line .big { font-size: 34px; }
  .vote p { display: none; }
  .s-split .pin { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto; column-gap: 24px; row-gap: 8px; padding: 72px 24px 12px; }
  .s-split .beat, .s-split .buy, .s-split .votes { position: relative; left: auto; right: auto; top: auto; bottom: auto; width: auto; margin: 0; transform: none; }
  .s-split .duo { position: relative; left: auto; top: auto; width: auto; height: auto; margin: 0; container-type: size; perspective: 900px; transform-style: flat; }
  .s-split .buy { transform: translateY(calc((1 - var(--buyO, 1)) * -2em)); }
  .duo .lam { --cw: min(56cqw, 78cqh); left: 50%; top: 50%; margin: calc(var(--cw) / -3.172) 0 0 calc(var(--cw) / -2); }
  .duo .a { transform: translate3d(calc((1 - var(--join, 1)) * var(--cw) * -.34 + var(--join, 1) * var(--cw) * -.16), calc((1 - var(--join, 1)) * var(--cw) * -.3 + var(--join, 1) * var(--cw) * -.13), calc(var(--join, 1) * 5em)) rotateY(calc((1 - var(--join, 1)) * 30deg - 4deg)) rotateZ(calc(var(--join, 1) * -3deg)); }
  .duo .b { transform: translate3d(calc((1 - var(--join, 1)) * var(--cw) * .34 + var(--join, 1) * var(--cw) * .16), calc((1 - var(--join, 1)) * var(--cw) * .3 + var(--join, 1) * var(--cw) * .13), calc(var(--join, 1) * -2em)) rotateY(calc((1 - var(--join, 1)) * -30deg + 4deg)) rotateZ(calc(var(--join, 1) * 3deg)); }
  .s-split .beat { grid-column: 1; grid-row: 1 / 3; }
  .s-split .votes { grid-column: 1; grid-row: 3; }
  .s-split .buy { grid-column: 2; grid-row: 1; }
  .s-split .duo { grid-column: 2; grid-row: 2 / 4; }
}

/* ── still: no script, or reduced motion. Every scene at its last frame,
      stacked, nothing pinned. ────────────────────────────────────────────── */
.still .scene, html:not(.js) .scene { height: auto; }
.still .pin, html:not(.js) .pin { position: relative; height: auto; min-height: 0; overflow: visible; padding: 90px 0; }
.still .beat, html:not(.js) .beat { position: relative; left: auto; top: auto; width: auto; transform: none; opacity: 1; margin: 0 auto 40px; padding: 0 24px; max-width: 680px; }
.still .beat > *, html:not(.js) .beat > * { opacity: 1; transform: none; filter: none; }
.still .deck, .still .street, .still .world > .you, html:not(.js) .deck { display: none; }
.still .line { position: relative; transform: none; opacity: 1; filter: none; margin-bottom: 26px; top: auto; bottom: auto; }
.still .answer { position: relative; margin: 30px auto; left: auto; top: auto; }
.still .phone, .still .la, .still .orbit, .still .duo, .still .buy, .still .votes, .still .tunnel, .still .halo3d, .still .endcopy { position: relative; left: auto; top: auto; margin: 24px auto; transform: none; }
.still .orbit .face { position: relative; margin: 16px auto; transform: none; opacity: 1; filter: none; }
.still .orbit { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }
.still .orbit .floor2 { display: none; }
.still .orbit .face { width: 200px; }
.still .gate { position: relative; transform: none; margin: 20px auto; width: min(92vw, 640px); height: auto; padding: 46px 0; }
.still .reel, .still .slate { display: none; }

/* the phone's Lock Screen */
.lock { position: absolute; left: 0; right: 0; top: 13%; text-align: center; color: var(--tx); }
.lock .d { display: block; font: 500 max(7px, 3.1cqw)/1 var(--mono); letter-spacing: .2em; color: var(--dim); }
.lock .t { display: block; font: 300 26cqw/1 var(--sans); letter-spacing: -.05em; margin-top: 4cqw; }
.dev .scr { container-type: inline-size; background: radial-gradient(120% 70% at 20% 0%, #4a2a78 0%, #1A0C2A 45%, #0B0712 100%); }
.ghost { position: absolute; left: 5cqw; right: 5cqw; bottom: 14%; height: 26cqw; border-radius: 6cqw; border: 1px dashed rgba(var(--accg), .28); }
.dev .isle { display: flex; align-items: center; justify-content: space-between; padding: 0 3.2%; transition: width .6s var(--ease), margin .6s var(--ease), height .6s var(--ease); overflow: hidden; }
.dev .isle b, .dev .isle i { font: 500 max(6px, .5em)/1 var(--mono); font-style: normal; letter-spacing: .1em; opacity: 0; transition: opacity .4s .15s; color: #f2c94c; }
.dev .isle[data-on] { width: 52%; margin-left: -26%; }
.dev .isle[data-on] b, .dev .isle[data-on] i { opacity: 1; }

.line .big { position: relative; }
.line .big::before { content: ''; position: absolute; inset: -.6em -1.2em; background: radial-gradient(closest-side, rgba(11,7,18,.62), transparent); z-index: -1; }
.lam::before { content: ''; position: absolute; left: 1.4em; top: 34%; width: 3.4em; height: 2.6em; border-radius: .5em; background: linear-gradient(140deg, rgba(255,255,255,.55), rgba(255,255,255,.14)); box-shadow: inset 0 0 0 1px rgba(0,0,0,.18); opacity: .8; }
.deck .lam::before, .halo3d .lam::before { display: none; }

/* gates: a machined bezel — tick ring, and the act's number set huge behind the words */
.gate .frame::before {
  content: attr(data-n); position: absolute; right: 3em; top: 1.2em; font: 200 22em/1 var(--sans); letter-spacing: -.06em;
  color: transparent; -webkit-text-stroke: 1px rgba(var(--accg), .3); pointer-events: none;
}
.gate .frame { overflow: hidden; }
.gate .frame i { position: absolute; left: 2.4em; right: 2.4em; bottom: 2.2em; height: .6em; background: repeating-linear-gradient(90deg, rgba(var(--accg), .5) 0 1px, transparent 1px 1.2em); opacity: .55; }
.gate .frame b { position: absolute; left: 2.4em; top: 2.2em; width: .8em; height: .8em; border-radius: 50%; background: var(--acc); box-shadow: 0 0 1.6em var(--acc); }
.slate { opacity: var(--slate, 1); }

.still .endcopy, html:not(.js) .endcopy { padding: 24px 6vw; }

.la .lpill:empty, .la .cn:empty, .la .days:empty, .hpill:empty, .hcn:empty, .hdays:empty { display: none; }