:root{
  --navy:#061a6b; --deep:#030a2e; --royal:#0b2fa8; --sky:#7fc8ff;
  --pink:#ff5fa8; --hot:#ff2d8a; --gold:#ffb21e; --orange:#ff6a00; --paper:#fff6fb;
  --d:'Anton',Impact,sans-serif; --k:'Dela Gothic One','Anton',sans-serif;
  --m:'JetBrains Mono',ui-monospace,monospace; --b:'Outfit',system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{overflow-x:hidden;scroll-behavior:smooth}
body{min-width:1180px;background:var(--deep);color:#fff;font-family:var(--b);overflow-x:hidden}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
svg{width:1em;height:1em;fill:currentColor}

/* ---------- speed lines ---------- */
.speed{position:absolute;inset:-10%;pointer-events:none;z-index:2;
  --cx:50%;--cy:45%;
  background:
    repeating-conic-gradient(from 0deg at var(--cx) var(--cy),rgba(255,255,255,.85) 0 .35deg,transparent .35deg 3.1deg),
    repeating-conic-gradient(from 1.4deg at var(--cx) var(--cy),rgba(255,255,255,.55) 0 .8deg,transparent .8deg 7.3deg);
  -webkit-mask:radial-gradient(circle at var(--cx) var(--cy),transparent 0 24%,rgba(0,0,0,.35) 38%,#000 72%);
          mask:radial-gradient(circle at var(--cx) var(--cy),transparent 0 24%,rgba(0,0,0,.35) 38%,#000 72%);
}
.speed-hero{--cx:68%;--cy:30%;opacity:.38;mix-blend-mode:screen;animation:jitter .24s steps(2) infinite}
.speed-soft{opacity:.12}
@keyframes jitter{0%{transform:rotate(0)}50%{transform:rotate(.9deg) scale(1.01)}100%{transform:rotate(-.6deg)}}

/* ---------- nav ---------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:50;height:68px;padding:0 4vw;display:flex;align-items:center;justify-content:space-between;transition:background .3s,box-shadow .3s}
.nav.scrolled{background:rgba(3,10,46,.88);backdrop-filter:blur(10px);box-shadow:0 2px 0 var(--hot)}
.brand{display:flex;align-items:center;gap:12px;font-family:var(--d);font-size:26px;letter-spacing:.04em}
.brand img{width:42px;height:42px;border-radius:50%;border:3px solid var(--pink);object-fit:cover}
.nav nav{display:flex;align-items:center;gap:28px;font-family:var(--d);font-size:18px;letter-spacing:.08em}
.nav nav>a:not(.btn):not(.icon-btn):hover{color:var(--pink)}
.icon-btn{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:#fff;color:var(--deep);font-size:18px}
.icon-btn:hover{background:var(--pink);color:#fff}

/* ---------- buttons / CA ---------- */
.btn{display:inline-flex;align-items:center;gap:10px;font-family:var(--d);font-size:22px;letter-spacing:.05em;padding:15px 30px;transform:skewX(-10deg);transition:transform .15s,box-shadow .15s}
.btn>*{transform:skewX(10deg)}
.btn svg{font-size:20px}
.btn-buy{background:linear-gradient(90deg,var(--gold),var(--orange));color:var(--deep);box-shadow:6px 6px 0 var(--hot)}
.btn-x{background:#fff;color:var(--deep);box-shadow:6px 6px 0 var(--royal)}
.btn:hover{transform:skewX(-10deg) translate(-3px,-3px);box-shadow:10px 10px 0 var(--hot)}
.btn.sm{font-size:17px;padding:10px 20px;box-shadow:4px 4px 0 var(--hot)}
.ca{display:flex;align-items:stretch;background:rgba(3,10,46,.86);border:2px solid var(--pink);box-shadow:6px 6px 0 rgba(255,45,138,.45)}
.ca-k{display:grid;place-items:center;padding:0 16px;background:var(--pink);color:var(--deep);font-family:var(--d);font-size:20px;letter-spacing:.06em}
.ca-v{flex:1;padding:14px 16px;font-family:var(--m);font-size:15px;font-weight:700;color:#fff;word-break:break-all;line-height:1.35;align-self:center}
.ca-copy{border:0;cursor:pointer;padding:0 22px;background:#fff;color:var(--deep);font-family:var(--d);font-size:19px;letter-spacing:.06em;transition:background .15s}
.ca-copy:hover{background:var(--gold)}
.ca-copy.ok{background:#3ee08a}
.ctas{display:flex;gap:22px;margin-top:26px}

/* ---------- hero ---------- */
.hero{position:relative;height:100vh;min-height:780px;overflow:hidden;background:var(--deep);isolation:isolate}
.hero-plate{position:absolute;inset:0;background:url(assets/plate.jpg) center/cover;z-index:0}
.hero-plate::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(3,10,46,.94) 0 30%,rgba(3,10,46,.35) 62%,rgba(3,10,46,.1))}
.slash{position:absolute;z-index:1;top:-25%;right:6vw;width:30vw;height:150%;transform:skewX(-16deg);
  background:linear-gradient(180deg,var(--hot),var(--pink) 60%,rgba(255,95,168,.2));box-shadow:-18px 0 0 rgba(255,255,255,.9),-34px 0 0 var(--gold);
  animation:slashIn .7s .75s cubic-bezier(.7,0,.2,1) both}
@keyframes slashIn{from{transform:skewX(-16deg) translateY(-110%)}to{transform:skewX(-16deg) translateY(0)}}
.kana-v{position:absolute;z-index:1;right:1.4vw;top:84px;writing-mode:vertical-rl;font-family:var(--k);font-size:10.5vh;line-height:1;color:transparent;-webkit-text-stroke:2px rgba(255,255,255,.55);letter-spacing:.02em;animation:fadeIn 1s 1.5s both}
.hero-char{position:absolute;z-index:3;right:3vw;bottom:-2vh;height:min(90vh,920px);width:auto;filter:drop-shadow(0 24px 40px rgba(0,0,0,.55));
  animation:charIn .9s .95s cubic-bezier(.15,.85,.25,1) both}
@keyframes charIn{from{opacity:0;transform:translateX(18vw) scale(1.12)}to{opacity:1;transform:none}}
.hero-copy{position:absolute;z-index:4;left:5vw;top:50%;transform:translateY(-44%);width:min(580px,42vw)}
.tag{font-family:var(--m);font-weight:700;font-size:14px;letter-spacing:.32em;color:var(--sky);margin-bottom:14px;animation:fadeUp .6s 1.6s both}
.tag span{background:var(--hot);color:#fff;padding:3px 8px;margin-right:6px;letter-spacing:.2em}
.title{font-family:var(--d);font-weight:400;line-height:.84;font-size:clamp(130px,20vh,200px);letter-spacing:.005em;transform:skewX(-9deg);margin-left:-.04em}
.title span{display:block}
.t1{color:var(--pink);text-shadow:7px 7px 0 #fff,14px 14px 0 var(--royal);animation:slamL .55s 1.12s cubic-bezier(.2,1.4,.4,1) both}
.t2{color:#fff;text-shadow:7px 7px 0 var(--hot),14px 14px 0 var(--royal);animation:slamR .55s 1.26s cubic-bezier(.2,1.4,.4,1) both}
@keyframes slamL{from{opacity:0;transform:translateX(-60%) scale(1.6);filter:blur(8px)}to{opacity:1;transform:none;filter:none}}
@keyframes slamR{from{opacity:0;transform:translateX(60%) scale(1.6);filter:blur(8px)}to{opacity:1;transform:none;filter:none}}
.ticker{margin-top:26px;font-family:var(--d);font-size:32px;letter-spacing:.06em;color:var(--gold);animation:fadeUp .6s 1.55s both}
.ticker em{font-style:normal;font-family:var(--k);font-size:20px;color:#fff;margin-left:12px;opacity:.85}
.lede{margin:10px 0 24px;font-size:20px;line-height:1.45;color:#dfe8ff;max-width:520px;animation:fadeUp .6s 1.65s both}
.hero .ca{animation:fadeUp .6s 1.75s both}
.hero .ctas{animation:fadeUp .6s 1.85s both}
.bars{position:absolute;inset:0;z-index:20;pointer-events:none}
.bars i{position:absolute;left:0;right:0;height:50%;background:#000;animation:barOpen .75s .15s cubic-bezier(.8,0,.2,1) forwards}
.bars i:first-child{top:0}.bars i:last-child{bottom:0}
@keyframes barOpen{to{height:7vh}}
.flash{position:absolute;inset:0;z-index:19;background:#fff;opacity:0;pointer-events:none;animation:flash .5s 1.05s ease-out}
@keyframes flash{0%{opacity:0}15%{opacity:.95}100%{opacity:0}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes fadeUp{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}

/* ---------- band ---------- */
.band{position:relative;z-index:6;margin:-26px -2vw;background:var(--hot);transform:rotate(-1.6deg);overflow:hidden;box-shadow:0 6px 0 var(--gold),0 -6px 0 #fff;padding:12px 0}
.band-track{display:flex;width:max-content;gap:26px;align-items:center;animation:marq 34s linear infinite;white-space:nowrap}
.band span{font-family:var(--d);font-size:36px;letter-spacing:.06em}
.band span:nth-of-type(2n){font-family:var(--k);font-size:28px;color:var(--deep)}
.band b{color:var(--gold);font-size:26px}
@keyframes marq{to{transform:translateX(-50%)}}

/* ---------- cuts ---------- */
.cut{position:relative;height:100vh;min-height:740px;overflow:hidden;background:#000;isolation:isolate}
.cut[hidden]{display:none}
.cut-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;clip-path:inset(50% 0 50% 0);transform:scale(1.18);
  transition:clip-path .85s cubic-bezier(.75,0,.2,1),transform 2.6s cubic-bezier(.2,.7,.2,1)}
.cut.on .cut-img{clip-path:inset(0 0 0 0);transform:scale(1)}
.cut::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;box-shadow:inset 0 0 160px rgba(3,10,46,.65)}
.cut .speed{opacity:0;mix-blend-mode:screen}
.cut.on .speed{animation:burst 1.5s .55s ease-out}
@keyframes burst{0%{opacity:0;transform:scale(1.25)}18%{opacity:.95}100%{opacity:0;transform:scale(1)}}
.cut-flash{position:absolute;inset:0;z-index:3;background:#fff;opacity:0;pointer-events:none}
.cut.on .cut-flash{animation:flash .55s .7s ease-out}
#cut1 .speed{--cx:42%;--cy:28%} #cut2 .speed{--cx:69%;--cy:24%} #cut3 .speed{--cx:30%;--cy:17%} #cut4 .speed{--cx:52%;--cy:17%} #cutT .speed{--cx:62%;--cy:28%}

.card{position:absolute;z-index:4;max-width:560px;padding:28px 40px 30px;background:linear-gradient(100deg,rgba(3,10,46,.9),rgba(6,26,107,.78));
  border-left:10px solid var(--hot);box-shadow:12px 12px 0 rgba(255,45,138,.55);transform:skewX(-8deg) translateX(-60px);opacity:0;
  transition:transform .6s 1s cubic-bezier(.2,1.3,.4,1),opacity .4s 1s}
.card>*{transform:skewX(8deg)}
.pos-br .card,.pos-tr .card{transform:skewX(-8deg) translateX(60px)}
.cut.on .card{opacity:1;transform:skewX(-8deg) translateX(0)}
.pos-bl .card{left:4vw;bottom:9vh}
.pos-br .card{right:4vw;bottom:9vh}
.pos-tr .card{right:4vw;top:118px}
.pos-tl .card{left:4vw;top:118px}
.cut-no{font-family:var(--m);font-weight:700;font-size:14px;letter-spacing:.34em;color:var(--pink)}
.cut-no span{color:rgba(255,255,255,.5)}
.kana{font-family:var(--k);font-size:40px;color:var(--gold);line-height:1.2;margin:6px 0 2px;text-shadow:3px 3px 0 var(--deep)}
.card h2{font-family:var(--d);font-weight:400;font-size:104px;line-height:.9;letter-spacing:.01em;text-shadow:5px 5px 0 var(--hot)}
.sub{margin-top:14px;font-size:20px;color:#dfe8ff;line-height:1.4}

/* ---------- cast ---------- */
.cast{position:relative;overflow:hidden;padding:120px 4vw 130px;background:radial-gradient(ellipse at 50% 0,var(--royal),var(--navy) 45%,var(--deep));isolation:isolate}
.cast .speed{--cx:50%;--cy:20%}
.cast-head{position:relative;z-index:3;text-align:center;margin-bottom:60px}
.cast-head .kana{font-size:44px}
.cast-head h2{font-family:var(--d);font-weight:400;font-size:150px;line-height:.9;color:var(--pink);text-shadow:7px 7px 0 #fff,14px 14px 0 var(--royal);transform:skewX(-9deg)}
.cast-head .sub{font-size:22px}
.faces{position:relative;z-index:3;display:grid;grid-template-columns:repeat(5,1fr);gap:26px;max-width:1500px;margin:0 auto}
.faces figure{position:relative;aspect-ratio:3/4;overflow:hidden;transform:skewX(-8deg) translateY(60px);opacity:0;border:5px solid #fff;box-shadow:10px 10px 0 var(--hot);background:var(--navy);
  transition:transform .6s cubic-bezier(.2,1.3,.4,1),opacity .4s}
.faces figure:nth-child(2){transition-delay:.08s}.faces figure:nth-child(3){transition-delay:.16s}.faces figure:nth-child(4){transition-delay:.24s}.faces figure:nth-child(5){transition-delay:.32s}
.cast.on .faces figure{opacity:1;transform:skewX(-8deg)}
.faces img{width:100%;height:100%;object-fit:cover;transform:skewX(8deg) scale(1.22);transition:transform .4s}
.faces figure:hover img{transform:skewX(8deg) scale(1.32)}
.faces figcaption{position:absolute;left:0;right:0;bottom:0;padding:10px 14px;background:var(--hot);font-family:var(--d);font-size:30px;letter-spacing:.06em;text-align:center}

/* ---------- finale ---------- */
.finale{position:relative;height:max(40vw,600px);overflow:hidden;background:var(--navy);isolation:isolate}
.fin-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:0% 50%}
.finale::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,transparent 40%,rgba(3,10,46,.82) 58%,rgba(3,10,46,.94))}
.finale .speed{--cx:30%;--cy:30%;opacity:.16;mix-blend-mode:screen}
.fin-copy{position:absolute;z-index:4;right:5vw;top:50%;transform:translateY(-50%);width:min(600px,44vw)}
.finale.has-art .fin-img{object-position:50% 50%}
.finale.has-art::before{background:linear-gradient(270deg,transparent 45%,rgba(3,10,46,.82) 60%,rgba(3,10,46,.94))}
.finale.has-art .fin-copy{right:auto;left:5vw}
.fin-copy h2{font-family:var(--d);font-weight:400;font-size:64px;line-height:.95;margin:4px 0 26px;transform:skewX(-9deg)}
.fin-copy h2 span{font-size:116px;color:var(--pink);text-shadow:6px 6px 0 #fff,12px 12px 0 var(--royal)}

/* ---------- footer / toast ---------- */
.foot{display:flex;align-items:center;justify-content:space-between;gap:40px;padding:26px 4vw;background:#01051a;border-top:4px solid var(--hot);font-size:14px;color:#9fb0e0}
.foot-brand{font-family:var(--d);font-size:22px;color:#fff;letter-spacing:.05em;white-space:nowrap}
.foot-brand em{font-style:normal;font-family:var(--k);font-size:14px;color:var(--pink);margin-left:8px}
.toast{position:fixed;left:50%;bottom:40px;z-index:99;transform:translate(-50%,30px) skewX(-10deg);opacity:0;pointer-events:none;background:var(--pink);color:var(--deep);font-family:var(--d);font-size:24px;letter-spacing:.06em;padding:12px 30px;box-shadow:6px 6px 0 #fff;transition:.25s}
.toast.show{opacity:1;transform:translate(-50%,0) skewX(-10deg)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .cut-img{clip-path:none;transform:none}.card,.faces figure{opacity:1}.bars{display:none}
}