:root{--pink:#ff4df5;--purple:#9b35ff;--dark:#08030d;--text:#fff;--muted:#d5c9df}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:var(--dark)}
body{font-family:Inter,Segoe UI,Arial,sans-serif;color:var(--text);overflow:hidden}
.hero{position:relative;min-height:100vh;overflow:hidden;display:flex;align-items:center;padding:6vw;isolation:isolate;background:#08030d}
.bg,.shade,.glow,.particles,.flash,.page-fade{position:absolute;inset:0}
.bg{z-index:-5;background:url('background.png') center/cover no-repeat;transform:scale(1.08);will-change:transform,filter;animation:backgroundBreath 13s ease-in-out infinite alternate;transition:opacity 1.15s ease,transform 1.4s cubic-bezier(.2,.7,.2,1),filter 1.4s ease}
@keyframes backgroundBreath{from{transform:scale(1.06) translate3d(-.4%,0,0)}to{transform:scale(1.11) translate3d(.6%,-.8%,0)}}
.shade{z-index:-4;background:linear-gradient(90deg,rgba(7,3,11,.91),rgba(7,3,11,.72) 41%,rgba(7,3,11,.23) 69%,rgba(7,3,11,.32)),linear-gradient(180deg,rgba(7,3,11,.08),rgba(7,3,11,.04) 55%,rgba(7,3,11,.75));transition:opacity 1.15s ease,background 1s ease}
.glow{z-index:-3;background:radial-gradient(circle at 72% 52%,rgba(220,48,255,.32),transparent 27%);animation:glowPulse 4.5s ease-in-out infinite;transition:opacity 1s ease}
@keyframes glowPulse{50%{opacity:.66;transform:scale(1.08)}}
.particles{z-index:-2;pointer-events:none;overflow:hidden;transition:opacity .9s ease}
.particle{position:absolute;border-radius:50%;background:#f16bff;box-shadow:0 0 14px rgba(239,69,255,.9);opacity:.55;animation:particleFloat linear infinite}
@keyframes particleFloat{from{transform:translateY(15vh) scale(.7);opacity:0}20%{opacity:.65}to{transform:translateY(-115vh) translateX(50px) scale(1.3);opacity:0}}

.countdown-wrap{position:relative;z-index:3;width:min(780px,58vw);text-shadow:0 8px 30px rgba(0,0,0,.45);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.8,.2,1),filter .8s ease,visibility 0s linear .8s}
.intro-enter{animation:introReveal 1s cubic-bezier(.2,.8,.2,1) both}
@keyframes introReveal{from{opacity:0;transform:translateY(28px) scale(.96);filter:blur(8px)}to{opacity:1;transform:none;filter:blur(0)}}
.kicker,.launch-kicker{margin:0 0 10px;color:#ff8aff;font-size:clamp(11px,1vw,14px);font-weight:900;letter-spacing:.34em;text-transform:uppercase}
h1,h2,p{margin-top:0}
h1{margin:0 0 32px;font-size:clamp(58px,8vw,120px);line-height:.88;letter-spacing:-.06em;font-weight:950;background:linear-gradient(180deg,#fff,#f8c7ff 42%,#d057ff);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 22px rgba(219,68,255,.28))}
.countdown{display:flex;align-items:center;gap:14px;flex-wrap:nowrap;perspective:900px}
.time-box{position:relative;min-width:118px;padding:18px 18px 15px;border-radius:18px;border:1px solid rgba(255,108,255,.35);background:linear-gradient(180deg,rgba(44,13,60,.74),rgba(18,7,28,.74));backdrop-filter:blur(10px);box-shadow:0 18px 50px rgba(0,0,0,.30),inset 0 0 24px rgba(246,70,255,.08);text-align:center;overflow:hidden}
.time-box span{display:block;font-size:clamp(36px,5.5vw,74px);line-height:.9;font-weight:950;letter-spacing:-.04em;transform-origin:50% 55%;backface-visibility:hidden}
.time-box span.flip{animation:digitFlip .55s cubic-bezier(.2,.7,.2,1)}
@keyframes digitFlip{0%{transform:rotateX(0)}35%{transform:rotateX(-72deg) scale(.93);opacity:.2;filter:blur(2px)}60%{transform:rotateX(28deg) scale(1.08);opacity:1;filter:blur(0)}100%{transform:rotateX(0)}}
.seconds-box.pulse{animation:secondPulse .5s ease}
@keyframes secondPulse{50%{transform:scale(1.05);box-shadow:0 0 42px rgba(226,69,255,.25)}}
.time-box small{display:block;margin-top:10px;color:#d9c5e7;font-size:11px;font-weight:900;letter-spacing:.18em}
.colon{font-size:clamp(34px,5vw,64px);font-weight:900;color:#ff69f6;text-shadow:0 0 18px rgba(255,73,245,.6);animation:colonBlink 1s steps(1,end) infinite}
@keyframes colonBlink{50%{opacity:.35}}
.date-label{margin:22px 0 0;color:#d5c8de;font-size:14px;font-weight:700;letter-spacing:.08em}

.npc-wrap{position:absolute;right:4vw;bottom:-3vh;width:min(43vw,660px);height:88vh;display:flex;align-items:flex-end;justify-content:center;z-index:2;pointer-events:none;transition:right 1s cubic-bezier(.2,.8,.2,1),bottom 1s cubic-bezier(.2,.8,.2,1),width 1s cubic-bezier(.2,.8,.2,1),height 1s cubic-bezier(.2,.8,.2,1),opacity .9s ease,transform .9s cubic-bezier(.2,.8,.2,1),filter .9s ease}
.npc-enter{animation:npcEntrance 1.2s .22s cubic-bezier(.16,.84,.44,1) both}
@keyframes npcEntrance{from{opacity:0;transform:translateX(190px) scale(.9);filter:blur(8px)}to{opacity:1;transform:none;filter:blur(0)}}
.npc-wrap img{position:relative;z-index:2;max-width:100%;max-height:100%;object-fit:contain;filter:drop-shadow(0 0 4px rgba(255,255,255,.85)) drop-shadow(0 0 34px rgba(228,44,255,.82)) drop-shadow(0 28px 34px rgba(0,0,0,.55));animation:npcFloat 4.8s ease-in-out 1.25s infinite}
.npc-glow{position:absolute;right:3%;bottom:14%;width:72%;height:60%;border-radius:50%;background:radial-gradient(circle,rgba(217,48,255,.40),transparent 66%);filter:blur(32px);animation:npcGlow 3.7s ease-in-out infinite}
@keyframes npcFloat{50%{transform:translateY(-13px) rotate(.25deg)}}
@keyframes npcGlow{50%{transform:scale(1.12);opacity:.7}}

.launch-screen{position:absolute;inset:0;z-index:10;display:flex;align-items:center;justify-content:flex-start;padding:6vw;pointer-events:none;opacity:0;visibility:hidden;transform:scale(1.04);transition:opacity .9s ease,transform .9s cubic-bezier(.2,.8,.2,1),visibility 0s linear .9s}
.launch-inner{max-width:min(820px,58vw);filter:drop-shadow(0 20px 70px rgba(0,0,0,.55))}
.launch-screen h2{margin:0;display:flex;flex-direction:column;font-size:clamp(52px,7.3vw,118px);line-height:.90;letter-spacing:-.055em;background:linear-gradient(180deg,#fff,#ffd5ff 42%,#ec5cff);-webkit-background-clip:text;background-clip:text;color:transparent}
.launch-screen p:last-child{margin:22px 0 0;color:#f2e4f8;font-size:clamp(17px,2vw,24px);font-weight:700;max-width:32ch}
.flash{z-index:20;background:#fff;pointer-events:none;opacity:0}

.hero.launched .countdown-wrap{opacity:0;visibility:hidden;transform:translateY(-26px) scale(.92);filter:blur(18px)}
.hero.launched .npc-wrap{right:5vw;bottom:-1vh;width:min(32vw,470px);height:78vh;opacity:1;transform:scale(1.02)}
.hero.launched .bg{filter:saturate(1.18) brightness(.78)}
.hero.launched .shade{background:linear-gradient(90deg,rgba(22,3,30,.72),rgba(17,5,25,.54) 42%,rgba(7,3,11,.12)),linear-gradient(180deg,rgba(8,3,12,.16),rgba(7,3,11,.56))}
.hero.launched .launch-screen{opacity:1;visibility:visible;transform:scale(1);transition-delay:.18s,.18s,0s}
.hero.launched .flash{animation:launchFlash .85s ease-out}
@keyframes launchFlash{0%{opacity:0}15%{opacity:.92}100%{opacity:0}}


.hero.leaving .launch-screen{opacity:0!important;transform:scale(.98);filter:blur(8px);transition:opacity .55s ease,transform .55s ease,filter .55s ease}
.hero.leaving .npc-wrap{opacity:0!important;transform:translateX(45px) scale(.98)!important;filter:blur(8px)}
.hero.leaving .particles,.hero.leaving .glow{opacity:0!important}

.page-fade{position:fixed;inset:0;z-index:100;background:#000;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .75s ease,visibility 0s linear .75s}
.page-fade.show{opacity:1;visibility:visible;transition-delay:0s}

@media(max-width:1000px){.hero{align-items:flex-start;padding:110px 24px 36px}.countdown-wrap{width:100%;z-index:4}.npc-wrap{right:-7vw;width:58vw;height:58vh;opacity:.62}.time-box{min-width:100px}.launch-screen{align-items:flex-end;padding:24px 24px 40vh}.launch-inner{max-width:100%}.hero.launched .npc-wrap{right:-2vw;bottom:0;width:min(46vw,360px);height:48vh;opacity:.95}}
@media(max-width:720px){body{overflow:auto}.hero{min-height:100svh;padding:80px 16px 30px;align-items:flex-start}h1{font-size:clamp(48px,16vw,80px);margin-bottom:24px}.countdown{gap:7px}.time-box{min-width:0;flex:1;padding:14px 7px 12px;border-radius:14px}.time-box span{font-size:clamp(30px,10vw,48px)}.time-box small{font-size:8px;letter-spacing:.10em}.colon{font-size:28px}.npc-wrap{width:92vw;height:48vh;right:-24vw;bottom:0;opacity:.45}.date-label{font-size:12px;max-width:70%}.launch-screen{padding:24px 16px 34vh}.launch-screen h2{font-size:clamp(44px,15vw,78px)}.hero.launched .npc-wrap{right:-10vw;bottom:0;width:72vw;height:42vh;opacity:.98}.launch-screen p:last-child{font-size:16px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important}}