/* ══════════════════════════════════════════════════════════════
   Attack on Titan — ATTACK ON TITAN
   ══════════════════════════════════════════════════════════════ */

:root{
  --ink:      #07080a;
  --ink-2:    #0c0e11;
  --ink-3:    #14171b;
  --bone:     #e9e2d2;
  --bone-dim: #b9b2a2;
  --stone:    #8a8375;
  --steel:    #5b6a72;
  --blood:    #8e1b1b;
  --ember:    #d4491f;
  --gold:     #c8a44d;
  --jade:     #6ff0bd;

  --jp:  'Shippori Mincho B1', 'Yu Mincho', serif;
  --jps: 'Zen Kaku Gothic New', 'Hiragino Sans', sans-serif;
  --en:  'Oswald', 'Helvetica Neue', sans-serif;
  --mono:'Space Mono', ui-monospace, monospace;
  --ser: 'Cormorant Garamond', Georgia, serif;

  --gut: clamp(18px, 4vw, 64px);
  --ease: cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{ margin:0; padding:0; box-sizing:border-box; }

html{ scroll-behavior:smooth; }
/* `clip`, not `hidden` — `overflow-x:hidden` turns the body into a scroll
   container and breaks every `position:sticky` stage on the page. */
html,body{ overflow-x:clip; }
body{
  background:var(--ink);
  color:var(--bone);
  font-family:var(--jps);
  -webkit-font-smoothing:antialiased;
  cursor:none;
}
@media (pointer:coarse){ body{ cursor:auto; } }

::selection{ background:var(--ember); color:#0b0705; }

img{ display:block; max-width:100%; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:none; }
a{ color:inherit; text-decoration:none; }
em{ font-style:normal; color:var(--ember); }

/* ─────────── AMBIENT ─────────── */
.grain,.scanlines,.vignette,.dust,.flash{
  position:fixed; inset:0; pointer-events:none; z-index:900;
}
.grain{
  opacity:.055; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grainShift .6s steps(2) infinite;
}
@keyframes grainShift{ 50%{ transform:translate3d(-2%,1%,0); } }
.scanlines{
  opacity:.16;
  background:repeating-linear-gradient(to bottom, rgba(0,0,0,.5) 0 1px, transparent 1px 3px);
}
.vignette{
  background:radial-gradient(120% 90% at 50% 42%, transparent 38%, rgba(4,4,6,.72) 100%);
}
.dust{ z-index:880; opacity:.5; }
.flash{
  z-index:940; background:#fff; opacity:0;
  transition:opacity .09s linear; mix-blend-mode:screen;
}

/* custom cursor */
.cursor{
  position:fixed; top:0; left:0; z-index:999; pointer-events:none;
  width:34px; height:34px; margin:-17px 0 0 -17px;
  border:1px solid rgba(233,226,210,.5); border-radius:50%;
  transition:width .3s var(--ease), height .3s var(--ease),
             margin .3s var(--ease), border-color .3s, background .3s;
  mix-blend-mode:difference;
}
.cursor i{
  position:absolute; inset:50%; width:3px; height:3px; margin:-1.5px;
  background:var(--bone); border-radius:50%;
}
.cursor.is-hot{
  width:64px; height:64px; margin:-32px 0 0 -32px;
  border-color:var(--ember); background:rgba(212,73,31,.1);
}
@media (pointer:coarse){ .cursor{ display:none; } }

/* ─────────── PRELOADER ─────────── */
.loader{
  position:fixed; inset:0; z-index:1000; background:var(--ink);
  display:grid; place-items:center;
  transition:opacity .9s var(--ease), visibility .9s;
}
.loader.is-done{ opacity:0; visibility:hidden; }
.loader__inner{ width:min(420px,76vw); text-align:center; }
.loader__wings{ width:110px; color:var(--bone); opacity:.55; margin:0 auto 22px; display:block; }
.loader__glyph{
  font-family:var(--jp); font-weight:800; font-size:clamp(30px,6vw,46px);
  letter-spacing:.18em; margin-bottom:26px;
}
.loader__bar{ height:1px; background:rgba(233,226,210,.16); overflow:hidden; }
.loader__bar span{ display:block; height:100%; width:0%; background:var(--ember); }
.loader__meta{
  display:flex; justify-content:space-between; margin-top:12px;
  font-family:var(--mono); font-size:10px; letter-spacing:.24em;
  color:var(--bone-dim); text-transform:uppercase;
}

/* ─────────── CHROME ─────────── */
.chrome{
  position:fixed; top:0; left:0; right:0; z-index:800;
  display:flex; align-items:center; justify-content:space-between;
  padding:20px var(--gut);
  mix-blend-mode:difference;
}
.chrome__mark{ display:flex; align-items:center; gap:12px; }
.chrome__mark svg{ width:44px; color:var(--bone); }
.chrome__mark span{
  font-family:var(--jp); font-size:13px; letter-spacing:.4em; opacity:.85;
}
.chrome__nav{ display:flex; gap:clamp(14px,2.4vw,34px); }
.chrome__nav a{
  position:relative; font-family:var(--mono); font-size:10px;
  letter-spacing:.26em; opacity:.62; transition:opacity .3s;
}
.chrome__nav a::before{
  content:attr(data-jp); position:absolute; left:50%; top:-16px;
  transform:translate(-50%,4px); font-family:var(--jp); font-size:12px;
  letter-spacing:0; opacity:0; transition:.35s var(--ease); color:var(--ember);
}
.chrome__nav a:hover{ opacity:1; }
.chrome__nav a:hover::before{ opacity:1; transform:translate(-50%,0); }
@media (max-width:760px){ .chrome__nav a:nth-child(2),.chrome__nav a:nth-child(4){ display:none; } }

.rail{
  position:fixed; top:50%; z-index:800; pointer-events:none;
  font-family:var(--mono); font-size:9px; letter-spacing:.4em;
  color:var(--bone-dim); opacity:.42; white-space:nowrap;
}
.rail--left { left:14px;  transform:translateY(-50%) rotate(180deg); writing-mode:vertical-rl; }
.rail--right{ right:14px; transform:translateY(-50%); writing-mode:vertical-rl; }
@media (max-width:900px){ .rail{ display:none; } }

.progress{
  position:fixed; left:0; bottom:0; height:2px; width:100%;
  background:rgba(233,226,210,.08); z-index:850;
}
.progress i{
  display:block; height:100%; width:0%;
  background:linear-gradient(90deg,var(--blood),var(--ember),var(--gold));
}

.hint{
  position:fixed; left:50%; bottom:34px; transform:translateX(-50%);
  z-index:820; display:flex; flex-direction:column; align-items:center; gap:10px;
  pointer-events:none; transition:opacity .6s;
}
.hint.is-gone{ opacity:0; }
.hint__jp{ font-family:var(--jp); font-size:13px; letter-spacing:.4em; }
.hint__line{ width:1px; height:38px; background:linear-gradient(var(--bone),transparent); animation:drop 2.2s var(--ease) infinite; }
@keyframes drop{ 0%{transform:scaleY(0);transform-origin:top} 45%{transform:scaleY(1);transform-origin:top} 46%{transform-origin:bottom} 100%{transform:scaleY(0);transform-origin:bottom} }
.hint__en{ font-family:var(--mono); font-size:9px; letter-spacing:.3em; opacity:.6; }

.badge{
  position:fixed; left:var(--gut); bottom:34px; z-index:820;
  display:flex; align-items:baseline; gap:10px; pointer-events:none;
  opacity:0; transform:translateY(10px); transition:.6s var(--ease);
}
.badge.is-on{ opacity:1; transform:none; }
.badge__jp{ font-family:var(--jp); font-size:26px; color:var(--ember); }
.badge__en{ font-family:var(--mono); font-size:9px; letter-spacing:.3em; opacity:.6; }
@media (max-width:760px){ .badge{ display:none; } }

/* ══════════════════ SCRUB SECTIONS ══════════════════ */
.scrub{ position:relative; background:var(--ink); }
.scrub__sticky{
  position:sticky; top:0; height:100vh; height:100svh; overflow:hidden;
}
.scrub__canvas{ position:absolute; inset:0; width:100%; height:100%; display:block; }
.scrub__tint{
  position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(70% 60% at 50% 40%, transparent 30%, rgba(6,6,8,.55) 100%),
    linear-gradient(180deg, rgba(8,8,10,.55) 0%, transparent 26%, transparent 62%, rgba(6,6,8,.88) 100%);
  mix-blend-mode:multiply;
}
.scrub__tint--eren{
  background:
    radial-gradient(64% 58% at 50% 42%, transparent 24%, rgba(28,6,4,.6) 100%),
    linear-gradient(180deg, rgba(10,4,4,.6) 0%, transparent 30%, transparent 60%, rgba(8,3,3,.9) 100%);
}
.scrub__steam,.scrub__bolts{
  position:absolute; inset:0; width:100%; height:100%;
  pointer-events:none; mix-blend-mode:screen;
}
.scrub__hud{
  position:absolute; left:var(--gut); right:var(--gut); bottom:24px;
  display:flex; justify-content:space-between; pointer-events:none;
  font-family:var(--mono); font-size:9px; letter-spacing:.28em;
  color:var(--bone-dim); opacity:.55;
}
.shockwave{
  position:absolute; left:50%; top:52%; width:10px; height:10px;
  margin:-5px; border-radius:50%; pointer-events:none;
  border:1px solid rgba(233,226,210,.6); opacity:0;
}
.shockwave.is-go{ animation:shock 1.1s var(--ease) forwards; }
@keyframes shock{ 0%{opacity:.8;transform:scale(1)} 100%{opacity:0;transform:scale(180)} }

/* title lockup */
.lockup{
  position:absolute; left:var(--gut); bottom:11vh; z-index:5;
  max-width:min(640px,80vw); pointer-events:none;
}
.lockup__kicker{
  font-family:var(--mono); font-size:10px; letter-spacing:.34em;
  color:var(--ember); margin-bottom:16px; padding-left:2.2rem; position:relative;
}
.lockup__kicker::before{
  content:''; position:absolute; left:0; top:50%; width:1.6rem; height:1px; background:var(--ember);
}
.lockup__jp{
  font-family:var(--jp); font-weight:800;
  font-size:clamp(52px,10.5vw,140px); line-height:.92; letter-spacing:.02em;
  text-shadow:0 12px 44px rgba(0,0,0,.75);
}
.lockup__jp span{ color:var(--ember); }
.lockup__en{
  font-family:var(--en); font-weight:200; font-size:clamp(11px,1.5vw,17px);
  letter-spacing:.5em; margin-top:14px; opacity:.8;
}
.lockup__sub{
  font-family:var(--jp); font-size:clamp(12px,1.5vw,15px);
  margin-top:18px; opacity:.6; letter-spacing:.12em;
}

/* phase captions */
.phase{
  position:absolute; right:var(--gut); top:50%; z-index:6;
  width:min(420px,72vw); text-align:right;
  transform:translateY(-50%); pointer-events:none;
  opacity:0; visibility:hidden;
}
.phase.is-on{ opacity:1; visibility:visible; }
.phase__jp{
  font-family:var(--jp); font-weight:800;
  font-size:clamp(38px,6.4vw,86px); line-height:1; letter-spacing:.06em;
  text-shadow:0 10px 40px rgba(0,0,0,.8);
}
.phase__en{
  font-family:var(--mono); font-size:10px; letter-spacing:.32em;
  color:var(--ember); margin-top:14px;
}
.phase__sub{
  font-family:var(--jp); font-size:13px; line-height:1.9;
  margin-top:14px; opacity:.62; letter-spacing:.08em;
}
.phase--eren .phase__en{ color:var(--jade); }
@media (max-width:760px){
  .phase{ right:auto; left:var(--gut); text-align:left; top:22%; }
  .lockup{ bottom:16vh; }
}

/* eren title block */
.erenblock{
  position:absolute; left:var(--gut); bottom:12vh; z-index:6; pointer-events:none;
}
.erenblock__kicker{
  font-family:var(--mono); font-size:10px; letter-spacing:.34em; color:var(--jade); margin-bottom:14px;
}
.erenblock__jp{
  font-family:var(--jp); font-weight:800; font-size:clamp(44px,8vw,108px);
  line-height:.95; text-shadow:0 10px 40px rgba(0,0,0,.8);
}
.erenblock__en{
  font-family:var(--en); font-weight:200; font-size:clamp(10px,1.3vw,15px);
  letter-spacing:.34em; margin-top:14px; opacity:.72;
}

/* ══════════════════ VELOCITY MARQUEE ══════════════════ */
.velocity{
  position:relative; z-index:2; padding:clamp(30px,6vw,70px) 0;
  background:var(--ink); border-block:1px solid rgba(233,226,210,.08);
  overflow:hidden;
}
.velocity__row{ overflow:hidden; white-space:nowrap; }
.velocity__row + .velocity__row{ margin-top:10px; }
.velocity__track{ display:inline-block; will-change:transform; }
.velocity__track span{
  font-family:var(--jp); font-weight:800;
  font-size:clamp(34px,6.5vw,86px); letter-spacing:.04em;
  color:transparent; -webkit-text-stroke:1px rgba(233,226,210,.32);
  padding-right:.4em;
}
.velocity__row--alt .velocity__track span{
  -webkit-text-stroke:1px rgba(212,73,31,.42); color:transparent;
}

/* ══════════════════ SECTION HEADS ══════════════════ */
.sechead{ max-width:660px; margin-bottom:clamp(40px,6vw,80px); }
.sechead--center{ margin-inline:auto; text-align:center; }
.eyebrow{
  display:inline-block; font-family:var(--mono); font-size:10px;
  letter-spacing:.34em; color:var(--ember); margin-bottom:20px;
}
.sechead h2{
  font-family:var(--jp); font-weight:800;
  font-size:clamp(34px,6vw,76px); line-height:1.06; letter-spacing:.02em;
}
.sechead p{
  margin-top:22px; font-size:clamp(13px,1.5vw,16px); line-height:1.9;
  color:var(--bone-dim); max-width:52ch;
}
.sechead--center p{ margin-inline:auto; }

/* split-text + reveal */
[data-split] .word{ display:inline-block; overflow:hidden; vertical-align:top; }
[data-split] .word i{
  display:inline-block; font-style:inherit;
  transform:translateY(112%) rotate(4deg); opacity:0;
  transition:transform .95s var(--ease), opacity .95s var(--ease);
  transition-delay:calc(var(--i) * 55ms);
}
[data-split].is-in .word i{ transform:none; opacity:1; }

[data-reveal]{
  opacity:0; transform:translateY(24px);
  transition:opacity .9s var(--ease), transform .9s var(--ease);
}
[data-reveal].is-in{ opacity:1; transform:none; }

/* ══════════════════ WALLS / PARALLAX ══════════════════ */
.walls{
  position:relative; overflow:hidden;
  padding:clamp(90px,14vh,180px) var(--gut) clamp(110px,16vh,200px);
  background:var(--ink);
}
.walls__bg{ position:absolute; inset:-12% -6%; z-index:0; }
.walls__layer{ position:absolute; inset:0; will-change:transform; }
.walls__layer--sky{
  background:
    radial-gradient(60% 46% at 50% 8%, rgba(214,190,140,.30), transparent 62%),
    linear-gradient(180deg,#22252b 0%, #14161a 44%, #0a0b0d 100%);
}
.walls__layer--far,
.walls__layer--mid,
.walls__layer--near{
  --brick:rgba(233,226,210,.045);
  --mortar:rgba(0,0,0,.5);
}
.walls__layer--far{
  top:auto; height:52%; bottom:26%;
  background:
    repeating-linear-gradient(90deg, var(--mortar) 0 1px, transparent 1px 46px),
    repeating-linear-gradient(0deg,  var(--mortar) 0 1px, transparent 1px 26px),
    linear-gradient(180deg,#22252a,#101215);
  opacity:.5; filter:blur(1.4px);
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 30%,#000 100%);
          mask-image:linear-gradient(180deg,transparent,#000 30%,#000 100%);
}
.walls__layer--mid{
  top:auto; height:60%; bottom:12%;
  background:
    repeating-linear-gradient(90deg, var(--mortar) 0 2px, transparent 2px 78px),
    repeating-linear-gradient(0deg,  var(--mortar) 0 2px, transparent 2px 44px),
    linear-gradient(180deg,#1c1f23,#0c0e10);
  opacity:.72;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 22%,#000 100%);
          mask-image:linear-gradient(180deg,transparent,#000 22%,#000 100%);
}
.walls__layer--near{
  top:auto; height:46%; bottom:-8%;
  background:
    repeating-linear-gradient(90deg, rgba(0,0,0,.62) 0 3px, transparent 3px 128px),
    repeating-linear-gradient(0deg,  rgba(0,0,0,.62) 0 3px, transparent 3px 72px),
    linear-gradient(180deg,#15181b,#080a0b);
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 18%,#000 100%);
          mask-image:linear-gradient(180deg,transparent,#000 18%,#000 100%);
}
.walls__haze{
  position:absolute; inset:0;
  background:radial-gradient(80% 60% at 50% 30%, transparent 40%, rgba(7,8,10,.9) 100%);
}
.walls__inner{ position:relative; z-index:2; max-width:1180px; margin-inline:auto; }

.ringlist{ list-style:none; display:grid; gap:clamp(16px,2vw,26px); grid-template-columns:repeat(3,1fr); }
@media (max-width:900px){ .ringlist{ grid-template-columns:1fr; } }
.ring{
  position:relative; padding:clamp(24px,3vw,36px);
  border:1px solid rgba(233,226,210,.1);
  background:linear-gradient(180deg, rgba(233,226,210,.045), rgba(233,226,210,.012));
  backdrop-filter:blur(3px);
  transform-style:preserve-3d; will-change:transform;
  transition:border-color .5s, background .5s;
}
.ring:hover{ border-color:rgba(212,73,31,.5); }
.ring::before,.ring::after{
  content:''; position:absolute; width:12px; height:12px;
  border:1px solid var(--ember); opacity:.65;
}
.ring::before{ top:-1px; left:-1px; border-right:0; border-bottom:0; }
.ring::after{ bottom:-1px; right:-1px; border-left:0; border-top:0; }
.ring__idx{
  font-family:var(--mono); font-size:10px; letter-spacing:.3em; color:var(--ember);
}
.ring h3{
  font-family:var(--en); font-weight:300; font-size:clamp(17px,2vw,22px);
  letter-spacing:.14em; margin:16px 0 14px;
}
.ring h3 i{
  display:block; font-family:var(--jp); font-style:normal; font-weight:600;
  font-size:clamp(20px,2.6vw,27px); letter-spacing:.06em; margin-bottom:6px; color:var(--bone);
}
.ring p{ font-size:13px; line-height:1.9; color:var(--bone-dim); }
.ring__meter{ height:1px; background:rgba(233,226,210,.14); margin:24px 0 12px; }
.ring__meter i{
  display:block; height:100%; width:0;
  background:linear-gradient(90deg,var(--blood),var(--ember));
  transition:width 1.4s var(--ease);
}
.ring.is-in .ring__meter i{ width:var(--w); }
.ring__stat{ font-family:var(--mono); font-size:11px; letter-spacing:.24em; color:var(--gold); }

/* ══════════════════ STATS ══════════════════ */
.stats{
  position:relative; z-index:2; background:var(--ink-2);
  padding:clamp(80px,12vh,150px) var(--gut);
  border-block:1px solid rgba(233,226,210,.07);
}
.stats__grid{
  max-width:1180px; margin-inline:auto;
  display:grid; grid-template-columns:repeat(4,1fr); gap:1px;
  background:rgba(233,226,210,.09);
}
@media (max-width:820px){ .stats__grid{ grid-template-columns:repeat(2,1fr); } }
.stat{
  position:relative; overflow:hidden; background:var(--ink-2);
  padding:clamp(28px,4vw,48px) clamp(18px,2vw,28px); text-align:center;
}
.stat::before{
  content:''; position:absolute; inset:0; pointer-events:none; opacity:0;
  transition:opacity .5s;
  background:radial-gradient(220px circle at var(--mx,50%) var(--my,50%), rgba(212,73,31,.2), transparent 70%);
}
.stat:hover::before{ opacity:1; }
.stat__jp{ font-family:var(--jp); font-size:13px; letter-spacing:.3em; color:var(--ember); }
.stat__num{
  display:block; font-family:var(--en); font-weight:200;
  font-size:clamp(46px,7vw,86px); line-height:1; margin:16px 0 14px;
  font-variant-numeric:tabular-nums;
}
.stat__label{ font-family:var(--mono); font-size:9px; letter-spacing:.24em; color:var(--bone-dim); }

/* ══════════════════ REVEAL ══════════════════ */
.reveal{ position:relative; height:180vh; background:var(--ink); }
.reveal__stage{
  position:sticky; top:0; height:100vh; height:100svh; overflow:hidden;
}
.reveal__canvas{ position:absolute; inset:0; width:100%; height:100%; display:block; }
.reveal__ui{ position:absolute; inset:0; pointer-events:none; z-index:3; }
.reveal__tl{ position:absolute; left:var(--gut); top:22vh; max-width:min(440px,72vw); }
.reveal__tl h2{
  font-family:var(--jp); font-weight:800; font-size:clamp(40px,7vw,92px);
  line-height:.98; margin:8px 0 18px; text-shadow:0 10px 40px rgba(0,0,0,.8);
}
.reveal__tl h2 span{ color:var(--ember); }
.reveal__tl p{
  font-family:var(--ser); font-style:italic; font-size:17px; line-height:1.7;
  color:rgba(233,226,210,.8);
}
.reveal__br{
  position:absolute; right:var(--gut); bottom:16vh; max-width:min(340px,70vw); text-align:right;
}
.reveal__br h3{
  font-family:var(--en); font-weight:200; font-size:clamp(28px,4.4vw,54px);
  line-height:1; letter-spacing:.1em; margin:8px 0 14px;
}
.reveal__br p{ font-size:12px; line-height:1.9; color:var(--bone-dim); }
.reveal__hint{
  position:absolute; left:50%; bottom:6vh; transform:translateX(-50%);
  font-family:var(--mono); font-size:9px; letter-spacing:.3em;
  background:rgba(0,0,0,.5); padding:9px 20px; border:1px solid rgba(233,226,210,.14);
  transition:opacity .6s; white-space:nowrap;
}
.reveal__hint.is-gone{ opacity:0; }
.reveal__missing{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-align:center;
  background:rgba(0,0,0,.72); border:1px solid var(--ember); padding:16px 22px; line-height:2;
}
.reveal__missing b{ color:var(--ember); }
.reveal__missing code{ color:var(--gold); }
@media (max-width:760px){
  .reveal__br{ display:none; }
  .reveal__tl{ top:16vh; }
}

/* ══════════════════ FINALE ══════════════════ */
.finale{
  position:relative; overflow:hidden; min-height:100vh;
  display:grid; place-items:center; padding:clamp(90px,14vh,170px) var(--gut);
  background:var(--ink);
}
.finale__aurora{ position:absolute; inset:0; width:100%; height:100%; opacity:.85; }
.finale__inner{ position:relative; z-index:3; text-align:center; max-width:820px; }
.finale__kicker{ font-family:var(--mono); font-size:10px; letter-spacing:.34em; color:var(--gold); }
.finale__quote{ margin:34px 0 46px; }
.finale__quote p{
  font-family:var(--jp); font-weight:600;
  font-size:clamp(28px,5.2vw,62px); line-height:1.34; letter-spacing:.04em;
}
.finale__quote cite{
  display:block; margin-top:26px; font-family:var(--ser); font-style:italic;
  font-size:clamp(14px,1.8vw,19px); color:var(--bone-dim);
}
.finale__cta{ display:flex; gap:16px; justify-content:center; flex-wrap:wrap; }
.btn{
  position:relative; isolation:isolate; overflow:hidden;
  padding:15px 34px; border:1px solid var(--ember);
  font-family:var(--mono); font-size:10px; letter-spacing:.28em; text-transform:uppercase;
  clip-path:polygon(9px 0, 100% 0, calc(100% - 9px) 100%, 0 100%);
  transition:color .35s;
}
.btn span{ position:relative; z-index:2; }
.btn::after{
  content:''; position:absolute; inset:0; background:var(--ember); z-index:1;
  transform:translateX(-102%) skewX(-8deg); transition:transform .42s var(--ease);
}
.btn:hover{ color:#120604; }
.btn:hover::after{ transform:translateX(0) skewX(-8deg); }
.btn--ghost{ border-color:rgba(233,226,210,.4); }
.btn--ghost::after{ background:var(--bone); }
.finale__big{
  position:absolute; left:50%; bottom:-6vh; transform:translateX(-50%);
  font-family:var(--jp); font-weight:800; font-size:min(34vw,420px);
  line-height:.8; color:transparent; -webkit-text-stroke:1px rgba(233,226,210,.07);
  pointer-events:none; z-index:1; white-space:nowrap;
}

/* click spark */
.spark{ position:fixed; pointer-events:none; z-index:995; }

/* ══════════════════ FOOTER ══════════════════ */
.foot{
  position:relative; z-index:3; background:var(--ink);
  padding:34px var(--gut); border-top:1px solid rgba(233,226,210,.09);
}
.foot__row{
  display:flex; justify-content:space-between; gap:18px; flex-wrap:wrap;
  font-family:var(--mono); font-size:9px; letter-spacing:.28em; color:var(--bone-dim);
}

/* ══════════════════ REDUCED MOTION ══════════════════ */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .grain{ animation:none; }
  .hint__line{ animation:none; }
  [data-split] .word i,[data-reveal]{ opacity:1; transform:none; transition:none; }
  .cursor{ display:none; }
  body{ cursor:auto; }
}