:root{--energy:0;--beat:0}.echo{display:none}
.rave-on .sound-switch{top:20px;right:20px;z-index:30}
.rave-on .hero h1{top:7%;font-size:30vw;left:-8%;right:-8%;color:#e4ffbd;animation:takeoverEntry .65s cubic-bezier(.16,1,.3,1) both;transform:translateX(calc(var(--beat)*-12px)) skewX(calc(var(--beat)*-3deg));text-shadow:calc(var(--beat)*-18px) 0 #a8ff3e,calc(var(--beat)*18px) 0 #ff853e;transition:top .6s,color .4s}
.rave-on .hero-art{width:min(78svh,820px);max-width:94vw;margin-top:14svh;transform:scale(calc(1 + var(--beat)*.1));transition:width .6s,margin .6s}
.rave-on .mascot-button{animation:none;transform:translateY(calc(var(--energy)*-12px)) rotate(calc(var(--beat)*-4deg)) scaleX(calc(1 + var(--beat)*.055)) scaleY(calc(1 - var(--beat)*.045))}
.rave-on .echo{display:block;position:absolute;inset:0;width:100%;height:100%;object-fit:contain;pointer-events:none;opacity:calc(var(--beat)*.6);filter:sepia(1) saturate(3);mix-blend-mode:screen}
.rave-on .echo-left{transform:translateX(calc(var(--beat)*-24%)) rotate(calc(var(--beat)*-12deg));filter:sepia(1) saturate(3) hue-rotate(35deg)}
.rave-on .echo-right{transform:translateX(calc(var(--beat)*24%)) rotate(calc(var(--beat)*12deg))}
.rave-on .rave-scene{background:#070c08}.rave-on .laser{opacity:calc(.03 + var(--energy)*.16)}
.rave-on .club-haze{background:radial-gradient(ellipse at 50% 60%,#82ce3044,transparent 60%);transform:scale(calc(1 + var(--energy)*.5))}
.impact-word{position:absolute;left:-5%;top:34%;font:900 30vw/.8 'Barlow Condensed',sans-serif;letter-spacing:-.04em;color:#a8ff3e;opacity:0;transform:rotate(-9deg);white-space:nowrap}
.rave-on.impact .impact-word{opacity:.22}
.cut{position:absolute;width:150%;height:12vh;left:-25%;background:#a8ff3e;opacity:calc(var(--beat)*.6);transform:translateX(-120%) rotate(-22deg);transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.cut-two{background:#ff853e;height:3vh;top:77%;transform:translateX(120%) rotate(-22deg)}.cut-one{top:22%}
.rave-on.impact .cut{transform:translateX(0) rotate(-22deg)}
.rave-on[data-scene="1"] .hero h1{top:49%;color:transparent;-webkit-text-stroke:2px #b9ed83}
.rave-on[data-scene="1"] .hero-art{margin-top:-5svh;width:min(87svh,880px)}
.rave-on[data-scene="1"] .club-haze{background:radial-gradient(ellipse at 50% 50%,#fa7a2444,transparent 60%)}
.rave-on[data-scene="2"] .hero h1{top:17%;transform:rotate(-8deg) scale(1.1);color:#ffac72}
.rave-on[data-scene="2"] .echo{opacity:calc(.13 + var(--beat)*.35)}
.rave-on[data-scene="2"] .echo-left{transform:translateX(-33%) scale(.8) rotate(-14deg)}
.rave-on[data-scene="2"] .echo-right{transform:translateX(33%) scale(.8) rotate(14deg)}
.rave-on .rave-flash{opacity:calc(var(--beat)*.08)}
@keyframes takeoverEntry{from{opacity:0;scale:.6;filter:blur(14px)}to{opacity:1;scale:1;filter:blur(0)}}
@media(max-width:760px){.rave-on .hero h1{top:18%;font-size:32vw}.rave-on .hero-art{width:min(90vw,72svh);margin-top:8svh}.rave-on[data-scene="1"] .hero-art{width:90vw}.rave-on[data-scene="1"] .hero h1{top:65%}.rave-on[data-scene="2"] .hero h1{top:25%}.impact-word{top:45%}}
@media(prefers-reduced-motion:reduce){.rave-on .hero h1{animation:none;transform:none!important}.rave-on .hero-art,.rave-on .mascot-button{transform:none}.echo,.cut,.impact-word{display:none!important}}