/* =========================================================
   PINKRAVE — $RAVE
   palette sampled from the source art
   ========================================================= */
:root{
  --night:#12021c;
  --deep:#22042f;
  --plum:#3b0950;
  --violet:#730685;
  --orchid:#cf19d4;
  --pink:#ef17a2;
  --hot:#ce0879;
  --crimson:#df1457;
  --light:#f466d3;
  --cream:#f4dbea;
  --skin:#c58f57;
  --mint:#9cf0b4;
  --beat:0;            /* 0..1 driven by JS on every kick */
  --f-mega:"Monoton", "Rubik Mono One", system-ui, sans-serif;
  --f-head:"Rubik Mono One", "Arial Black", system-ui, sans-serif;
  --f-pix:"VT323", ui-monospace, monospace;
  --f-body:"Syne", system-ui, sans-serif;
  --hdr:72px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--night);-webkit-text-size-adjust:100%}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
html:not(.lenis){scroll-behavior:smooth}
body{
  background:var(--night);
  color:var(--cream);
  font-family:var(--f-body);
  overflow-x:hidden;
  cursor:default;
}
body.is-loading{overflow:hidden}
img{display:block;max-width:100%}
main{overflow-x:clip}
@supports not (overflow:clip){main{overflow-x:hidden}}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
::selection{background:var(--pink);color:#fff}

/* ============ PRELOADER ============ */
#preloader{
  position:fixed;inset:0;z-index:9999;background:var(--night);
  display:grid;place-items:center;overflow:hidden;
  transition:clip-path 1s cubic-bezier(.8,0,.2,1), opacity .4s .9s;
  clip-path:circle(150% at 50% 50%);
}
#preloader.out{clip-path:circle(0% at 50% 45%);opacity:0;pointer-events:none}
#preCanvas{position:absolute;inset:0;width:100%;height:100%;image-rendering:pixelated}
.pre-ui{position:absolute;left:0;right:0;bottom:6vh;display:flex;flex-direction:column;align-items:center;gap:10px;z-index:2;text-shadow:0 0 12px var(--pink)}
.pre-tag{font-family:var(--f-pix);font-size:22px;letter-spacing:.2em;color:var(--light)}
.pre-count{font-family:var(--f-mega);font-size:clamp(56px,12vw,140px);line-height:1;color:#fff}
.pre-count i{font-style:normal;font-size:.4em;color:var(--pink)}
.pre-bar{width:min(420px,70vw);height:10px;border:2px solid var(--pink);padding:2px}
.pre-bar b{display:block;height:100%;width:0;background:repeating-linear-gradient(90deg,var(--pink) 0 8px,var(--light) 8px 12px);box-shadow:0 0 14px var(--pink)}
.pre-eq{display:flex;gap:4px;height:30px;align-items:flex-end}
.pre-eq i{width:6px;background:var(--pink);animation:eq .5s ease-in-out infinite alternate;box-shadow:0 0 8px var(--pink)}
.pre-eq i:nth-child(odd){animation-duration:.37s;background:var(--light)}
.pre-eq i:nth-child(3n){animation-duration:.61s}
.pre-eq i:nth-child(4n){animation-duration:.29s}
.pre-flash{position:absolute;inset:0;background:#fff;opacity:0;pointer-events:none;z-index:3}
#preloader.flash .pre-flash{animation:flash .5s steps(2) 3}
@keyframes eq{from{height:12%}to{height:100%}}
@keyframes flash{0%{opacity:.9}50%{opacity:0}100%{opacity:.6}}

/* ============ GLOBAL FX ============ */
#fxCanvas{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:60}
.strobe{position:fixed;inset:0;pointer-events:none;z-index:59;background:radial-gradient(circle at 50% 40%,rgba(255,180,230,.55),rgba(239,23,162,.15) 60%,transparent 80%);opacity:0;mix-blend-mode:screen}
.strobe.hit{animation:strobe .18s ease-out}
@keyframes strobe{0%{opacity:.55}100%{opacity:0}}
.scanlines{position:fixed;inset:0;pointer-events:none;z-index:58;background:repeating-linear-gradient(0deg,rgba(0,0,0,.16) 0 1px,transparent 1px 3px);mix-blend-mode:multiply;opacity:.55}
.cursor-eye{position:fixed;left:0;top:0;width:34px;height:34px;pointer-events:none;z-index:70;transform:translate(-100px,-100px);transition:width .2s,height .2s;filter:drop-shadow(0 0 8px var(--pink))}
.cursor-eye img{width:100%;height:100%;animation:spin 3s linear infinite}
.cursor-eye.big{width:60px;height:60px}
@media (hover:none),(pointer:coarse){.cursor-eye{display:none}}
@keyframes spin{to{transform:rotate(360deg)}}

.toast{position:fixed;left:50%;bottom:28px;z-index:80;transform:translate(-50%,calc(100% + 60px));visibility:hidden;background:var(--pink);color:#fff;font-family:var(--f-head);font-size:13px;padding:14px 22px;border:3px solid #fff;box-shadow:6px 6px 0 var(--plum),0 0 30px var(--pink);transition:transform .35s cubic-bezier(.3,1.6,.5,1);white-space:nowrap;max-width:92vw;overflow:hidden;text-overflow:ellipsis}
.toast.on{transform:translate(-50%,0);visibility:visible}

/* ============ HEADER ============ */
.hdr{
  position:fixed;top:0;left:0;right:0;z-index:100;height:var(--hdr);
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:0 clamp(14px,3vw,36px);
  transition:background .3s, box-shadow .3s, transform .4s;
}
.hdr.scrolled{background:#12021cee;box-shadow:0 2px 0 var(--pink),0 10px 40px rgba(239,23,162,.25)}
.hdr.hide{transform:translateY(-100%)}
.logo{display:flex;align-items:center;gap:10px;font-family:var(--f-mega);font-size:clamp(20px,2.4vw,28px);color:#fff;text-shadow:0 0 10px var(--pink),0 0 24px var(--pink)}
.logo img{width:40px;height:40px;animation:bob .47s ease-in-out infinite alternate}
@keyframes bob{to{transform:translateY(-3px) rotate(-6deg)}}
.nav{display:flex;gap:6px}
.nav a{font-family:var(--f-pix);font-size:24px;letter-spacing:.06em;padding:4px 12px;position:relative;color:var(--cream)}
.nav a::before{content:"";position:absolute;inset:0;background:var(--pink);transform:scaleY(0);transform-origin:bottom;transition:transform .2s steps(4);z-index:-1}
.nav a:hover{color:#fff}
.nav a:hover::before{transform:scaleY(1)}
.hdr-soc{display:flex;gap:10px;align-items:center}
.pad{
  --s:46px;width:var(--s);height:var(--s);display:grid;place-items:center;position:relative;
  background:linear-gradient(145deg,var(--pink),var(--hot));
  border:2px solid #fff;
  box-shadow:4px 4px 0 var(--plum),0 0 18px rgba(239,23,162,.6);
  clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px);
  transition:transform .15s, box-shadow .15s, filter .15s;
}
.pad svg{width:22px;height:22px;fill:#fff}
.pad:hover{transform:translate(-2px,-2px) rotate(-4deg);filter:brightness(1.2) saturate(1.2)}
.pad:active{transform:translate(2px,2px)}
.pad.big{--s:auto;width:auto;height:58px;padding:0 22px;gap:10px;display:flex;align-items:center;font-family:var(--f-head);font-size:14px;color:#fff}
.burger{display:none;width:46px;height:46px;flex-direction:column;justify-content:center;align-items:center;gap:5px;border:2px solid var(--pink);position:relative;z-index:102}
.burger i{display:block;width:22px;height:3px;background:#fff;transition:transform .25s,opacity .2s}
.burger[aria-expanded="true"] i:nth-child(1){transform:translateY(8px) rotate(45deg)}
.burger[aria-expanded="true"] i:nth-child(2){opacity:0}
.burger[aria-expanded="true"] i:nth-child(3){transform:translateY(-8px) rotate(-45deg)}

/* ============ HERO ============ */
.hero{position:relative;min-height:100vh;min-height:100svh;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding:calc(var(--hdr) + 10px) 16px 96px;isolation:isolate}
#tunnel{position:absolute;inset:0;width:100%;height:100%;z-index:-3}
.hero-bg{position:absolute;inset:0;z-index:-4;background:url(../img/bg-tunnel.webp) center/cover}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at 50% 40%,transparent 40%,rgba(18,2,28,.75) 100%),linear-gradient(to top,rgba(18,2,28,.95) 0,transparent 30%)}

.mega{
  position:absolute;top:calc(var(--hdr) + 1vh);left:0;right:0;z-index:-2;
  display:flex;justify-content:center;
  font-family:var(--f-mega);font-weight:400;
  font-size:clamp(64px,16.5vw,300px);line-height:.9;letter-spacing:-.02em;
  color:#fff;
  text-shadow:0 0 calc(10px + 30px*var(--beat)) var(--pink),0 0 70px var(--orchid);
  transform:scale(calc(1 + .03*var(--beat)));
  user-select:none;white-space:nowrap;
}
.mega span{display:inline-block;animation:megaIn 1.2s cubic-bezier(.2,1.4,.3,1) both;animation-play-state:paused}
.mega-r{color:var(--light);animation-delay:.12s!important}
body.ready .mega span{animation-play-state:running}
@keyframes megaIn{from{transform:translateY(-120%) skewY(-12deg);opacity:0;filter:blur(12px)}}
.mega::before,.mega::after{content:attr(data-text);position:absolute;inset:0;display:flex;justify-content:center;opacity:.7;mix-blend-mode:screen;pointer-events:none}
.mega::before{color:#00ffe1;transform:translate(calc(-6px*var(--beat)),0);clip-path:inset(10% 0 55% 0)}
.mega::after{color:#ff0055;transform:translate(calc(8px*var(--beat)),0);clip-path:inset(55% 0 8% 0)}

.face-stage{position:absolute;left:50%;bottom:0;transform:translateX(-50%);width:min(78vh,92vw);aspect-ratio:1;perspective:900px;z-index:-1;pointer-events:none}
.face-tilt{position:relative;width:100%;height:100%;transform-style:preserve-3d;will-change:transform;animation:headbang .9375s cubic-bezier(.5,0,.5,1) infinite;animation-play-state:paused}
body.ready .face-tilt{animation-play-state:running}
@keyframes headbang{0%,100%{translate:0 0;rotate:0deg}25%{translate:0 2.2%;rotate:-1.5deg}50%{translate:0 0}75%{translate:0 2.2%;rotate:1.5deg}}
.face{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.face-main{transform:translateZ(40px) scale(calc(1 + .025*var(--beat)));filter:drop-shadow(0 0 30px rgba(239,23,162,.7));animation:faceIn 1.4s cubic-bezier(.2,1.2,.3,1) both;animation-play-state:paused}
body.ready .face-main{animation-play-state:running}
@keyframes faceIn{from{transform:translateZ(40px) translateY(60%) scale(.6);opacity:0}}
.face-r,.face-b{opacity:calc(.05 + .6*var(--beat));mix-blend-mode:screen}
.face-r{filter:sepia(1) saturate(9) hue-rotate(-50deg) brightness(1.1);transform:translate(calc(-14px*var(--beat)),0) translateZ(10px)}
.face-b{filter:sepia(1) saturate(9) hue-rotate(140deg) brightness(.9);transform:translate(calc(14px*var(--beat)),0) translateZ(10px)}
.face-halo{position:absolute;inset:8%;border-radius:50%;background:radial-gradient(circle,rgba(239,23,162,.55),transparent 65%);filter:blur(30px);transform:translateZ(-60px) scale(calc(1 + .2*var(--beat)))}
.eye-glow{position:absolute;top:39.5%;width:24%;aspect-ratio:1;border-radius:50%;transform:translate(-50%,-50%) translateZ(60px);background:radial-gradient(circle,rgba(255,255,255,.9) 0,rgba(244,102,211,.7) 25%,transparent 65%);mix-blend-mode:screen;opacity:calc(.25 + .75*var(--beat))}
.eye-glow.l{left:31.5%}.eye-glow.r{left:69.3%}
.eye-beam{position:absolute;top:39.5%;width:160vw;height:6px;transform-origin:0 50%;background:linear-gradient(90deg,#fff,var(--pink) 10%,rgba(239,23,162,.0));box-shadow:0 0 18px var(--pink),0 0 40px var(--pink);border-radius:6px;opacity:0;mix-blend-mode:screen}
.eye-beam.l{left:31.5%;--a:200deg}
.eye-beam.r{left:69.3%;--a:-20deg}
body.lasers-on .eye-beam{animation:beam 1.875s ease-in-out infinite}
body.lasers-on .eye-beam.r{animation-delay:-.9s}
@keyframes beam{0%{opacity:.9;transform:translateZ(70px) rotate(calc(var(--a) - 25deg))}50%{opacity:.9;transform:translateZ(70px) rotate(calc(var(--a) + 25deg))}100%{opacity:.9;transform:translateZ(70px) rotate(calc(var(--a) - 25deg))}}

.lasers{position:absolute;inset:0;z-index:-2;pointer-events:none;overflow:hidden}
.lasers i{position:absolute;bottom:-10%;left:50%;width:3px;height:140%;transform-origin:50% 100%;background:linear-gradient(to top,#fff,var(--pink) 30%,transparent);box-shadow:0 0 12px var(--pink);opacity:.55;mix-blend-mode:screen;animation:sweep 3.75s ease-in-out infinite}
.lasers i:nth-child(1){left:8%;animation-delay:0s}
.lasers i:nth-child(2){left:22%;animation-delay:-.6s;animation-duration:2.8s}
.lasers i:nth-child(3){left:38%;animation-delay:-1.2s}
.lasers i:nth-child(4){left:62%;animation-delay:-1.8s;animation-duration:2.8s}
.lasers i:nth-child(5){left:78%;animation-delay:-2.4s}
.lasers i:nth-child(6){left:92%;animation-delay:-3s;animation-duration:2.8s}
@keyframes sweep{0%,100%{transform:rotate(-28deg)}50%{transform:rotate(28deg)}}

.hero-cta{position:relative;z-index:5;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:14px 18px;opacity:0;transform:translateY(40px);transition:opacity .8s .6s, transform .8s .6s cubic-bezier(.2,1.4,.3,1)}
body.ready .hero-cta{opacity:1;transform:none}
.ticker-chip{display:flex;flex-direction:column;align-items:center;justify-content:center;height:72px;padding:0 18px;background:var(--night);border:3px solid var(--light);box-shadow:0 0 20px var(--orchid);transform:rotate(-4deg)}
.ticker-chip b{font-family:var(--f-head);font-size:22px;color:#fff;line-height:1}
.ticker-chip span{font-family:var(--f-pix);font-size:18px;color:var(--light);letter-spacing:.12em}

/* pump button — pill + glow ring */
.btn-pump{position:relative;display:inline-block;padding:4px;border-radius:999px;background:conic-gradient(from var(--ang,0deg),#fff,var(--pink),var(--orchid),#00ffe1,var(--pink),#fff);animation:rot 2.5s linear infinite;box-shadow:0 0 calc(20px + 30px*var(--beat)) var(--pink)}
@property --ang{syntax:"<angle>";inherits:false;initial-value:0deg}
@keyframes rot{to{--ang:360deg}}
.btn-pump-in{display:flex;align-items:center;gap:12px;height:64px;padding:0 34px;border-radius:999px;background:linear-gradient(180deg,#ff4fc0,var(--pink) 45%,var(--hot));font-family:var(--f-head);font-size:clamp(15px,1.6vw,20px);color:#fff;text-shadow:2px 2px 0 var(--plum);position:relative;overflow:hidden}
.btn-pump-in::after{content:"";position:absolute;top:0;bottom:0;width:40%;left:-60%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.7),transparent);transform:skewX(-20deg);animation:shine 2.4s ease-in-out infinite}
@keyframes shine{0%,60%{left:-60%}100%{left:130%}}
.btn-pump svg{width:26px;height:26px;fill:#fff;animation:spin 4s linear infinite}
.btn-pump:hover{transform:scale(1.06) rotate(-2deg)}
.btn-pump{transition:transform .2s cubic-bezier(.3,1.8,.5,1)}
.btn-pump.sm .btn-pump-in{height:56px;padding:0 26px;font-size:15px}

/* CA ticket */
.ca-ticket{display:flex;align-items:stretch;height:72px;max-width:min(560px,92vw);text-align:left;transition:transform .2s cubic-bezier(.3,1.8,.5,1);filter:drop-shadow(0 0 16px rgba(239,23,162,.55));transform:rotate(2deg)}
.ca-ticket:hover{transform:rotate(0) scale(1.04)}
.ca-ticket.copied{animation:pop .4s}
@keyframes pop{40%{transform:scale(1.12) rotate(-3deg)}}
.ca-stub{display:grid;place-items:center;width:64px;background:var(--light);color:var(--night);font-family:var(--f-head);font-size:18px;border-right:3px dashed var(--night);-webkit-mask:radial-gradient(circle at 100% 0,transparent 9px,#000 10px) top/100% 51% no-repeat,radial-gradient(circle at 100% 100%,transparent 9px,#000 10px) bottom/100% 51% no-repeat;mask:radial-gradient(circle at 100% 0,transparent 9px,#000 10px) top/100% 51% no-repeat,radial-gradient(circle at 100% 100%,transparent 9px,#000 10px) bottom/100% 51% no-repeat}
.ca-body{display:flex;flex-direction:column;justify-content:center;gap:2px;padding:0 16px;background:var(--cream);color:var(--night);min-width:0;-webkit-mask:radial-gradient(circle at 0 0,transparent 9px,#000 10px) top/100% 51% no-repeat,radial-gradient(circle at 0 100%,transparent 9px,#000 10px) bottom/100% 51% no-repeat;mask:radial-gradient(circle at 0 0,transparent 9px,#000 10px) top/100% 51% no-repeat,radial-gradient(circle at 0 100%,transparent 9px,#000 10px) bottom/100% 51% no-repeat}
.ca-body em{font-style:normal;font-family:var(--f-pix);font-size:17px;color:var(--hot);letter-spacing:.08em}
.ca-body b{font-family:var(--f-pix);font-size:clamp(18px,2vw,24px);font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:330px}
.ca-barcode{width:58px;background:var(--cream) repeating-linear-gradient(90deg,var(--night) 0 2px,transparent 2px 4px,var(--night) 4px 7px,transparent 7px 8px,var(--night) 8px 9px,transparent 9px 12px) center/70% 70% no-repeat;border-left:3px dashed var(--night)}
.ca-ticket.sm{height:60px;transform:none}
.ca-ticket.sm .ca-stub{width:52px;font-size:15px}

.scroll-cue{position:absolute;bottom:40px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:4px;font-family:var(--f-pix);font-size:16px;letter-spacing:.2em;color:var(--light);z-index:5;opacity:.85}
.scroll-cue i{width:2px;height:20px;background:var(--pink);animation:cue 1s ease-in-out infinite}
@keyframes cue{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* ============ MARQUEE ============ */
.marquee{position:relative;z-index:6;overflow:hidden;white-space:nowrap;border-block:3px solid #fff}
.marquee.m1{background:var(--pink);transform:rotate(-2.5deg) scale(1.05);margin-top:-30px;box-shadow:0 0 40px var(--pink)}
.marquee.m2{background:var(--night);transform:rotate(1.8deg) scale(1.05);margin-top:-6px;border-color:var(--pink)}
.mq-track{display:inline-flex;animation:mq 22s linear infinite}
.m2 .mq-track{animation-direction:reverse;animation-duration:30s}
.mq-track span{font-family:var(--f-head);font-size:clamp(18px,2.6vw,32px);padding:14px 0;color:#fff}
.m2 .mq-track span{font-family:var(--f-mega);color:var(--light);font-size:clamp(22px,3vw,40px)}
@keyframes mq{to{transform:translateX(-50%)}}

/* ============ SECTIONS ============ */
.sec{position:relative;padding:clamp(90px,12vw,160px) clamp(16px,4vw,60px);overflow:hidden;isolation:isolate}
.sec-head{display:flex;flex-direction:column;align-items:center;text-align:center;margin-bottom:clamp(40px,6vw,70px)}
.tag{display:inline-block;font-family:var(--f-pix);font-size:22px;letter-spacing:.14em;color:var(--night);background:var(--light);padding:2px 12px;margin-bottom:16px;box-shadow:4px 4px 0 var(--pink)}
.h2{font-family:var(--f-head);font-weight:400;font-size:clamp(34px,7vw,96px);line-height:.95;color:#fff;text-shadow:4px 4px 0 var(--hot),8px 8px 0 var(--plum),0 0 40px rgba(239,23,162,.6)}

/* glitch text */
.glitch{position:relative;display:inline-block}
.glitch::before,.glitch::after{content:attr(data-text);position:absolute;inset:0;pointer-events:none;opacity:0;text-shadow:none}
.glitch::before{color:#00ffe1}
.glitch::after{color:#ff0055}
.glitch.glitching::before{opacity:.8;animation:gl1 .3s steps(2) 2}
.glitch.glitching::after{opacity:.8;animation:gl2 .3s steps(2) 2}
@keyframes gl1{0%{clip-path:inset(20% 0 60% 0);transform:translate(-6px,-2px)}50%{clip-path:inset(70% 0 5% 0);transform:translate(5px,2px)}100%{clip-path:inset(40% 0 30% 0);transform:translate(-3px,0)}}
@keyframes gl2{0%{clip-path:inset(60% 0 10% 0);transform:translate(6px,2px)}50%{clip-path:inset(5% 0 75% 0);transform:translate(-5px,-2px)}100%{clip-path:inset(30% 0 45% 0);transform:translate(3px,0)}}

/* reveal */
.reveal{opacity:0;transform:perspective(900px) translateY(70px) rotateX(-35deg) scale(.92);transition:opacity .9s var(--d,0s), transform 1s var(--d,0s) cubic-bezier(.2,1.2,.3,1)}
.reveal.in{opacity:1;transform:none}
.tilt{transform-style:preserve-3d;will-change:transform}

/* ============ LORE / FLYER ============ */
.flyer{background:var(--night)}
.flyer-bg{position:absolute;inset:-20% 0;z-index:-1;background:url(../img/scene-stage.webp) center/cover;opacity:.55}
.flyer::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(var(--night),transparent 22%,transparent 70%,var(--night)),radial-gradient(ellipse at 30% 50%,rgba(18,2,28,.75),transparent 70%)}
.flyer-grid{max-width:1180px;margin:0 auto;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(30px,5vw,70px);align-items:center}
.poster{position:relative;background:var(--night);border:4px solid #fff;padding:16px;transform:rotate(-3deg);box-shadow:14px 14px 0 var(--pink),0 0 70px rgba(239,23,162,.5);max-width:460px;justify-self:center;width:100%}
.poster::before{content:"";position:absolute;top:-16px;left:50%;width:90px;height:30px;background:rgba(244,219,234,.75);transform:translateX(-50%) rotate(4deg)}
.poster-top,.poster-meta{display:flex;justify-content:space-between;font-family:var(--f-pix);font-size:20px;color:var(--light);letter-spacing:.08em}
.poster-img{position:relative;margin:10px 0;background:url(../img/bg-tunnel.webp) center/cover;aspect-ratio:1;overflow:hidden}
.poster-img img{width:100%;height:100%;object-fit:cover;object-position:50% 20%;animation:ledflick 4s steps(1) infinite}
@keyframes ledflick{0%,92%,100%{filter:none}93%{filter:hue-rotate(80deg) brightness(1.6)}96%{filter:invert(1) hue-rotate(180deg)}}
.poster-title{font-family:var(--f-mega);font-size:clamp(40px,6vw,68px);line-height:1;text-align:center;color:#fff;text-shadow:0 0 12px var(--pink),0 0 30px var(--pink)}
.lore-beats{display:flex;flex-direction:column;gap:18px}
.beat{display:grid;grid-template-columns:110px 1fr;gap:18px;align-items:center;padding:22px 24px;background:linear-gradient(100deg,rgba(59,9,80,.85),rgba(18,2,28,.6));border-left:6px solid var(--pink);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);transition:transform .25s}
.beat:hover{transform:translateX(10px)}
.beat b{font-family:var(--f-mega);font-size:clamp(28px,3vw,40px);color:var(--light);text-shadow:0 0 14px var(--pink);font-weight:400}
.beat p{font-size:clamp(17px,1.6vw,21px);font-weight:700;line-height:1.35}
.hl{color:#fff;background:var(--pink);padding:0 6px}

/* ============ STROBE ROOM ============ */
.strobe-room{position:relative;height:clamp(420px,70vh,720px);overflow:hidden;background:var(--night);border-block:4px solid var(--pink)}
.sr-grid{position:absolute;inset:-6%;display:grid;grid-template-columns:repeat(8,1fr);grid-auto-rows:1fr;gap:6px;transform:rotate(-8deg) scale(1.15)}
.sr-tile{position:relative;background:url(../img/bg-tunnel.webp) center/cover;overflow:hidden;transition:transform .12s}
.sr-tile img{width:100%;height:100%;object-fit:cover;object-position:50% 25%}
.sr-tile.f1 img{filter:hue-rotate(90deg) saturate(2)}
.sr-tile.f2 img{filter:invert(1) hue-rotate(180deg)}
.sr-tile.f3 img{filter:grayscale(1) contrast(2) brightness(1.2)}
.sr-tile.f4{background:var(--pink)}
.sr-tile.f4 img{mix-blend-mode:multiply;filter:grayscale(1) contrast(1.6)}
.sr-tile.flash{transform:scale(.86)}
.sr-tile.flash::after{content:"";position:absolute;inset:0;background:var(--pink);mix-blend-mode:screen;opacity:.8}
.sr-center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;pointer-events:none;background:radial-gradient(circle,rgba(18,2,28,.85) 0,rgba(18,2,28,.5) 35%,transparent 70%)}
.sr-center span{font-family:var(--f-pix);font-size:clamp(26px,3vw,40px);letter-spacing:.3em;color:var(--light)}
.sr-center b{font-family:var(--f-mega);font-weight:400;font-size:clamp(90px,20vw,280px);line-height:.9;color:#fff;text-shadow:0 0 20px var(--pink),0 0 60px var(--pink);transform:scale(calc(1 + .08*var(--beat)))}

/* ============ WRISTBAND / HOW TO BUY ============ */
.wristband{background:url(../img/bg-camo.webp) center/600px repeat, var(--deep)}
.wristband::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(ellipse at 50% 0,rgba(239,23,162,.35),transparent 60%),linear-gradient(var(--night),transparent 15%,transparent 85%,var(--night))}
.bands{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px}
.band{position:relative;padding:30px 22px 26px;min-height:260px;color:var(--night);
  background:linear-gradient(135deg,#ffd6f0,#f466d3 35%,#cf19d4 60%,#ff8fd8 85%,#fff0fa);
  background-size:200% 200%;animation:holo 6s ease-in-out infinite;
  border:3px solid #fff;box-shadow:8px 8px 0 var(--night),0 0 30px rgba(239,23,162,.4);
  clip-path:polygon(0 0,100% 0,100% 40%,94% 45%,100% 50%,100% 100%,0 100%,0 50%,6% 45%,0 40%);
}
.band:nth-child(odd){rotate:-2deg}.band:nth-child(even){rotate:2deg}
@keyframes holo{0%,100%{background-position:0 0}50%{background-position:100% 100%}}
.band-no{position:absolute;top:10px;right:14px;font-family:var(--f-mega);font-size:44px;color:#fff;text-shadow:3px 3px 0 var(--hot)}
.band-ic{font-size:44px;line-height:1;margin-bottom:22px;filter:drop-shadow(3px 3px 0 #fff)}
.band h3{font-family:var(--f-head);font-weight:400;font-size:24px;margin-bottom:8px}
.band p{font-weight:800;font-size:17px;line-height:1.3}
.band-hole{position:absolute;bottom:16px;right:16px;width:30px;height:30px;border-radius:50%;border:4px solid var(--night);background:radial-gradient(circle,#fff 35%,transparent 40%)}
.band-cta{display:flex;flex-wrap:wrap;justify-content:center;gap:16px;margin-top:56px}

/* ============ MAINSTAGE / CHART ============ */
.mainstage{background:var(--night)}
.mainstage::before{content:"";position:absolute;inset:0;z-index:-1;background:url(../img/bg-tunnel-side.webp) center/cover;opacity:.35;transform:scaleX(-1)}
.mainstage::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(var(--night),transparent 30%,transparent 70%,var(--night))}
.screen{position:relative;max-width:1100px;margin:0 auto;border:4px solid var(--pink);background:#09010f;box-shadow:0 0 0 8px var(--night),0 0 0 11px var(--light),0 0 calc(40px + 60px*var(--beat)) rgba(239,23,162,.7)}
.screen-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 16px;font-family:var(--f-pix);font-size:20px;letter-spacing:.08em;background:var(--plum);border-bottom:3px solid var(--pink)}
.screen-bar a{color:var(--light)}
.screen-bar a:hover{color:#fff}
.rec{color:#ff3b6b;animation:blink 1s steps(2) infinite}
@keyframes blink{50%{opacity:.2}}
.screen-body{position:relative;height:min(620px,72vh);min-height:420px}
.screen-body iframe{width:100%;height:100%;border:0;display:block}
.chart-wait{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:26px;background:url(../img/face-led.webp) center/auto 110% no-repeat,url(../img/bg-tunnel.webp) center/cover;text-align:center;padding:20px}
.chart-wait::before{content:"";position:absolute;inset:0;background:rgba(9,1,15,.55)}
.chart-wait>*{position:relative}
.chart-wait p{font-family:var(--f-pix);font-size:clamp(20px,2.4vw,30px);letter-spacing:.1em;color:#fff;background:var(--pink);padding:4px 14px}
.wait-eq{display:flex;gap:6px;height:140px;align-items:flex-end}
.wait-eq i{width:14px;background:linear-gradient(to top,var(--pink),var(--light),#fff);box-shadow:0 0 12px var(--pink);animation:eq .45s ease-in-out infinite alternate}
.wait-eq i:nth-child(2n){animation-duration:.31s}.wait-eq i:nth-child(3n){animation-duration:.58s}.wait-eq i:nth-child(5n){animation-duration:.23s}
.speaker{position:absolute;top:50%;width:70px;height:220px;transform:translateY(-50%);background:#1b0428;border:3px solid var(--pink);display:flex;flex-direction:column;align-items:center;justify-content:space-around;padding:10px 0}
.speaker.l{left:-96px}.speaker.r{right:-96px}
.speaker i{width:48px;height:48px;border-radius:50%;background:radial-gradient(circle,#000 20%,var(--plum) 22%,#000 55%,var(--pink) 58%,#1b0428 64%);transform:scale(calc(1 + .14*var(--beat)))}
@media (max-width:1320px){.speaker{display:none}}

/* ============ SETLIST / ROADMAP ============ */
.setlist{background:var(--night)}
.setlist-bg{position:absolute;inset:-20% 0;z-index:-1;background:url(../img/bg-rave-crop.webp) center/cover;opacity:.4}
.setlist::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(var(--night),rgba(18,2,28,.4) 25%,rgba(18,2,28,.4) 75%,var(--night))}
.deck{max-width:1150px;margin:0 auto;display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(30px,5vw,70px);align-items:start}
.vinyl{position:sticky;top:calc(var(--hdr) + 40px);aspect-ratio:1;width:100%;max-width:440px;justify-self:center;border-radius:50%;
  background:repeating-radial-gradient(circle,#111 0 2px,#1c0626 2px 4px),#111;
  box-shadow:0 0 0 10px #000,0 0 0 13px var(--pink),0 0 80px rgba(239,23,162,.6);display:grid;place-items:center}
.vinyl::before{content:"";position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 30deg,transparent 0 40deg,rgba(255,255,255,.12) 50deg,transparent 60deg 220deg,rgba(255,255,255,.1) 230deg,transparent 240deg)}
.vinyl img{width:38%;border-radius:50%;box-shadow:0 0 0 6px var(--pink),0 0 30px var(--pink)}
.tracks{list-style:none;display:flex;flex-direction:column;gap:20px;counter-reset:t}
.track{position:relative;display:grid;grid-template-columns:96px 1fr auto;gap:18px;align-items:center;padding:24px;background:rgba(18,2,28,.75);border:3px solid var(--plum);transition:border-color .3s, box-shadow .3s, background .3s}
.track.live{border-color:var(--pink);background:linear-gradient(100deg,rgba(239,23,162,.35),rgba(18,2,28,.85));box-shadow:0 0 40px rgba(239,23,162,.45)}
.track.live::before{content:"NOW PLAYING";position:absolute;top:-14px;left:18px;font-family:var(--f-pix);font-size:18px;background:var(--pink);color:#fff;padding:0 8px;letter-spacing:.1em}
.t-time{font-family:var(--f-pix);font-size:34px;color:var(--light)}
.track h3{font-family:var(--f-head);font-weight:400;font-size:clamp(20px,2.2vw,28px);color:#fff;margin-bottom:6px}
.track p{font-weight:700;font-size:16px;line-height:1.35;opacity:.9}
.t-bpm{font-family:var(--f-pix);font-size:20px;color:var(--night);background:var(--light);padding:2px 8px;white-space:nowrap}

/* ============ EXITS / PADS ============ */
.exits{background:url(../img/bg-camo.webp) center/500px repeat,var(--deep)}
.exits::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(var(--night),rgba(18,2,28,.5) 20%,rgba(18,2,28,.5) 80%,var(--night))}
.pads{max-width:1100px;margin:0 auto;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;padding:18px;background:#0b0112;border:4px solid #fff;box-shadow:12px 12px 0 var(--pink),0 0 60px rgba(239,23,162,.4)}
.bigpad{position:relative;aspect-ratio:1.6;display:flex;flex-direction:column;justify-content:space-between;padding:16px 18px;border-radius:10px;
  background:linear-gradient(160deg,color-mix(in srgb,var(--c) 60%,#fff),var(--c) 45%,color-mix(in srgb,var(--c) 55%,#000));
  box-shadow:inset 0 -8px 0 rgba(0,0,0,.35),inset 0 2px 0 rgba(255,255,255,.5),0 0 0 3px #000,0 0 22px color-mix(in srgb,var(--c) 70%,transparent);
  transition:transform .1s, filter .1s, box-shadow .1s;overflow:hidden}
.bigpad::after{content:"";position:absolute;inset:0;background:#fff;opacity:0;mix-blend-mode:overlay;transition:opacity .25s}
.bigpad.hit::after{opacity:.75;transition:none}
.bigpad b{font-family:var(--f-mega);font-weight:400;font-size:clamp(26px,3.5vw,44px);color:#fff;line-height:1;text-shadow:2px 2px 0 rgba(0,0,0,.35)}
.bigpad span{font-family:var(--f-head);font-size:clamp(12px,1.5vw,18px);color:#fff;text-shadow:2px 2px 0 rgba(0,0,0,.35)}
.bigpad:hover{filter:brightness(1.18) saturate(1.2);transform:translateY(-3px)}
.bigpad:active{transform:translateY(3px);box-shadow:inset 0 -2px 0 rgba(0,0,0,.35),0 0 0 3px #000,0 0 40px var(--c)}

/* ============ FOOTER ============ */
.ftr{position:relative;background:var(--night);overflow:hidden;border-top:4px solid var(--pink)}
.ftr-wide{width:100%;height:clamp(200px,32vw,460px);object-fit:cover;object-position:60% 40%;-webkit-mask:linear-gradient(#000 55%,transparent);mask:linear-gradient(#000 55%,transparent)}
.ftr-in{position:relative;margin-top:-80px;display:flex;flex-direction:column;align-items:center;gap:24px;padding:0 16px 60px;text-align:center}
.ftr-logo{font-family:var(--f-mega);font-size:clamp(46px,11vw,150px);line-height:1;color:#fff;text-shadow:0 0 20px var(--pink),0 0 60px var(--pink)}
.ftr-soc{display:flex;flex-wrap:wrap;justify-content:center;gap:14px}
.ftr-note{max-width:560px;font-size:13px;opacity:.6;line-height:1.5}

/* beat button */
.beat-btn{position:fixed;right:18px;bottom:18px;z-index:90;display:flex;align-items:center;gap:8px;padding:10px 16px;background:var(--night);border:3px solid var(--pink);box-shadow:4px 4px 0 var(--pink);font-family:var(--f-pix);font-size:20px;letter-spacing:.06em;color:#fff;transition:transform .15s}
.beat-btn:hover{transform:translate(-2px,-2px)}
.beat-btn[aria-pressed="true"]{background:var(--pink);box-shadow:4px 4px 0 #fff,0 0 30px var(--pink)}
.beat-btn[aria-pressed="true"] .bb-ic{animation:bob .23s infinite alternate}

/* ============ RESPONSIVE ============ */
@media (max-width:980px){
  .pads{grid-template-columns:repeat(2,minmax(0,1fr))}
  .flyer-grid,.deck{grid-template-columns:1fr}
  .vinyl{position:relative;top:0;max-width:300px}
  .bands{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:800px){
  :root{--hdr:64px}
  .nav{position:fixed;inset:0;z-index:101;flex-direction:column;align-items:center;justify-content:center;gap:10px;background:#12021c;transform:translateY(-100%);visibility:hidden;transition:transform .45s cubic-bezier(.8,0,.2,1),visibility 0s .45s}
  .nav.open{transform:none;visibility:visible;transition:transform .45s cubic-bezier(.8,0,.2,1),visibility 0s}
  .nav{background:linear-gradient(rgba(18,2,28,.8),rgba(18,2,28,.92)),url(../img/bg-tunnel-mobile.webp) center/cover #12021c}
  .nav a{font-size:40px;font-family:var(--f-head);text-shadow:3px 3px 0 var(--hot),0 0 24px var(--pink)}
  .nav a:nth-child(even){color:var(--light)}
  .burger{display:flex}
  .pad{--s:42px}
  .logo span{display:none}
  .mega{top:calc(var(--hdr) + 4vh);font-size:clamp(48px,17vw,140px)}
  .face-stage{width:min(108vw,70vh);bottom:150px}
  .hero-cta{flex-direction:column;gap:14px}
  .ticker-chip{flex-direction:row;gap:10px;height:44px;transform:rotate(-3deg)}
  .ticker-chip b{font-size:18px}
  .poster-top,.poster-meta{font-size:16px}
  .poster-meta{flex-direction:column;align-items:center}
  .screen-bar span:nth-child(2){display:none}
  .scroll-cue{display:none}
  .hero{padding-bottom:70px}
  .btn-pump-in{height:60px;padding:0 26px}
  .ca-ticket{height:64px;transform:none}
  .ca-body b{max-width:52vw}
  .ca-barcode{display:none}
  .beat{grid-template-columns:1fr;gap:6px}
  .track{grid-template-columns:1fr;gap:6px}
  .t-bpm{justify-self:start}
  .sr-grid{grid-template-columns:repeat(4,1fr)}
  .beat-btn .bb-t{display:none}
}
@media (max-width:520px){
  .bands{grid-template-columns:1fr}
  .pads{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;padding:10px}
  .h2{font-size:clamp(28px,9vw,44px)}
  .pad.big{height:52px;padding:0 16px;font-size:12px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .reveal{opacity:1;transform:none}
}