
body{margin:0;background:#18181E}
a{color:#C0ED14}a:hover{color:#D9FF4D}
.navlink{color:#D6D4E4;text-decoration:none;font-weight:500;position:relative}
.navlink::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:3px;border-radius:3px;background:#C0ED14;transform:scaleX(0);transform-origin:left;transition:transform .25s ease}
.navlink:hover{color:#FFFFFF}.navlink:hover::after{transform:scaleX(1)}
.logo{transition:transform .3s cubic-bezier(.34,1.56,.64,1)}.logo:hover{transform:rotate(-4deg) scale(1.06)}
.grid-bg{background-image:linear-gradient(#24232D 1px,transparent 1px),linear-gradient(90deg,#24232D 1px,transparent 1px);background-size:56px 56px;animation:gridpan 18s linear infinite}
@keyframes gridpan{to{background-position:56px 56px}}
.word{display:inline-block;opacity:0;animation:drop .8s cubic-bezier(.34,1.56,.64,1) forwards}
.w1{--r:-2deg;animation-delay:.1s}.w2{--r:2deg;animation-delay:.3s}
@keyframes drop{0%{opacity:0;transform:translateY(-80px) rotate(12deg) scale(.8)}100%{opacity:1;transform:translateY(0) rotate(var(--r))}}
.fade-up{opacity:0;animation:fadeup .7s ease forwards}
.d1{animation-delay:.6s}.d2{animation-delay:.75s}.d3{animation-delay:.9s}
@keyframes fadeup{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}

/* phone */
.phone{animation:float 6s ease-in-out infinite}
@keyframes float{0%,100%{transform:rotate(2deg) translateY(0)}50%{transform:rotate(-1deg) translateY(-16px)}}
.screen{background-size:cover;background-position:center;position:relative;overflow:hidden}
.gamelogo{animation:logobob 3s ease-in-out infinite}
@keyframes logobob{0%,100%{transform:translateY(0) rotate(-2deg) scale(1)}50%{transform:translateY(-8px) rotate(2deg) scale(1.04)}}
.playbtn{transition:transform .2s cubic-bezier(.34,1.56,.64,1);animation:ring 1.8s ease-out infinite}
.playbtn:hover{transform:scale(1.08)}.playbtn:active{transform:scale(.95)}
@keyframes ring{0%{box-shadow:0 8px 0 #7FA300,0 0 0 0 rgba(192,237,20,.7)}100%{box-shadow:0 8px 0 #7FA300,0 0 0 26px rgba(192,237,20,0)}}

/* floating cubes */
.cube{position:absolute;height:auto;filter:drop-shadow(0 14px 18px rgba(0,0,0,.45));animation:cube 5s ease-in-out infinite}
@keyframes cube{0%,100%{transform:translateY(0) rotate(var(--a))}50%{transform:translateY(-22px) rotate(calc(var(--a) + 14deg))}}

/* car drive band */
.road{position:relative;height:168px;overflow:hidden;background:#22212A;border-top:6px solid #2C2B36;border-bottom:6px solid #2C2B36}
.road::before{content:"";position:absolute;left:0;right:0;top:50%;height:6px;margin-top:-3px;background:repeating-linear-gradient(90deg,#C0ED14 0 40px,transparent 40px 80px);z-index:0}
.lane{position:absolute;left:0;right:0;height:84px}
.lane.up{top:0}.lane.down{bottom:0}
.drive{position:absolute;left:0;top:50%;display:block;height:auto;z-index:1;will-change:transform;filter:drop-shadow(0 6px 6px rgba(0,0,0,.45))}
.up .drive{animation:driveR 12s linear infinite}
.down .drive{animation:driveL 15s linear infinite}
@keyframes driveR{from{transform:translate(-240px,-50%)}to{transform:translate(calc(100vw + 40px),-50%)}}
@keyframes driveL{from{transform:translate(calc(100vw + 40px),-50%) scaleX(-1)}to{transform:translate(-240px,-50%) scaleX(-1)}}

/* boosters + steps */
.lift{transition:transform .3s cubic-bezier(.34,1.56,.64,1)}
.lift:hover{transform:translateY(-8px) rotate(-1deg)}
.lift:hover .boost{animation:wob .6s ease}
@keyframes wob{0%{transform:rotate(0) scale(1)}30%{transform:rotate(-14deg) scale(1.15)}60%{transform:rotate(10deg) scale(1.1)}100%{transform:none}}
.btn{transition:transform .2s cubic-bezier(.34,1.56,.64,1)}.btn:hover{transform:translateY(-3px)}.btn:active{transform:scale(.96)}
.soon{transition:transform .25s ease}.soon:hover{transform:translateY(-4px)}
@supports (animation-timeline: view()){.reveal{animation:rise linear both;animation-timeline:view();animation-range:entry 0% entry 45%}}
@keyframes rise{from{opacity:0;transform:translateY(60px)}to{opacity:1;transform:none}}
@media (max-width: 760px){.hide-sm{display:none !important}.hero-h{font-size:72px !important}.cube{display:none}.pad-sm{padding:28px 22px !important}}
@media (prefers-reduced-motion: reduce){*,*::before,*::after{animation:none !important;transition:none !important}.word,.fade-up{opacity:1}}
