/* site/site.css — shell: layers, HUD, gate, modal, chapter copy grammar, fallbacks. Owner: B. Tokens: ../design/tokens.css */
:root {
  --ss: 1;                                            /* SCROLL_SCALE (storyboard): 1 desktop, .8 under 820 px */
  --m: var(--margin);
  --b-rec: clamp(20px, 3vh, 32px);                    /* HUD bottom row */
  --b-chap: calc(var(--b-rec) + 40px);                /* chapter label */
  --b-copy: calc(var(--b-chap) + 44px);               /* bottom-anchored copy blocks sit above the chapter label */
  --hud-top: clamp(16px, 2.4vw, 28px);
  --ease: var(--ease-house);
}
@media (max-width: 819.98px) { :root { --ss: .8; --m: 16px; --b-rec: 18px; --b-chap: 46px; --b-copy: 86px; } }

html, body { margin: 0; background: var(--bf-bg); }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }
* { box-sizing: border-box; }
body { overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--bf-acct); }
::selection { background: var(--bf-acct); color: #fff; }
button { font: inherit; color: inherit; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.red { color: var(--bf-acct); }
@keyframes bfBlink { 0%, 49% { opacity: 1 } 50%, 100% { opacity: .2 } }
@keyframes bfEq { from { transform: scaleY(.25) } to { transform: scaleY(1) } }

/* ───────── layers ───────── */
#film, #engine { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; display: block; }
#film { overflow: hidden; background: var(--bf-bg); }
#engine { opacity: 0; transition: none; }
.fx-dip { position: fixed; inset: 0; z-index: 1; background: var(--bf-black); opacity: 0; pointer-events: none; }
.fx-vignette { position: fixed; inset: 0; z-index: 1; pointer-events: none; background: var(--vignette); }
.fx-grain { position: fixed; inset: -50%; z-index: 1; pointer-events: none; opacity: var(--grain-opacity); mix-blend-mode: var(--grain-blend); background-size: 160px 160px; will-change: transform; }
.copy-layer { position: fixed; inset: 0; z-index: 2; pointer-events: none; color: var(--bf-ink); text-shadow: 0 0 24px var(--bf-halo); will-change: transform; }
#track { position: relative; z-index: 1; pointer-events: none; }
#track section { position: relative; height: calc(var(--vh) * var(--ss) * 1vh); }
#track section.last { height: calc(var(--vh) * var(--ss) * 1vh + 100vh); }
#flow { position: relative; z-index: 3; background: var(--bf-black); min-height: 10vh; }

/* ───────── HUD ───────── */
.hud { position: fixed; top: var(--hud-top); left: var(--m); right: var(--m); z-index: 5; display: flex; justify-content: space-between; align-items: center; height: 40px; pointer-events: none; }
.hud > * { pointer-events: auto; }
.hud-brand { display: flex; align-items: center; gap: 12px; color: var(--bf-ink); }
.hud-brand:hover { color: var(--bf-ink); }
.bfr-sq { width: 40px; height: 40px; flex: none; background: #000; border: 1px solid var(--bf-line); display: inline-flex; align-items: center; justify-content: center; font: 400 19px/1 var(--font-display); color: #fff; position: relative; }
.bfr-sq.lg { width: 44px; height: 44px; font-size: 21px; border-color: #2a2a28; }
.hud-name { font: 400 19px/1 var(--font-display); letter-spacing: .01em; }
.hud-right { display: flex; align-items: center; gap: clamp(12px, 1.8vw, 22px); font: 500 11px/1 var(--font-mono); text-transform: uppercase; letter-spacing: .08em; }
.hud-sound { cursor: pointer; display: flex; align-items: center; gap: 8px; background: none; border: 0; padding: 6px 0; font: inherit; letter-spacing: inherit; text-transform: inherit; }
.eq { display: flex; align-items: flex-end; gap: 2px; height: 14px; }
.eq i { display: block; width: 2px; height: 14px; background: currentColor; transform-origin: bottom; transform: scaleY(.25); }
.sound-on .eq i { animation: bfEq .5s ease-in-out infinite alternate; }
.sound-on .eq i:nth-child(2) { animation-duration: .38s; } .sound-on .eq i:nth-child(3) { animation-duration: .62s; } .sound-on .eq i:nth-child(4) { animation-duration: .44s; }
.pill { display: inline-flex; align-items: center; justify-content: center; padding: 12px 16px; border-radius: 999px; white-space: nowrap; cursor: pointer; font: 500 11px/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; border: 1px solid transparent; transition: background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease); }
.pill.lg { padding: 16px 22px; font-size: 12px; }
.pill-ink { background: var(--bf-ink); color: var(--bf-bg); }
.pill-ink:hover { background: var(--bf-acct); color: #fff; }
.pill-line { background: transparent; color: var(--bf-ink); border-color: rgba(232, 230, 224, .35); }
.pill-line:hover { border-color: var(--bf-ink); color: var(--bf-ink); }
.hud-index { position: fixed; top: 50%; right: var(--m); transform: translateY(-50%); z-index: 5; display: flex; flex-direction: column; align-items: flex-end; gap: 11px; transition: opacity .5s var(--ease); }
.hud-index button { all: unset; cursor: pointer; display: flex; flex-direction: row-reverse; align-items: center; gap: 10px; font: 500 10px/1 var(--font-mono); text-transform: uppercase; letter-spacing: .12em; color: var(--bf-ink); opacity: .4; transition: opacity .4s; text-shadow: 0 0 12px var(--bf-halo); }
.hud-index button:hover, .hud-index button:focus-visible { opacity: .85; }
.hud-index button i { display: block; width: 10px; height: 1px; background: currentColor; transition: width .5s var(--ease); }
.hud-index button.on { opacity: 1; } .hud-index button.on i { width: 28px; }
.hud-rec, .hud-prog { position: fixed; bottom: var(--b-rec); z-index: 5; display: flex; align-items: center; font: 500 10px/1 var(--font-mono); text-transform: uppercase; letter-spacing: .12em; transition: opacity .5s var(--ease); pointer-events: none; text-shadow: 0 0 12px var(--bf-halo); }
.hud-rec { left: var(--m); gap: 8px; }
.rec-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--bf-acct); animation: bfBlink 1s steps(1) infinite; }
.rec-fast .rec-dot { animation-duration: .5s; }
.hud-hint { margin-left: 10px; color: var(--bf-mute); transition: opacity .5s; }
.hud-prog { right: var(--m); gap: 12px; }
.hud-prog .rail { position: relative; display: block; width: clamp(80px, 12vw, 160px); height: 1px; background: var(--bf-line2); }
.hud-prog .rail i { position: absolute; left: 0; top: -1px; height: 3px; width: 100%; background: var(--bf-acct); transform-origin: 0 50%; transform: scaleX(0); }
.hud-off-rec .hud-rec, .hud-off-index .hud-index, .hud-off-prog .hud-prog { opacity: 0 !important; }
.hud-off-index .hud-index { pointer-events: none; }
.chap-label { position: fixed; left: var(--m); bottom: var(--b-chap); z-index: 2; display: flex; align-items: center; gap: 20px; pointer-events: none; text-shadow: 0 0 14px var(--bf-halo); }
.chap-label i { display: block; width: var(--red-tick); height: 2px; background: var(--bf-acct); transform-origin: 0 50%; transform: scaleX(0); transition: transform .6s var(--ease); }
.chap-label span { font: 500 var(--fs-mono)/1 var(--font-mono); letter-spacing: var(--track-mono); text-transform: uppercase; color: var(--bf-mute); opacity: 0; transform: translateY(14px); transition: opacity .35s var(--ease-sine-in-out), transform .4s var(--ease-sine-in-out); }
.chap-label.on i { transform: scaleX(1); }
.chap-label.on span { opacity: 1; transform: none; transition: opacity .6s var(--ease), transform .6s var(--ease); }
@media (max-width: 819.98px) { .hud-index { display: none; } }
@media (max-width: 700px) { .hud-name, .hud-sound-label, .hud-hint { display: none; } .hud-cta { padding: 11px 13px; } }

/* ───────── chapter overlays + copy grammar ───────── */
.sec-ov { position: absolute; inset: 0; visibility: hidden; transition: visibility 0s linear .8s; }
.sec-ov.act { visibility: visible; transition-delay: 0s; }
.grp { position: absolute; display: grid; }
.grp > .ci { grid-area: 1 / 1; }
.grp.bl { left: var(--m); bottom: var(--b-copy); align-items: end; justify-items: start; max-width: min(1180px, 78vw); }
.grp.br { right: calc(var(--m) + 20px); bottom: calc(var(--b-rec) + 40px); align-items: end; justify-items: start; width: min(440px, 34vw); }
.grp.l { left: var(--m); top: 50%; transform: translateY(-50%); align-items: center; justify-items: start; max-width: min(960px, 62vw); }
.grp.c { inset: 0; place-items: center; text-align: center; padding: 0 var(--m); }
.grp.c.c-top { place-items: start center; padding-top: calc(var(--hud-top) + 14vh); }
.grp.tl { left: var(--m); top: calc(var(--hud-top) + 92px); align-items: start; justify-items: start; max-width: 70vw; }
.grp.tr { right: var(--m); top: calc(var(--hud-top) + 72px); justify-items: end; }
.m-only { display: none !important; }

.ci { opacity: 0; transform: translate3d(0, 16px, 0); transition: opacity .38s var(--ease-sine-in-out), transform .5s var(--ease-sine-in-out); }
.ci.on { opacity: 1; transform: none; transition: opacity .9s var(--ease), transform 1.1s var(--ease); }
.ci p, .ci h2, .ci ul, .ci ol { margin: 0; }
/* glyph-revealed items: the glyphs rise, the block itself only fades */
.k-hero, .k-anton, .k-word, .k-pillar, .k-final, .k-rushblk, .k-rush { transform: none !important; }
.k-anton.on, .k-word.on, .k-pillar.on, .k-final.on, .k-hero.on { transition: opacity .2s linear; }
.k-anton, .k-word, .k-pillar, .k-final, .k-hero { transition: opacity .45s var(--ease-sine-in-out) .12s; }
.gline { display: block; filter: drop-shadow(0 0 18px rgba(0, 0, 0, .55)); }
.gline .gm, .gline .gl { text-shadow: none; }
.gw { display: inline-block; white-space: nowrap; }
.gm { display: inline-block; overflow: hidden; vertical-align: top; padding: .08em 0 .02em; margin: -.08em 0 -.02em; }
.gl { position: relative; display: inline-block; transform: translateY(110%) rotate(6deg); transform-origin: 0 100%; transition: transform .5s var(--ease-expo-in) calc(var(--i) * 10ms); }
.ci.on > .gline .gl, .ci.on > h2 .gl, .ci.on > .lk-row .gl { transform: none; transition: transform 1.3s var(--ease) calc(var(--i) * 45ms + var(--d0, 0ms)); }
.gw.red, .gl.red { color: var(--bf-acct); }
.w { opacity: .14; }
.w em, .k-quiet em { font: italic 400 1.1em/1 var(--font-story); letter-spacing: -.01em; }
.w b.red { font-weight: inherit; }

.k-hero { display: flex; flex-direction: column; gap: clamp(14px, 2.2vh, 26px); }
.k-hero .eyebrow { color: var(--bf-mute); }
.hero-h1 { font: 400 max(56px, min(13vw, 19vh, 240px))/.84 var(--font-display); text-transform: uppercase; letter-spacing: .01em; margin: 0; }
.hero-sub { max-width: 34ch; text-wrap: pretty; }
.k-say { font: 500 clamp(26px, 3.3vw, 58px)/1.06 var(--font-body); letter-spacing: -.025em; max-width: 19ch; text-wrap: balance; }
.k-anton { font: 400 var(--fs-h2)/.86 var(--font-display); text-transform: uppercase; letter-spacing: .01em; max-width: 14ch; }
.k-say .k-anton, .k-lead .k-anton { margin-top: .22em; }
.k-anton > .ci { font: 500 var(--fs-lead)/1.1 var(--font-body); text-transform: none; letter-spacing: -.015em; margin-top: .5em; }
.k-anton.k-sub { font-size: clamp(36px, 4.6vw, 88px); }
.k-anton.k-huge { font-size: clamp(120px, 23vw, 400px); line-height: .8; }
.k-lead, .k-lead .lead { font: 500 var(--fs-lead)/1.1 var(--font-body); letter-spacing: -.015em; }
.k-lead.mute > .lead { color: var(--bf-mute); }
.k-lead.center { text-align: center; }
.k-quiet { font: 500 clamp(18px, 1.7vw, 28px)/1.2 var(--font-body); letter-spacing: -.01em; text-align: center; }
.k-quiet.big { font-size: clamp(28px, 3.5vw, 62px); line-height: 1.08; letter-spacing: -.025em; max-width: 20ch; }
.k-quiet.big .k-quiet { margin-top: .35em; }
.k-body .t-body, .k-body { max-width: 36ch; color: rgba(var(--bf-ink-rgb), .82); text-wrap: pretty; }
.k-mono .t-mono.film, .t-mono.film { font-size: var(--fs-mono-film); letter-spacing: var(--track-mono-film); }
.t-mono.lc { text-transform: none; }
.hi { position: relative; display: inline-block; padding: 0 .12em; }
.hi i { position: absolute; left: 0; top: -.14em; bottom: -.14em; width: 100%; background: var(--bf-acct); transform-origin: 0 50%; transform: scaleX(0); }
.hi em { position: relative; font-style: normal; }
/* s02 tach */
.k-tach { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.k-tach .t-mono { color: var(--bf-mute); }
/* s05 lockup (left of the particle V8) */
.lock5 .k-word { font: 400 clamp(52px, 7.2vw, 140px)/.86 var(--font-display); text-transform: uppercase; }
.lock5 .k-word > .ci { margin-top: clamp(10px, 1.4vw, 22px); font-family: var(--font-body); text-transform: none; }
.lock5 .k-mono + .k-mono { margin-top: 10px; }
.lock5 .k-body { margin-top: clamp(18px, 2.4vw, 34px); }
/* the opening page (no BLACKFRAME LABS headline): the positioning is the message, set larger, staggered in after the particle V8 forms */
.lock5 .k-open { display: grid; justify-items: start; }
.lock5 .k-open .t-mono.film { font-size: clamp(17px, 2.1vw, 38px); letter-spacing: .1em; line-height: 1.5; }
.lock5 .k-open-2.on { transition-delay: .18s; }
.lock5 .k-open .k-body .t-body { font-size: clamp(15px, 1.15vw, 20px); }
/* s06 */
.k-eyebrow { opacity: 0; display: flex; flex-direction: column; gap: 10px; }
.k-eyebrow.on { opacity: .6; }
.k-eyebrow .credit { color: var(--bf-mute); }
.k-moat { width: min(420px, 34vw); transform: translate3d(0, 14px, 0); transition: opacity .25s linear, transform .25s linear; }
.k-moat.on { transition: opacity .5s var(--ease), transform .5s var(--ease); }
.k-mline { font: 600 clamp(26px, 2.6vw, 46px)/1.02 var(--font-body); letter-spacing: -.025em; margin-bottom: clamp(14px, 2vh, 24px); }
.card .mc-i { color: var(--bf-mute); margin-bottom: 12px; } .card .mc-i b { color: var(--bf-acct); font-weight: 500; }
.mc-n { font: 400 clamp(40px, 4.4vw, 84px)/.86 var(--font-display); text-transform: uppercase; margin: 0; }
.card .mc-m { text-transform: none; color: var(--bf-mute); margin: 12px 0 14px; letter-spacing: .06em; }
.card .mc-b { font: 500 var(--fs-body)/var(--lh-body) var(--font-body); color: rgba(var(--bf-ink-rgb), .78); }
/* s07 */
.chain-g { max-width: min(760px, 56vw); }
.k-chain { font-size: clamp(18px, 1.55vw, 26px); line-height: 1.32; letter-spacing: -.01em; max-width: 44ch; }
.k-list ol { list-style: none; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px 14px; }
.k-list li { font: 500 11px/1.2 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; opacity: .26; transition: opacity .4s var(--ease); }
.k-list li.lit { opacity: 1; }
/* s08 / s09 */
.k-pillar { display: flex; flex-direction: column; gap: 10px; }
.k-pillar .t-mono { color: var(--bf-mute); }
.k-pillar .pname { font: 400 clamp(40px, 4.2vw, 72px)/.88 var(--font-display); text-transform: uppercase; max-width: 16ch; }
.grp.br .k-say { font-size: clamp(22px, 2.1vw, 36px); max-width: 22ch; }
.grp.br .k-say .k-say { margin-top: .1em; }
.grp.br .k-body { margin-top: 18px; }
.bul { list-style: none; padding: 0; margin: 16px 0 0 !important; display: flex; flex-wrap: wrap; gap: 8px 18px; }
.bul li { color: var(--bf-ink); }
.bul li::before { content: "— "; color: var(--bf-acct); }
.k-body .note { margin-top: 14px; color: var(--bf-mute); }
.k-body .hint { margin-top: 18px; display: flex; align-items: center; gap: 10px; color: var(--bf-ink); }
.can-play, .can-play * { cursor: pointer !important; }
/* s11 */
.k-now .t-mono { font-size: clamp(14px, 1.3vw, 20px); color: var(--bf-ink); letter-spacing: .24em; text-shadow: 0 0 10px #000, 0 0 28px #000; }
.k-rushblk { opacity: 1 !important; }
.k-rushblk .zoom { display: flex; flex-direction: column; align-items: center; will-change: transform, opacity; }
.k-rush { font-family: var(--font-display); text-transform: uppercase; line-height: .86; transition: opacity .2s linear; }
.k-rush.r1 { font-size: clamp(48px, 7vw, 132px); margin-bottom: .1em; }
.k-rush.r2 { font-size: clamp(88px, 14vw, 268px); }
.k-rush .gm { overflow: visible; }
.k-rush .gl { transform: translate(var(--dx, 0), var(--dy, 0)) scale(.06); opacity: 0; transition: transform .3s var(--ease-expo-in), opacity .3s linear; }
.k-rush.on > .gline .gl { transform: none; opacity: 1; transition: transform .42s var(--ease) calc(var(--i) * 24ms), opacity .14s linear calc(var(--i) * 24ms); }
.k-rush .e { position: absolute; left: 0; top: 0; opacity: 0; pointer-events: none; transform-origin: 50% 60%; }
.k-rush.on .e1 { animation: echo .55s var(--ease) calc(var(--i) * 24ms + 40ms) both; }
.k-rush.on .e2 { animation: echo2 .7s var(--ease) calc(var(--i) * 24ms + 90ms) both; }
.k-rush .gl.red .e { color: var(--bf-acct); }
@keyframes echo { from { transform: scale(1.6); opacity: .3 } to { transform: scale(1); opacity: 0 } }
@keyframes echo2 { from { transform: scale(2.2); opacity: .22 } to { transform: scale(1); opacity: 0 } }
/* s12 lockup + CTA */
.lock-bg { position: absolute; inset: 0; background: var(--bf-black); opacity: 0; }
.k-final { display: flex; flex-direction: column; align-items: center; gap: clamp(14px, 1.7vw, 30px); }
.lk-row { display: flex; align-items: center; gap: clamp(14px, 1.9vw, 36px); }
.bfr-sq.xl { width: clamp(64px, 6.9vw, 132px); height: auto; aspect-ratio: 1; font-size: clamp(30px, 3.2vw, 62px); transform: scale(.97); opacity: 0; transition: transform .9s var(--ease), opacity .6s var(--ease); }
.k-final.on .bfr-sq.xl { transform: none; opacity: 1; }
.ember { position: absolute; inset: -60%; border-radius: 50%; background: radial-gradient(closest-side, rgba(var(--bf-acct-rgb), .55), transparent); opacity: 0; z-index: -1; pointer-events: none; }
.ember-on .ember { animation: ember .6s var(--ease-sine-in-out) 1 both; }
@keyframes ember { 0% { opacity: 0 } 40% { opacity: 1 } 100% { opacity: .18 } }
.lk-word { font: 400 clamp(44px, 6.25vw, 120px)/.86 var(--font-display); color: var(--bf-ink); white-space: nowrap; margin: 0; }
.lk-rest { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.lk-rest .url { margin-top: 6px; }
.k-cta { margin-top: clamp(18px, 3vh, 40px); display: flex; flex-direction: column; align-items: center; gap: 14px; }
.cta-h { font: 400 clamp(30px, 3.6vw, 64px)/.9 var(--font-display); text-transform: uppercase; }
.k-tag .t-story { font-size: clamp(24px, 2.6vw, 48px); }
.cta-btns { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; justify-content: center; margin-top: 6px; }
.k-cta.on .cta-btns a { pointer-events: auto; }
.ul-link { font: 500 clamp(15px, 1.2vw, 18px)/1.2 var(--font-body); text-decoration: underline; text-underline-offset: 5px; }
.chap-inline { display: flex; align-items: center; gap: 16px; color: var(--bf-mute); }
.chap-inline i { width: var(--red-tick); height: 2px; background: var(--bf-acct); }

/* ───────── engine moat labels (engine/demo grammar) ───────── */
.labels { position: absolute; inset: 0; transition: opacity .4s var(--ease); }
.lab { position: absolute; left: 0; top: 0; will-change: transform, opacity; }
.lab .ld { position: absolute; left: 0; top: 0; height: 1px; background: var(--bf-lead); transform-origin: 0 50%; }
.lab .ld::before { content: ""; position: absolute; left: -4px; top: -4px; width: 8px; height: 8px; border-radius: 50%; background: var(--bf-ink); }
.lab .bx { position: absolute; left: 0; top: 0; display: flex; flex-direction: column; gap: 8px; white-space: nowrap; text-shadow: 0 0 14px var(--bf-halo); }
.lab.L .bx { align-items: flex-end; text-align: right; }
.lab .nm { font: 400 var(--fs-label)/.9 var(--font-display); text-transform: uppercase; color: var(--bf-ink); }
.lab .ln { position: relative; height: 1.1em; font: 500 var(--fs-mono)/1 var(--font-mono); letter-spacing: var(--track-mono); text-transform: uppercase; color: var(--bf-mute); }
.lab .ln span { position: absolute; top: 0; white-space: nowrap; }
.lab.L .ln span { right: 0; } .lab.R .ln span { left: 0; }
.lab .ln .vb { color: var(--bf-ink); }
.lab.cur .nm { color: #fff; }

/* ───────── modal ───────── */
.modal { position: fixed; inset: 0; z-index: 50; background: rgba(0, 0, 0, .92); display: flex; align-items: center; justify-content: center; padding: clamp(16px, 4vw, 60px); opacity: 0; transition: opacity .35s var(--ease); }
.modal.open { opacity: 1; }
.modal[hidden] { display: none; }
.modal-box { position: relative; width: min(100%, 1280px, calc(86vh * 16 / 9)); aspect-ratio: 16 / 9; background: #000; border-radius: 3px; overflow: hidden; }
.modal-box.v { width: min(100%, calc(86vh * 9 / 16)); aspect-ratio: 9 / 16; }
.modal-box video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #000; }
.modal-box .tag { position: absolute; left: 14px; top: 14px; display: flex; align-items: center; gap: 8px; font: 500 10px/1 var(--font-mono); letter-spacing: .12em; color: var(--bf-ink); text-shadow: 0 0 10px #000; }
.modal-close { position: fixed; top: 18px; right: 18px; }

/* ───────── gate ───────── */
.gate { position: fixed; inset: 0; z-index: 100; color: var(--bf-ink); }
.gate-half { position: absolute; left: 0; right: 0; height: 50.5%; background: #050505; transition: transform 1.2s cubic-bezier(.76, 0, .24, 1); }
.gate-half.top { top: 0; } .gate-half.bot { bottom: 0; }
.gate.opening .gate-half.top { transform: translateY(-100%); } .gate.opening .gate-half.bot { transform: translateY(100%); }
.gate-in { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; gap: 24px; padding: 0 clamp(20px, 6vw, 96px); transition: opacity .4s; }
.gate.opening .gate-in { opacity: 0; pointer-events: none; }
.gate-row { display: flex; align-items: center; gap: 14px; color: var(--bf-mute); font-size: 11px; }
.gate-box { position: relative; min-height: clamp(96px, 18vw, 260px); }
.gate-num { position: absolute; left: 0; bottom: 0; font: 400 clamp(96px, 18vw, 260px)/.8 var(--font-display); transition: opacity .4s; }
.gate-ask { position: absolute; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; gap: 22px; opacity: 0; transform: translateY(16px); pointer-events: none; transition: opacity .6s .35s, transform .8s var(--ease) .35s; }
.gate.ready .gate-num { opacity: 0; }
.gate.ready .gate-ask { opacity: 1; transform: none; pointer-events: auto; }
.gate-q { margin: 0; font: 400 clamp(40px, 6vw, 96px)/.9 var(--font-display); text-transform: uppercase; max-width: 9ch; }
.gate-btns { display: flex; gap: 12px; flex-wrap: wrap; }
.gate-bar { height: 2px; background: #222220; } .gate-bar i { display: block; height: 100%; width: 100%; background: var(--bf-acct); transform-origin: 0 50%; transform: scaleX(0); transition: transform .3s linear; }
.gate.gone { display: none; }
@media (max-width: 700px) { .gate-box { min-height: 250px; } }

/* ───────── phones (< 820 px): copy in the bottom 40 %, stacked lists, bottom sheets ───────── */
@media (max-width: 819.98px) {
  .d-only { display: none !important; }
  .m-only { display: grid !important; }
  .grp.m-b { left: var(--m); right: var(--m); top: auto; bottom: var(--b-copy); transform: none; max-width: none; width: auto; justify-items: start; align-items: end; }
  .grp.m-tl { left: var(--m); right: var(--m); top: calc(var(--hud-top) + 60px); bottom: auto; align-items: start; max-width: none; }
  .grp.m-t { left: var(--m); right: var(--m); top: calc(var(--hud-top) + 72px); transform: none; max-width: none; align-items: start; }
  .grp.m-sheet { left: 0; right: 0; bottom: 0; width: auto; max-width: none; padding: 40px var(--m) calc(var(--b-copy) - 10px); max-height: 46vh; align-items: end; transition: background .4s var(--ease); }
  .grp.m-sheet:has(> .ci.on) { background: linear-gradient(to top, rgba(3, 3, 3, .94) 62%, rgba(3, 3, 3, 0)); }
  .grp.tl { top: calc(var(--hud-top) + 60px); max-width: none; right: var(--m); }
  .grp.tr { top: calc(var(--hud-top) + 54px); }
  .k-tach svg { width: 84px; height: 49px; }
  .k-say { font-size: clamp(24px, 7.2vw, 34px); max-width: 22ch; }
  .grp.br .k-say { font-size: clamp(22px, 6.4vw, 30px); }
  .k-body .t-body, .k-body { font-size: 15px; }
  .k-anton { font-size: clamp(40px, 12vw, 64px); }
  .k-anton.k-huge { font-size: 40vw; }
  .k-moat { width: auto; }
  .card .mc-b { font-size: 14px; }
  .k-mline { font-size: 26px; }
  .lock5 .k-word { font-size: clamp(40px, 12.4vw, 64px); }
  .lock5 .k-word .t-mono.film { font-size: 12px; }
  .lk-row { flex-direction: column; gap: 14px; }
  .lk-word { font-size: clamp(36px, 11vw, 64px); }
  .k-pillar .pname { font-size: clamp(32px, 9.4vw, 48px); }
  .chain-g { display: none; }
  .k-quiet.big { font-size: clamp(26px, 7.6vw, 38px); }
  .k-rush.r2 { font-size: 14vw; }
  .labels { display: none; }
  .bul { gap: 6px 12px; }
}

/* ───────── static fallback (prefers-reduced-motion / no WebGL) ───────── */
html.static #film, html.static #engine, html.static .copy-layer, html.static #track, html.static .fx-dip, html.static .hud-rec, html.static .hud-index, html.static .chap-label { display: none !important; }
html.static .hud-prog { display: none; }
.static-chapters { position: relative; z-index: 3; background: var(--bf-bg); padding: calc(var(--hud-top) + 80px) var(--m) 0; color: var(--bf-ink); }
.st-sec { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(20px, 4vw, 64px); align-items: center; padding: clamp(40px, 8vh, 96px) 0; border-top: 1px solid var(--bf-line); }
.st-sec .chap-inline { grid-column: 1 / -1; margin: 0; }
.st-still { margin: 0; aspect-ratio: 16 / 9; background: #000; overflow: hidden; border: 1px solid var(--bf-line); }
.st-still img { width: 100%; height: 100%; object-fit: cover; display: block; }
.st-copy { display: flex; flex-direction: column; gap: 14px; }
.st-copy p { margin: 0; }
.st-h { margin: 0; font: 400 clamp(56px, 8vw, 140px)/.84 var(--font-display); text-transform: uppercase; }
.st-say { font: 500 clamp(22px, 2.4vw, 40px)/1.12 var(--font-body); letter-spacing: -.02em; }
.st-say.sm { font-size: clamp(18px, 1.6vw, 24px); }
.st-moats, .st-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.st-moats .mc-n { font-size: clamp(28px, 2.6vw, 44px); }
.st-copy .hi i { transform: none; }
.st-sec[data-sec="s12-lockup"] .st-copy { align-items: flex-start; }
.st-sec .lk-row { flex-direction: row; }
.st-sec .bfr-sq.xl { opacity: 1; transform: none; }
@media (max-width: 819.98px) { .st-sec { grid-template-columns: 1fr; } .st-moats, .st-list { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .rec-dot, .sound-on .eq i { animation: none; } .gate-half { transition: none; } }
.hud-index button[hidden] { display: none !important; }