/* ROCCO — official gta6dog.life palette, pushed further */
:root{
  --bg:oklch(13% .04 300); --card:oklch(18% .05 300); --muted:oklch(22% .05 300);
  --fg:oklch(98% .01 340); --mfg:oklch(75% .05 320);
  --pink:oklch(66% .27 355); --orange:oklch(76% .17 50); --cyan:oklch(85% .14 200);
  --sun:oklch(86% .16 85); --ink:oklch(10% .03 300); --violet:oklch(55% .25 300);
  --g-sunset:linear-gradient(180deg,oklch(18% .08 290) 0%,oklch(40% .2 330) 45%,oklch(66% .24 10) 70%,oklch(82% .16 65) 100%);
  --g-vice:linear-gradient(100deg,oklch(80% .16 60) 0%,oklch(66% .27 355) 50%,oklch(55% .25 300) 100%);
  --neon:0 0 30px oklch(66% .27 355/.5);
  --f-display:Anton,Impact,'Arial Narrow',sans-serif;
  --f-sans:'Barlow Condensed','Arial Narrow',sans-serif;
  --f-script:Yellowtail,cursive;
  --f-pixel:'Press Start 2P',monospace;
  --hud-h:28px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:auto;-webkit-text-size-adjust:100%;overflow-x:clip}
body{background:var(--bg);color:var(--fg);font:500 19px/1.45 var(--f-sans);overflow-x:clip;transition:filter .6s}
body.has-paw,body.has-paw a,body.has-paw button{cursor:url(assets/img/cursor-paw.png) 8 4,auto}
body.is-sunset{filter:saturate(1.6) hue-rotate(-12deg) brightness(1.08)}
img,video,canvas{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0}
main,section,footer{position:relative}
section{overflow:hidden}
.wrap{width:min(1200px,92vw);margin:0 auto;position:relative;z-index:2}
.grain{position:fixed;inset:-50%;z-index:90;pointer-events:none;background:url(assets/img/grain.png);opacity:.08;animation:grain 1s steps(6) infinite}
@keyframes grain{0%{transform:translate(0,0)}20%{transform:translate(-4%,3%)}40%{transform:translate(3%,-5%)}60%{transform:translate(-6%,-2%)}80%{transform:translate(5%,4%)}100%{transform:translate(0,0)}}

/* type */
.title{font:400 clamp(44px,8vw,112px)/.88 var(--f-display);text-transform:uppercase;letter-spacing:.005em;margin:.1em 0 .35em;filter:drop-shadow(5px 5px 0 var(--ink))}
.vice{background:var(--g-vice);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-stroke:1.5px var(--ink);padding-right:.05em}
.kicker.script,.script{font:400 clamp(26px,3.4vw,40px)/1 var(--f-script);color:var(--orange);text-shadow:0 0 18px oklch(76% .17 50/.55);transform:rotate(-3deg);display:inline-block}
.lede{max-width:60ch;color:var(--mfg);font-size:clamp(18px,1.6vw,22px);margin-bottom:28px}
.ghost{position:absolute;font:400 clamp(120px,24vw,360px)/.8 var(--f-display);color:transparent;-webkit-text-stroke:2px oklch(66% .27 355/.22);white-space:nowrap;pointer-events:none;z-index:1;user-select:none}

/* sticker buttons (official .gta-btn) */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.4em;font:400 18px/1 var(--f-display);text-transform:uppercase;letter-spacing:.04em;padding:14px 22px;border:3px solid var(--ink);box-shadow:5px 5px 0 var(--ink);background:var(--fg);color:var(--ink);transition:transform .15s,box-shadow .15s,filter .2s;white-space:nowrap;cursor:pointer;min-height:48px}
.btn:hover{transform:translate(-2px,-2px);box-shadow:7px 7px 0 var(--ink)}
.btn:active{transform:translate(3px,3px);box-shadow:2px 2px 0 var(--ink)}
.btn:focus-visible{outline:3px solid var(--cyan);outline-offset:3px}
.btn-buy{background:var(--g-vice);color:var(--fg);text-shadow:2px 2px 0 var(--ink);animation:glow 2s ease-in-out infinite}
.btn-sun{background:var(--sun)}
.btn-cyan{background:var(--cyan)}
.btn-ink{background:var(--ink);color:var(--fg);border-color:var(--fg);box-shadow:5px 5px 0 var(--pink)}
.btn-ink:hover{box-shadow:7px 7px 0 var(--pink)}
.btn-chip{padding:10px 14px;font-size:15px;min-height:42px;background:var(--fg)}
.btn-copy{background:var(--orange);padding:10px 16px;min-height:44px}
.btn-lg{font-size:22px;padding:18px 30px}
.btn.is-tba::after{content:'TBA';font:400 9px/1 var(--f-pixel);background:var(--ink);color:var(--sun);padding:4px 5px;margin-left:4px}
@keyframes glow{0%,100%{filter:drop-shadow(0 0 0 transparent)}50%{filter:drop-shadow(0 0 16px oklch(66% .27 355/.7))}}

/* loader */
.loader{position:fixed;inset:0;z-index:100;display:grid;place-items:center;align-content:center;gap:18px;background:var(--bg);clip-path:polygon(0 0,100% 0,100% 100%,0 100%);overflow:hidden;transition:opacity .25s}
.ld-sky{position:absolute;inset:0;background:var(--g-sunset);opacity:.35}
.ld-glow{position:absolute;width:80vmax;height:80vmax;border-radius:50%;background:radial-gradient(circle,oklch(66% .27 355/.45),transparent 60%)}
.ld-banner{position:relative;width:min(980px,94vw);aspect-ratio:3/1;border:4px solid var(--ink);box-shadow:8px 8px 0 var(--ink),var(--neon);overflow:hidden}
.ld-banner img{width:100%;height:100%;object-fit:cover}
.ld-logo{position:relative;width:96px;height:96px;margin-top:-64px;border-radius:50%;border:4px solid var(--ink);box-shadow:var(--neon)}
.ld-tag{position:relative;font:400 clamp(30px,5vw,52px)/1 var(--f-script);color:var(--orange)}
.ld-track{position:relative;width:min(420px,70vw);height:8px;border:2px solid var(--ink);background:var(--card)}
.ld-track i{position:absolute;inset:0;background:var(--g-vice);transform-origin:left;transform:scaleX(0)}
.ld-count{position:relative;font:400 12px var(--f-pixel);color:var(--mfg)}
.ld-skip{position:absolute;right:18px;bottom:18px;font:400 10px var(--f-pixel);color:var(--mfg);padding:10px;cursor:pointer}

/* hud + prefs */
.hud{position:fixed;top:0;left:0;right:0;height:var(--hud-h);z-index:60;display:flex;align-items:center;gap:18px;padding:0 14px;font:400 9px/1 var(--f-pixel);color:var(--fg);background:linear-gradient(90deg,oklch(10% .03 300/.92),oklch(18% .08 300/.85));border-bottom:2px solid var(--ink)}
.hud-hype{display:flex;align-items:center;gap:8px}
.hud-hype i{display:block;width:90px;height:8px;background:var(--g-vice);transform-origin:left;border:1px solid var(--ink);box-shadow:0 0 10px oklch(66% .27 355/.6)}
.hud-bones{color:var(--sun)}
.hud-radio{margin-left:auto;color:var(--cyan);transition:filter .2s;margin-right:190px}
.hud-radio.is-tune{filter:blur(1px) contrast(2)}
.prefs{position:fixed;top:2px;right:8px;z-index:61;display:flex;gap:6px}
.pref-btn{font:400 8px/1 var(--f-pixel);padding:6px 8px;background:var(--card);border:2px solid var(--ink);color:var(--fg);cursor:pointer}
.pref-btn[aria-pressed="true"]{background:var(--pink)}
.title-card{position:fixed;top:calc(var(--hud-h) + 74px);left:50%;transform:translateX(-50%);z-index:55;text-align:center;pointer-events:none;padding:10px 22px;background:oklch(10% .03 300/.82);border:3px solid var(--ink);box-shadow:5px 5px 0 var(--pink)}
.tc-kicker{font:400 9px var(--f-pixel);color:var(--sun)}
.tc-title{font:400 clamp(20px,2.4vw,30px)/1 var(--f-display);text-transform:uppercase;margin-top:6px;background:var(--g-vice);-webkit-background-clip:text;background-clip:text;color:transparent}
.pager{position:fixed;left:14px;bottom:16px;z-index:55;max-width:min(380px,80vw);font:400 9px/1.6 var(--f-pixel);color:var(--cyan);background:oklch(10% .03 300/.9);border:2px solid var(--cyan);padding:10px 12px;pointer-events:none}

/* header */
.site-header{position:fixed;top:var(--hud-h);left:0;right:0;z-index:50;display:flex;align-items:center;gap:20px;padding:10px 3vw;transition:background .3s,backdrop-filter .3s}
.site-header.is-solid{background:oklch(13% .04 300/.82);backdrop-filter:blur(10px);border-bottom:2px solid var(--ink)}
.brand{display:flex;align-items:center;gap:10px}
.brand img{width:44px;height:44px;border-radius:50%;border:3px solid var(--ink);box-shadow:var(--neon)}
.brand-name{font:400 28px/1 var(--f-display);background:var(--g-vice);-webkit-background-clip:text;background-clip:text;color:transparent}
.nav{display:flex;gap:22px;margin:0 auto;font:700 17px/1 var(--f-sans);text-transform:uppercase;letter-spacing:.06em}
.nav a{position:relative;padding:6px 0}
.nav a::after{content:'';position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--g-vice);transform:scaleX(0);transform-origin:left;transition:transform .3s}
.nav a:hover::after{transform:scaleX(1)}
.header-cta{display:flex;gap:10px}
.header-cta .btn{padding:10px 16px;font-size:15px;min-height:42px}
.nav-toggle{display:none;font-size:24px;width:44px;height:44px;border:3px solid var(--ink);background:var(--fg);color:var(--ink);box-shadow:3px 3px 0 var(--ink);cursor:pointer}

/* hero */
.hero{min-height:100svh;display:flex;align-items:flex-end;padding:calc(var(--hud-h) + 90px) 0 7vh;isolation:isolate}
.hero-sky{position:absolute;inset:0;z-index:-2;background:var(--g-sunset);overflow:hidden}
.hero-sky::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,oklch(13% .04 300/.55),transparent 40%,oklch(13% .04 300/.9) 92%)}
.hero-sundisc{position:absolute;left:4%;top:16%;width:min(46vw,620px);aspect-ratio:1;border-radius:50%;background:linear-gradient(180deg,oklch(86% .16 85) 0%,oklch(76% .17 50) 45%,oklch(66% .27 355) 100%);-webkit-mask-image:linear-gradient(180deg,#000 52%,transparent 52%),repeating-linear-gradient(180deg,#000 0 14px,transparent 14px 24px);mask-image:linear-gradient(180deg,#000 52%,transparent 52%),repeating-linear-gradient(180deg,#000 0 14px,transparent 14px 24px);opacity:.55;filter:blur(.5px) drop-shadow(0 0 60px oklch(66% .27 355/.8))}
.hero-bg{position:absolute;top:0;bottom:0;left:30%;right:0;z-index:-1;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 22%);mask-image:linear-gradient(90deg,transparent 0,#000 22%)}
.hero-par{position:absolute;top:0;bottom:0;left:0;height:100%;aspect-ratio:16/9;will-change:transform}
.hero-img{width:100%;height:100%;object-fit:cover}
.hero-sun{position:absolute;inset:0;background:linear-gradient(180deg,oklch(18% .08 290/.35) 0%,transparent 30%,transparent 55%,oklch(40% .2 330/.4) 75%,oklch(13% .04 300) 100%);mix-blend-mode:normal}
.hero-shade{position:absolute;inset:0;background:linear-gradient(90deg,oklch(13% .04 300/.55) 0%,transparent 35%),linear-gradient(180deg,transparent 60%,oklch(13% .04 300/.85))}
.hero-grid{position:absolute;left:-20%;right:-20%;bottom:-2%;height:34%;z-index:1;background:linear-gradient(transparent 0 0),repeating-linear-gradient(90deg,oklch(66% .27 355/.4) 0 2px,transparent 2px 80px),repeating-linear-gradient(0deg,oklch(66% .27 355/.4) 0 2px,transparent 2px 40px);transform:perspective(400px) rotateX(62deg);transform-origin:bottom;mask-image:linear-gradient(transparent,#000 70%);opacity:.55;animation:gridrun 2.4s linear infinite}
@keyframes gridrun{to{background-position:0 0,0 0,0 40px}}
.hero-ghost{display:none;position:absolute;bottom:4vh;left:0;font:400 clamp(110px,20vw,300px)/.8 var(--f-display);color:transparent;-webkit-text-stroke:2px oklch(98% .01 340/.18);white-space:nowrap;pointer-events:none;z-index:0}
.hero-inner{width:min(1200px,92vw);margin:0 auto;position:relative;z-index:2}
.hero-title{font:400 clamp(96px,17vw,250px)/.82 var(--f-display);text-transform:uppercase;background:var(--g-vice);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-stroke:3px var(--ink);filter:drop-shadow(6px 6px 0 var(--ink)) drop-shadow(0 0 30px oklch(66% .27 355/.45));margin:.05em 0 .12em;overflow:hidden;padding:.06em .04em 0 0}
.hero-title .ch{display:inline-block;background:var(--g-vice);background-size:var(--n,500%) 100%;-webkit-background-clip:text;background-clip:text}
.hero-title .ch:nth-child(1){background-position:0 0}.hero-title .ch:nth-child(2){background-position:25% 0}.hero-title .ch:nth-child(3){background-position:50% 0}.hero-title .ch:nth-child(4){background-position:75% 0}.hero-title .ch:nth-child(5){background-position:100% 0}
.hero-tag{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:14px}
.vice-chip,.eth-chip{font:400 clamp(15px,1.6vw,20px)/1 var(--f-display);text-transform:uppercase;padding:8px 12px;border:3px solid var(--ink);box-shadow:4px 4px 0 var(--ink);transform:rotate(-2deg)}
.vice-chip{background:var(--sun);color:var(--ink)}
.eth-chip{background:var(--cyan);color:var(--ink);transform:rotate(1.5deg)}
.hero-sub{max-width:34ch;font-size:clamp(19px,1.9vw,24px);color:var(--fg);text-shadow:0 2px 12px oklch(10% .03 300/.9);margin-bottom:20px}
.hero-sub b{color:var(--orange)}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:18px}
.ca-panel{max-width:560px;background:oklch(18% .05 300/.92);border:4px solid var(--ink);box-shadow:8px 8px 0 var(--ink);padding:12px 14px}
.ca-label{font:400 9px var(--f-pixel);color:var(--sun);margin-bottom:8px}
.ca-row{display:flex;gap:10px;align-items:center}
.ca-full{flex:1;min-width:0;font:400 clamp(16px,1.6vw,20px)/1.2 var(--f-display);letter-spacing:.04em;color:var(--fg);overflow-wrap:anywhere}
.ca-warn{font-size:14px;color:var(--mfg);margin-top:8px}
.hero-barker{position:absolute;right:4vw;bottom:2vh;z-index:3;width:clamp(150px,19vw,280px);cursor:pointer;filter:drop-shadow(0 12px 18px oklch(10% .03 300/.7))}
.hero-barker img{width:100%;height:auto}
.bubble{position:absolute;top:-8%;left:-18%;font:400 clamp(18px,2vw,28px)/1 var(--f-display);background:var(--fg);color:var(--ink);padding:8px 12px;border:3px solid var(--ink);box-shadow:4px 4px 0 var(--pink);transform:rotate(-8deg);z-index:2}
.bubble::after{content:'';position:absolute;right:14px;bottom:-12px;border:8px solid transparent;border-top-color:var(--ink)}
.hero-barker .bubble{animation:bubble 1.4s ease-in-out infinite}
@keyframes bubble{0%,100%{transform:rotate(-8deg) scale(1)}50%{transform:rotate(-4deg) scale(1.12)}}

/* marquees */
.tape-outer{position:relative;z-index:5;margin:-28px 0 0;padding:20px 0;overflow:hidden}
.tape-wrap{overflow:hidden;background:var(--g-vice);border-block:4px solid var(--ink);transform:rotate(-2deg);margin:0 -3vw}
.tape-alt{background:var(--sun);transform:rotate(1.4deg);margin-top:-6px}
.tape{display:flex;width:max-content;font:400 clamp(24px,3vw,40px)/1 var(--f-display);text-transform:uppercase;padding:12px 0;color:var(--fg);text-shadow:3px 3px 0 var(--ink)}
.tape-alt .tape{color:var(--ink);text-shadow:none}
.tape span,.tape b{padding:0 18px;white-space:nowrap}
.tape b{color:var(--sun)}
.tape-alt .tape b{color:var(--pink)}

/* trailer */
.trailer{padding:16vh 0 14vh;background:radial-gradient(60% 60% at 80% 40%,oklch(40% .2 330/.45),transparent 70%),var(--bg)}
.trailer-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:6vw;align-items:center}
.trailer-tv{perspective:1200px}
.tv-frame{position:relative;width:min(380px,80vw);margin:0 auto;aspect-ratio:450/692;border:6px solid var(--ink);border-radius:26px;overflow:hidden;box-shadow:12px 12px 0 var(--ink),0 0 60px oklch(66% .27 355/.5);background:var(--ink);transform-style:preserve-3d}
.tv-frame video{width:100%;height:100%;object-fit:cover;cursor:pointer}
.tv-rec{position:absolute;top:12px;left:12px;font:400 9px var(--f-pixel);color:var(--fg);background:oklch(66% .27 355/.85);padding:6px 8px;animation:blink 1.2s steps(2) infinite}
@keyframes blink{50%{opacity:.4}}
.tv-cap{text-align:center;font-size:14px;color:var(--mfg);margin-top:16px}

/* manifesto */
.manifesto{min-height:100vh;display:flex;align-items:center;padding:12vh 0}
.man-bg{position:absolute;inset:0;z-index:0}
.man-bg img{width:100%;height:100%;object-fit:cover;filter:brightness(.24) saturate(1.3) blur(3px);transform-origin:60% 50%}
.man-bg::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,var(--bg),transparent 25%,transparent 70%,var(--bg))}
.man-inner{position:relative;z-index:2;width:min(1100px,92vw);margin:0 auto}
.manifesto .ghost{right:-4vw;top:-6vh;opacity:.7}
.man-copy{display:grid;gap:18px;max-width:880px}
.man-copy p{font:400 clamp(24px,3vw,40px)/1.15 var(--f-display);text-transform:uppercase}
.w{opacity:.16;transition:opacity .25s,color .25s}
.w.is-on{opacity:1}
.w.is-hot.is-on{color:var(--orange);text-shadow:0 0 18px oklch(76% .17 50/.6)}

/* SPRINT */
.sprint{height:420vh;overflow:visible;background:var(--bg)}
.sprint-pin{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;isolation:isolate}
.sp-layer{position:absolute;inset:0;will-change:transform}
.sp-layer img{width:100%;height:100%;object-fit:cover}
.sp-far img{object-position:50% 40%}
.sp-street{transform-origin:58% 60%;clip-path:polygon(130% 0,100% 0,100% 100%,100% 100%)}
.sp-street img{object-position:50% 60%;filter:saturate(1.15)}
.sp-glow{position:absolute;inset:0;background:radial-gradient(50% 40% at 55% 55%,oklch(76% .17 50/.45),transparent 70%),linear-gradient(180deg,transparent 55%,oklch(13% .04 300/.75));mix-blend-mode:screen;pointer-events:none}
.sp-streaks{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:2}
.sp-words{position:absolute;inset:0;z-index:3;display:grid;place-items:center;pointer-events:none}
.sp-words span{grid-area:1/1;align-self:start;margin-top:21vh;font:400 clamp(60px,12vw,190px)/.85 var(--f-display);text-transform:uppercase;background:var(--g-vice);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-stroke:3px var(--ink);filter:drop-shadow(6px 6px 0 var(--ink));opacity:0;white-space:nowrap}
.sp-cards{position:absolute;inset:0;z-index:4;pointer-events:none}
.sp-card{position:absolute;left:50%;top:50%;width:clamp(170px,24vw,330px);margin:calc(clamp(170px,24vw,330px) * -.5) 0 0 calc(clamp(170px,24vw,330px) * -.5);background:var(--fg);padding:10px 10px 0;border:4px solid var(--ink);box-shadow:10px 10px 0 var(--ink),0 0 40px oklch(66% .27 355/.4);opacity:0;will-change:transform}
.sp-card img{width:100%;aspect-ratio:1/.95;object-fit:cover}
.sp-card figcaption{font:400 clamp(20px,2vw,30px)/1 var(--f-script);color:var(--pink);text-align:center;padding:8px 0 10px}
.sp-rocco{position:absolute;left:50%;bottom:7vh;z-index:6;width:clamp(240px,30vw,440px);will-change:transform}
.sp-rocco img{width:100%;height:auto;filter:drop-shadow(0 0 22px oklch(76% .17 50/.55)) drop-shadow(0 18px 14px oklch(10% .03 300/.6))}
.sp-shadow{position:absolute;left:12%;right:12%;bottom:-2%;height:16px;border-radius:50%;background:radial-gradient(oklch(10% .03 300/.65),transparent 70%);z-index:-1}
.sp-barker{position:absolute;right:3vw;bottom:2vh;z-index:7;width:clamp(120px,14vw,210px);transform-origin:bottom center}
.sp-barker img{width:100%;height:auto;filter:drop-shadow(0 10px 12px oklch(10% .03 300/.7))}
.sp-barker.is-hop{animation:hop .5s cubic-bezier(.2,1.6,.4,1)}
@keyframes hop{0%{transform:scale(1)}40%{transform:scale(1.12,.9) translateY(-10px)}100%{transform:scale(1)}}
.sp-barker .bubble{opacity:0;transform:scale(.4) rotate(-12deg);left:-40%;top:-14%}
.sp-barker .bubble.is-pop{animation:pop 1.6s cubic-bezier(.2,1.6,.4,1) forwards}
@keyframes pop{0%{opacity:0;transform:scale(.3) rotate(-14deg)}15%{opacity:1;transform:scale(1.15) rotate(-6deg)}70%{opacity:1;transform:scale(1) rotate(-6deg)}100%{opacity:0;transform:scale(.9) rotate(-6deg)}}
.sp-palm{position:absolute;bottom:-6vh;left:0;height:118vh;width:auto;max-width:none;z-index:8;filter:blur(3px) brightness(.55);opacity:0;pointer-events:none;will-change:transform}
.sp-vignette{position:absolute;inset:0;z-index:9;pointer-events:none;background:radial-gradient(120% 90% at 50% 50%,transparent 55%,oklch(10% .03 300/.75))}
.sp-meter{position:absolute;left:3vw;top:calc(var(--hud-h) + 84px);z-index:10;display:flex;align-items:baseline;gap:8px;background:oklch(10% .03 300/.8);border:3px solid var(--ink);box-shadow:5px 5px 0 var(--pink);padding:8px 12px}
.sp-meter small{font:400 9px var(--f-pixel);color:var(--sun)}
.sp-meter b{font:400 34px/1 var(--f-display);color:var(--fg);font-variant-numeric:tabular-nums}
.sp-progress{position:absolute;left:0;right:0;bottom:0;height:6px;z-index:10;background:oklch(10% .03 300/.6)}
.sp-progress i{display:block;height:100%;background:var(--g-vice);transform-origin:left;transform:scaleX(0)}
.sp-stamp{position:absolute;left:50%;top:44%;z-index:11;font:400 clamp(80px,15vw,220px)/.8 var(--f-display);text-align:center;color:var(--fg);-webkit-text-stroke:4px var(--ink);text-shadow:8px 8px 0 var(--pink);transform:translate(-50%,-50%) rotate(-8deg) scale(2.4);opacity:0;transition:transform .5s cubic-bezier(.2,1.6,.4,1),opacity .3s;pointer-events:none}
.sp-stamp.is-on{opacity:1;transform:translate(-50%,-50%) rotate(-8deg) scale(1)}

/* MEMES */
.memes{padding:16vh 0;background:var(--g-sunset)}
.memes::before{content:'';position:absolute;inset:0;background:radial-gradient(70% 50% at 50% 0%,oklch(13% .04 300/.85),transparent 70%),linear-gradient(180deg,var(--bg) 0%,transparent 18%,transparent 82%,var(--bg) 100%);z-index:0}
.ghost-memes{top:6vh;left:-2vw;-webkit-text-stroke-color:oklch(98% .01 340/.18)}
.memes .lede{color:var(--fg)}
.meme-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:28px;perspective:1400px;margin-top:10px}
.meme{position:relative;display:block;background:var(--ink);border:4px solid var(--ink);box-shadow:8px 8px 0 var(--ink);transform:rotate(var(--r,0));transform-style:preserve-3d;overflow:hidden;transition:box-shadow .2s}
.meme:hover{box-shadow:12px 12px 0 var(--pink);z-index:3}
.meme img{width:100%;aspect-ratio:1;object-fit:cover;transition:transform .6s}
.meme:hover img{transform:scale(1.06)}
.meme::after{content:'';position:absolute;inset:0;background:radial-gradient(circle at var(--mx,50%) var(--my,50%),oklch(98% .01 340/.22),transparent 45%);pointer-events:none;mix-blend-mode:overlay}
.m-wide{grid-column:span 2}
.m-wide img{aspect-ratio:2/1}
.cap{position:absolute;left:6px;right:6px;text-align:center;font:400 clamp(17px,1.7vw,26px)/1.02 var(--f-display);text-transform:uppercase;color:#fff;-webkit-text-stroke:1.5px #000;paint-order:stroke fill;text-shadow:2px 2px 0 #000,-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000;letter-spacing:.01em;pointer-events:none}
.cap.top{top:10px}
.cap.bot{bottom:10px}

/* PROFILE */
.profile{padding:16vh 0;background:radial-gradient(60% 60% at 20% 50%,oklch(55% .25 300/.35),transparent 70%),var(--bg)}
.profile-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:6vw;align-items:center}
.holo-wrap{perspective:1000px;display:grid;place-items:center}
.holo-card{position:relative;width:min(380px,82vw);padding:16px;background:var(--card);border:4px solid var(--ink);border-radius:18px;box-shadow:10px 10px 0 var(--ink),var(--neon);transform-style:preserve-3d;transition:transform .2s ease-out;overflow:hidden}
.holo-card img{width:100%;border-radius:50%;border:4px solid var(--ink)}
.holo-sheen{position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(115deg,transparent 20%,oklch(85% .14 200/.35) 35%,oklch(66% .27 355/.35) 45%,oklch(86% .16 85/.35) 55%,transparent 70%);background-size:250% 250%;background-position:var(--hx,50%) var(--hy,50%);mix-blend-mode:color-dodge}
.holo-name{font:400 54px/1 var(--f-display);text-align:center;margin-top:12px;background:var(--g-vice);-webkit-background-clip:text;background-clip:text;color:transparent}
.holo-sub{text-align:center;font:400 9px var(--f-pixel);color:var(--sun);margin-top:6px}
.holo-stats{display:flex;justify-content:space-between;margin-top:14px;font:400 18px var(--f-display);border-top:2px dashed var(--muted);padding-top:10px}
.stats{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:28px}
.stats div{background:var(--card);border:3px solid var(--ink);box-shadow:4px 4px 0 var(--ink);padding:10px 14px}
.stats dt{font:400 9px var(--f-pixel);color:var(--orange);margin-bottom:6px}
.stats dd{font:700 20px/1.15 var(--f-sans)}
.ach-title{font:400 28px/1 var(--f-display);text-transform:uppercase;margin-bottom:12px}
.ach{list-style:none;display:flex;flex-wrap:wrap;gap:10px}
.ach li{font:700 17px/1 var(--f-sans);text-transform:uppercase;padding:10px 12px;background:var(--g-vice);border:3px solid var(--ink);box-shadow:3px 3px 0 var(--ink);text-shadow:1px 1px 0 var(--ink)}
.ach li::before{content:'★ ';color:var(--sun)}

/* HYPE */
.hype{padding:14vh 0;background:var(--bg)}
.levels{list-style:none;display:grid;gap:12px;margin-bottom:48px}
.levels li{display:grid;grid-template-columns:70px 1fr 1.2fr;gap:16px;align-items:center;background:var(--card);border:3px solid var(--ink);box-shadow:5px 5px 0 var(--ink);padding:14px 16px}
.lv{font:400 10px var(--f-pixel);color:var(--sun)}
.lv-name{font:400 clamp(20px,2.2vw,30px)/1 var(--f-display);text-transform:uppercase}
.lv-bar{height:14px;background:var(--muted);border:2px solid var(--ink);overflow:hidden}
.lv-bar i{display:block;height:100%;background:var(--g-vice);transform:scaleX(0);transform-origin:left;transition:transform 1.2s cubic-bezier(.2,.8,.2,1)}
.levels li.is-in .lv-bar i{transform:scaleX(var(--w))}
.levels li[data-level="1"]{--w:.17}.levels li[data-level="2"]{--w:.34}.levels li[data-level="3"]{--w:.5}.levels li[data-level="4"]{--w:.67}.levels li[data-level="5"]{--w:.84}.levels li[data-level="6"]{--w:1}
.levels li[data-level="6"]{background:var(--g-vice)}
.levels li[data-level="6"] .lv{color:var(--ink)}
.facts{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.facts article{background:var(--card);border:4px solid var(--ink);box-shadow:8px 8px 0 var(--ink);padding:22px;text-align:center}
.facts strong{display:block;font:400 clamp(48px,6vw,84px)/1 var(--f-display);background:var(--g-vice);-webkit-background-clip:text;background-clip:text;color:transparent}
.facts span{font:700 16px/1.2 var(--f-sans);text-transform:uppercase;color:var(--mfg)}

/* gallery */
.gallery{padding:14vh 0;background:linear-gradient(180deg,var(--bg),oklch(18% .08 290))}
.hangar-stage{position:relative;aspect-ratio:16/9;border:4px solid var(--ink);box-shadow:10px 10px 0 var(--ink),var(--neon);overflow:hidden;background:var(--ink);touch-action:pan-y}
.hangar-slide{position:absolute;inset:0;visibility:hidden}
.hangar-slide.is-on{visibility:visible}
.hangar-slide img{width:100%;height:100%;object-fit:cover}
.hangar-slide figcaption{position:absolute;left:18px;bottom:16px;font:400 clamp(30px,4vw,56px)/1 var(--f-script);color:var(--fg);text-shadow:0 0 18px oklch(66% .27 355/.8),3px 3px 0 var(--ink)}
.hangar-nav{display:flex;align-items:center;justify-content:center;gap:20px;margin-top:22px}
.hangar-count{font:400 12px var(--f-pixel)}

/* coin */
.coin{padding:14vh 0;background:radial-gradient(50% 60% at 70% 50%,oklch(66% .27 355/.3),transparent 70%),oklch(18% .08 290)}
.coin-grid{display:grid;grid-template-columns:1fr 1fr;gap:4vw;align-items:center}
.coin-wrap{position:relative}
.coin-wrap canvas,.coin-fallback{width:100%;aspect-ratio:1;touch-action:pan-y;cursor:grab}
.coin-hint{text-align:center;font:400 9px var(--f-pixel);color:var(--mfg)}

/* howto */
.howto{padding:14vh 0;background:var(--bg)}
.howto-stage{position:relative;padding-top:120px}
.route{position:absolute;top:0;left:0;width:100%;height:150px;color:var(--pink);opacity:.8}
.follower{position:absolute;top:0;left:0;width:110px;z-index:3;pointer-events:none}
.follower img{width:100%}
.steps{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.steps li{background:var(--card);border:4px solid var(--ink);box-shadow:8px 8px 0 var(--ink);padding:20px;display:flex;flex-direction:column;gap:10px;align-items:flex-start}
.steps li:nth-child(odd){transform:rotate(-1deg)}.steps li:nth-child(even){transform:rotate(1deg)}
.step-n{font:400 56px/1 var(--f-display);background:var(--g-vice);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-stroke:1.5px var(--ink)}
.steps h3{font:400 28px/1 var(--f-display);text-transform:uppercase}
.steps p{color:var(--mfg);font-size:17px;flex:1}

/* chart */
.chart{padding:12vh 0;background:oklch(18% .08 290)}
.chart-poster{position:relative;display:block;border:4px solid var(--ink);box-shadow:10px 10px 0 var(--ink);overflow:hidden}
.chart-poster img{width:100%;aspect-ratio:3/1;object-fit:cover;filter:brightness(.55) saturate(1.3);transition:transform .6s,filter .4s}
.chart-poster:hover img{transform:scale(1.04);filter:brightness(.7) saturate(1.4)}
.chart-cta{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) rotate(-2deg);font:400 clamp(22px,3vw,40px)/1 var(--f-display);text-transform:uppercase;background:var(--fg);color:var(--ink);border:3px solid var(--ink);box-shadow:6px 6px 0 var(--pink);padding:14px 20px;white-space:nowrap}
.chart-cta em{font-style:normal;color:var(--pink)}
.venue-row{display:flex;flex-wrap:wrap;gap:14px;margin-top:26px}

/* faq */
.faq{padding:12vh 0;background:var(--bg)}
.faq-list{display:grid;gap:12px;max-width:900px}
.faq details{background:var(--card);border:3px solid var(--ink);box-shadow:5px 5px 0 var(--ink)}
.faq summary{font:400 clamp(20px,2vw,26px)/1.1 var(--f-display);text-transform:uppercase;padding:16px 18px;cursor:pointer;list-style:none}
.faq summary::after{content:'+';float:right;color:var(--pink)}
.faq details[open] summary::after{content:'–'}
.faq details p{padding:0 18px 16px;color:var(--mfg)}
.faq code{color:var(--sun);font-family:var(--f-display)}

/* footer */
.site-footer{padding:18vh 0 140px;overflow:hidden;text-align:center}
.ft-bg{position:absolute;inset:0;z-index:0}
.ft-bg img{width:100%;height:100%;object-fit:cover;filter:brightness(.42) saturate(1.2)}
.ft-bg::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,var(--bg),oklch(13% .04 300/.2) 40%,oklch(13% .04 300/.85))}
.ft-inner{position:relative;z-index:2;width:min(1000px,92vw);margin:0 auto}
.ft-title{font-size:clamp(54px,9vw,140px)}
.ft-barker{width:150px;margin:0 auto 10px}
.footer-cta{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-bottom:22px}
.ca-mini{font-size:16px;color:var(--mfg);margin-bottom:22px}
.ca-mini code{color:var(--sun);font-family:var(--f-display);letter-spacing:.04em}
.disclaimer{max-width:760px;margin:0 auto 14px;font-size:15px;color:var(--mfg)}
.copy{font:400 9px var(--f-pixel);color:var(--mfg)}

/* dock, toast, fx */
.dock{position:fixed;left:50%;bottom:14px;z-index:58;display:flex;gap:8px;padding:8px;background:oklch(13% .04 300/.92);border:3px solid var(--ink);box-shadow:5px 5px 0 var(--pink);transform:translate(-50%,140%);transition:transform .4s cubic-bezier(.2,1.4,.4,1)}
.dock.is-on{transform:translate(-50%,0)}
.dock .btn{padding:10px 14px;font-size:15px;min-height:42px}
.toast{position:fixed;left:50%;bottom:90px;z-index:95;transform:translate(-50%,30px);opacity:0;pointer-events:none;font:400 18px/1.2 var(--f-display);text-transform:uppercase;background:var(--sun);color:var(--ink);border:3px solid var(--ink);box-shadow:5px 5px 0 var(--pink);padding:12px 18px;transition:all .35s cubic-bezier(.2,1.4,.4,1);max-width:90vw;text-align:center}
.toast.is-on{opacity:1;transform:translate(-50%,0)}
.flyer{position:fixed;left:0;top:0;width:150px;z-index:57;pointer-events:none;opacity:0}
.fx-canvas{position:fixed;inset:0;z-index:94;pointer-events:none}

/* responsive */
@media (max-width:1000px){
  .nav{display:none;position:absolute;top:100%;left:3vw;right:3vw;flex-direction:column;gap:0;background:var(--card);border:3px solid var(--ink);box-shadow:6px 6px 0 var(--ink);padding:8px 16px}
  .nav.is-open{display:flex}
  .nav a{padding:12px 0;border-bottom:1px solid var(--muted)}
  .nav-toggle{display:block;margin-left:auto}
  .header-cta{display:none}
  .trailer-grid,.profile-grid,.coin-grid{grid-template-columns:1fr}
  .meme-grid{grid-template-columns:repeat(2,1fr);gap:18px}
  .steps{grid-template-columns:1fr 1fr}
  .facts{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  body{font-size:17px}
  :root{--hud-h:24px}
  .hud{gap:10px;padding:0 8px;font-size:7px}
  .hud-hype i{width:46px}
  .hud-radio{display:none}
  .pref-btn{font-size:7px;padding:5px 6px}
  .prefs{top:1px}
  .site-header{padding:6px 4vw}
  .brand img{width:36px;height:36px}
  .brand-name{font-size:24px}
  .hero{padding:calc(var(--hud-h) + 62px) 0 18px;align-items:flex-end}
  .hero-bg{left:0;bottom:36%;-webkit-mask-image:linear-gradient(180deg,#000 70%,transparent);mask-image:linear-gradient(180deg,#000 70%,transparent)}
  .hero-par{left:-4%}
  .hero-shade{background:linear-gradient(180deg,oklch(13% .04 300/.35),transparent 25%)}
  .hero-sundisc{left:auto;right:-30%;top:auto;bottom:6%;width:90vw;opacity:.35}
  .hero-ghost{display:none}
  .hero-title{font-size:clamp(78px,26vw,120px);-webkit-text-stroke:2px var(--ink);margin:0}
  .kicker.script{font-size:24px}
  .hero-tag{margin-bottom:8px}
  .vice-chip,.eth-chip{font-size:14px;padding:6px 9px}
  .hero-sub{font-size:17px;margin-bottom:12px}
  .hero-actions{gap:8px;margin-bottom:12px;display:grid;grid-template-columns:1.4fr 1fr 1fr}
  .hero-actions .btn{padding:12px 8px;font-size:16px}
  .btn-lg{font-size:18px}
  .ca-panel{padding:10px 12px;box-shadow:5px 5px 0 var(--ink)}
  .ca-warn{font-size:12px;margin-top:6px}
  .hero-barker{width:104px;right:3vw;bottom:auto;top:calc(var(--hud-h) + 250px)}
  .hero-barker .bubble{left:-58%;top:-4%}
  .bubble{font-size:16px;padding:6px 8px}
  .title{font-size:clamp(42px,13vw,64px)}
  .trailer{padding:12vh 0 10vh}
  .sp-card{width:52vw;margin:-26vw 0 0 -26vw}
  .sp-rocco{width:72vw;bottom:12vh}
  .sp-barker{width:30vw}
  .sp-words span{font-size:15vw;margin-top:22vh;-webkit-text-stroke:2px var(--ink)}
  .sp-meter b{font-size:24px}
  .meme-grid{gap:14px}
  .cap{font-size:14px;-webkit-text-stroke:1px #000}
  .cap.top{top:6px}.cap.bot{bottom:6px}
  .m-wide{grid-column:span 2}
  .stats{grid-template-columns:1fr}
  .levels li{grid-template-columns:52px 1fr;gap:8px}
  .lv-bar{grid-column:1/-1}
  .steps{grid-template-columns:1fr}
  .route,.follower{display:none}
  .howto-stage{padding-top:10px}
  .chart-poster img{aspect-ratio:4/3}
  .chart-cta{font-size:20px;white-space:normal;width:80%;text-align:center}
  .pager{display:none}
  .title-card{top:calc(var(--hud-h) + 60px);padding:6px 14px}
  .flyer{width:100px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .grain{display:none}
  .sprint{height:auto}
  .sprint-pin{position:relative;height:100svh}
  .sp-words span[data-sp-word="3"]{opacity:1!important;clip-path:none!important}
}