/* ===== MMM: the wild layer (everything moves with the music) ===== */
:root{--kick:0;--snare:0;--hat:0;--lvl:0;--bass:0}
body{padding-bottom:76px}
main{position:relative;z-index:2}
.top,.foot{z-index:40}
.foot{z-index:3}

/* beat-reactive helpers */
.pump{transform:scale(calc(1 + var(--kick) * .09)) rotate(calc(var(--snare) * -2deg))}
.shake{transform:translate(calc(var(--snare) * 4px), calc(var(--kick) * -3px))}
.kickglow{position:fixed;inset:0;z-index:1;pointer-events:none;background:radial-gradient(70% 60% at 50% 60%,rgba(224,36,47,.35),transparent 70%);opacity:calc(var(--kick) * .55)}
.bgviz{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}

/* brand */
.brand__logo{width:44px;height:44px;object-fit:contain;filter:drop-shadow(0 0 10px rgba(212,168,67,.4))}
.nav__cta{color:var(--gold2)!important;box-shadow:0 0 0 1px var(--gold3) inset}
.foot__logo{width:90px;height:auto;margin:0 auto 18px;filter:drop-shadow(0 0 20px rgba(212,168,67,.35))}

/* ---------- eyes in the dark ---------- */
.eyes{position:fixed;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.pair{position:absolute;display:flex;gap:calc(var(--s) * .45);opacity:0;transition:opacity 1.6s;filter:drop-shadow(0 0 calc(var(--s) * .4) rgba(224,36,47,.5))}
.pair.on{opacity:var(--o,.55)}
.eye{position:relative;width:var(--s);height:calc(var(--s) * .46);background:radial-gradient(ellipse at 50% 50%,#f3e7c8 0 45%,#b9a77d 75%,#3a2c1a);clip-path:ellipse(50% 50% at 50% 50%);overflow:hidden;animation:blink var(--bl,6s) infinite}
.eye i{position:absolute;left:50%;top:50%;width:calc(var(--s) * .42);height:calc(var(--s) * .42);margin:calc(var(--s) * -.21) 0 0 calc(var(--s) * -.21);border-radius:50%;background:radial-gradient(circle at 40% 35%,#ff4a4a 0 8%,#7a0c13 9% 34%,#120202 35% 60%,#a3121c 61% 66%,#120202 67%);transform:translate(var(--px,0),var(--py,0)) scale(calc(1 + var(--kick) * .25))}
@keyframes blink{0%,92%,100%{transform:scaleY(1)}95%{transform:scaleY(.05)}}
.eyes.stare .pair{opacity:.95!important}
.eyes.stare .eye{animation:none}

/* ---------- subliminal frames ---------- */
.sub{position:fixed;inset:0;z-index:95;pointer-events:none;display:grid;place-items:center}
.sub b{font:400 clamp(60px,18vw,260px)/.85 var(--disp);text-transform:uppercase;color:transparent;-webkit-text-stroke:2px var(--red2);text-align:center;transform:rotate(var(--r,0deg)) scale(1.05);opacity:.85;mix-blend-mode:screen;text-shadow:0 0 40px rgba(224,36,47,.6)}
.sub b.gold{-webkit-text-stroke-color:var(--gold2);text-shadow:0 0 40px rgba(241,209,132,.6)}

/* ---------- radio bar ---------- */
.radio{position:fixed;left:50%;bottom:10px;z-index:80;transform:translateX(-50%);width:min(820px,calc(100% - 16px));display:flex;align-items:center;gap:12px;padding:8px 10px 8px 8px;background:rgba(8,6,6,.92);border:1px solid var(--line);box-shadow:0 0 0 1px rgba(212,168,67,.15) inset,0 20px 50px rgba(0,0,0,.7);backdrop-filter:blur(10px)}
.radio__play{flex:0 0 46px;height:46px;border-radius:50%;border:0;background:radial-gradient(circle at 35% 30%,var(--gold2),var(--gold) 50%,var(--gold3));cursor:pointer;display:grid;place-items:center;box-shadow:0 0 0 4px rgba(212,168,67,.15),0 0 calc(var(--kick) * 30px) rgba(241,209,132,.9);transform:scale(calc(1 + var(--kick) * .1))}
.radio__play[aria-pressed=false]{animation:callme 1.4s ease-in-out infinite}
@keyframes callme{50%{box-shadow:0 0 0 10px rgba(212,168,67,.08),0 0 30px rgba(241,209,132,.6)}}
.eq{display:flex;align-items:flex-end;gap:2px;height:18px}
.eq i{width:3px;background:#140f05;height:30%}
.radio__play[aria-pressed=false] .eq i:nth-child(1){height:80%;clip-path:polygon(0 0,100% 50%,0 100%);width:12px;background:#140f05}
.radio__play[aria-pressed=false] .eq i:nth-child(n+2){display:none}
.radio__play[aria-pressed=true] .eq i{animation:eqb .5s ease-in-out infinite alternate}
.radio__play[aria-pressed=true] .eq i:nth-child(2){animation-delay:-.2s}.radio__play[aria-pressed=true] .eq i:nth-child(3){animation-delay:-.35s}.radio__play[aria-pressed=true] .eq i:nth-child(4){animation-delay:-.1s}
@keyframes eqb{to{height:100%}}
.radio__info{flex:1;min-width:0;line-height:1.2}
.radio__info b{display:block;font:400 15px var(--disp);letter-spacing:.08em;color:var(--gold)}
.radio__info span{display:block;font:400 12px var(--type);color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.radio__viz{width:160px;height:36px}
.radio__opt{height:34px;padding:0 10px;border:1px solid var(--line);background:none;color:var(--mute);font:600 10px var(--cond);letter-spacing:.18em;text-transform:uppercase;cursor:pointer}
.radio__opt[aria-pressed=true]{color:var(--gold2);border-color:var(--gold3)}
@media (max-width:640px){.radio__viz{display:none}.radio__opt{padding:0 7px;font-size:9px;letter-spacing:.1em}.radio{gap:8px}}

/* ---------- the needle (entrance) ---------- */
.gate{position:fixed;inset:0;z-index:120;display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:4vw;padding:30px 6vw;background:radial-gradient(80% 70% at 30% 50%,#1a0d0c,#050404 70%);overflow:hidden}
.gate[hidden]{display:none}
.gate__beam{position:absolute;left:28%;top:-30%;width:120vmax;height:120vmax;transform:translateX(-50%);background:conic-gradient(from 165deg at 50% 0%,transparent,rgba(241,209,132,.12) 12deg,transparent 28deg);animation:beam 5s ease-in-out infinite alternate;pointer-events:none}
.deck{position:relative;width:min(44vw,560px);aspect-ratio:1;justify-self:center}
.deck__plinth{position:absolute;inset:-7%;border-radius:18px;background:linear-gradient(145deg,#2a1c14,#0e0907);box-shadow:0 40px 80px rgba(0,0,0,.8),inset 0 0 0 2px rgba(212,168,67,.25)}
.deck__platter{position:absolute;inset:3%;border-radius:50%;background:repeating-radial-gradient(circle,#0c0a09 0 2px,#16120f 2px 4px);box-shadow:0 0 0 6px #1a1512,0 0 0 8px var(--gold3),0 20px 40px rgba(0,0,0,.7);display:grid;place-items:center;animation:platter 9s linear infinite}
.deck__record{width:86%;height:auto;filter:drop-shadow(0 0 30px rgba(212,168,67,.35))}
@keyframes platter{to{transform:rotate(360deg)}}
.gate.dropping .deck__platter{animation-duration:1.8s}
.deck__arm{position:absolute;right:-12%;top:-6%;width:34%;height:auto;transform-origin:75% 9.5%;transform:rotate(-26deg);transition:transform 1s cubic-bezier(.5,0,.2,1);filter:drop-shadow(0 10px 10px rgba(0,0,0,.6))}
.gate.dropping .deck__arm{transform:rotate(6deg)}
.gate__copy{position:relative;z-index:2;max-width:560px}
.gate__title{font-size:clamp(56px,9vw,140px);color:var(--paper)}
.gate__sub{font-size:clamp(16px,1.6vw,20px);color:var(--text);margin:14px 0 26px}
.gate__btns{display:flex;flex-wrap:wrap;gap:12px}
.gate__btns .btn--gold{min-height:60px;padding:0 34px;font-size:17px;animation:callme 1.4s ease-in-out infinite}
.gate__fine{margin-top:18px;font-size:12px;color:var(--mute)}
.gate.out{animation:gateOut 1.1s cubic-bezier(.7,0,.2,1) forwards}
@keyframes gateOut{0%{opacity:1;filter:none}40%{filter:brightness(2.2) contrast(1.4)}100%{opacity:0;transform:scale(1.6);filter:blur(16px) brightness(3)}}
.flash{position:fixed;inset:0;z-index:130;pointer-events:none;background:radial-gradient(circle,#fff6dc,rgba(241,209,132,.6) 40%,transparent 75%);animation:flash .9s ease-out forwards}
@keyframes flash{0%{opacity:0}10%{opacity:.9}100%{opacity:0}}
@media (max-width:820px){.gate{grid-template-columns:1fr;text-align:center;gap:20px;padding:40px 22px 30px}.deck{width:min(72vw,360px)}.gate__btns{justify-content:center}.gate__copy{margin:0 auto}}

/* ---------- landing ---------- */
.intro{margin-top:-68px}
.intro__logo{position:relative;width:min(46vw,290px);margin:0 auto 6px;filter:drop-shadow(0 0 60px rgba(212,168,67,.35)) drop-shadow(0 30px 40px rgba(0,0,0,.8))}
.intro__logo img{width:100%;height:auto;animation:wobble 7s ease-in-out infinite}
@keyframes wobble{0%,100%{rotate:-3deg}50%{rotate:3deg}}
.intro__logo::after{content:"";position:absolute;inset:-12%;border-radius:50%;border:2px solid rgba(224,36,47,calc(var(--kick) * .8));transform:scale(calc(1 + var(--kick) * .25));pointer-events:none}
.tag{transform:translate(calc(var(--snare) * 6px),0)}
.tag.on{transform:translate(calc(var(--snare) * 6px),0)}
.tag em{display:inline-block;transform:scale(calc(1 + var(--kick) * .06))}
.clock{display:inline-flex;gap:10px;align-items:center;font:400 13px var(--type);color:var(--mute)}
.clock b{font:400 22px var(--disp);color:var(--red2);letter-spacing:.06em}

/* frequency wall */
.freq{position:relative;height:min(80vh,640px);margin:80px 0 0;overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:radial-gradient(60% 80% at 50% 50%,rgba(163,18,28,.18),transparent)}
.freq canvas{position:absolute;inset:0;width:100%;height:100%}
.freq__words{position:absolute;inset:0}
.freq__words span{position:absolute;font:400 clamp(18px,3vw,40px)/1 var(--disp);text-transform:uppercase;color:rgba(233,225,207,.08);transition:color .15s,text-shadow .15s;white-space:nowrap}
.freq__words span.lit{color:var(--gold2);text-shadow:0 0 30px rgba(241,209,132,.8)}
.freq__words span.lit.red{color:var(--red2);text-shadow:0 0 30px rgba(224,36,47,.8)}
.freq__title{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);text-align:center;z-index:2;pointer-events:none}
.freq__title h2{font-size:clamp(46px,10vw,150px);color:var(--paper);mix-blend-mode:difference}

/* decoded transmission teaser */
.teaser{max-width:900px;margin:90px auto 0;padding:0 var(--pad);text-align:center}
.teaser__box{margin-top:18px;padding:28px 22px;border:1px solid var(--red);background:linear-gradient(180deg,rgba(163,18,28,.16),transparent);font:400 clamp(20px,3.2vw,34px)/1.35 var(--type);color:var(--paper);min-height:3.2em}
.teaser__box .x{color:var(--red2)}

/* page swap glitch */
.swap-out{animation:swapOut .26s steps(3) forwards}
.swap-in{animation:swapIn .5s steps(4)}
@keyframes swapOut{0%{clip-path:none;filter:none}50%{clip-path:inset(20% 0 40% 0);transform:translateX(-10px);filter:hue-rotate(60deg) saturate(3)}100%{clip-path:inset(50% 0 50% 0);opacity:0}}
@keyframes swapIn{0%{clip-path:inset(45% 0 45% 0);transform:translateX(12px);filter:invert(1)}40%{clip-path:inset(10% 0 30% 0);filter:none}70%{clip-path:inset(0 0 10% 0);transform:translateX(-4px)}100%{clip-path:none;transform:none}}

/* story extras */
.chap.live .chap__num{background:var(--red);color:#fff;border-color:var(--red2);transform:scale(calc(1 + var(--kick) * .15))}
.chap.live .lyric{border-left-color:var(--gold2);box-shadow:-6px 0 calc(var(--kick) * 40px) rgba(224,36,47,.6)}
.lyric .scr{color:var(--red2)}
.heard{margin:0 0 6px;font:600 11px var(--cond);letter-spacing:.3em;text-transform:uppercase;color:var(--mute)}
.mood{display:inline-block;margin-left:10px;padding:2px 8px;border:1px solid var(--red);color:var(--red2);font:600 10px var(--cond);letter-spacing:.24em}

/* crew flashbulb */
.mug{cursor:pointer}
.mug.bulb::before{content:"";position:absolute;inset:0;z-index:5;background:#fff;animation:bulb .5s ease-out forwards;pointer-events:none}
@keyframes bulb{0%{opacity:.95}100%{opacity:0}}
.mug:hover .mug__face svg,.mug.bulb .mug__face svg{animation:jitter .3s steps(2) 2}
@keyframes jitter{50%{transform:translate(-3px,2px) skewX(-4deg)}}
.mug__face svg{transform:scale(calc(1 + var(--kick) * .05))}

/* board strings tremble (handled in JS) + pins pulse */
.note::before{transform:scale(calc(1 + var(--kick) * .25))}

/* join chips sing */
.chip.sing{animation:sing .35s var(--ease)}
@keyframes sing{50%{transform:scale(1.12) rotate(-3deg);box-shadow:0 0 20px rgba(224,36,47,.8)}}
.mt20{margin:20px 0 0}.mt16{margin-top:16px}

.intro .tag{font-size:clamp(46px,9.2vw,138px)}
.intro__lines{margin-bottom:14px;min-height:0}
@media (max-width:600px){.intro__logo{width:min(62vw,240px)}}

/* headline glitch: colour split that follows the real letters */
.tag.on{animation:rgbsplit 3.4s infinite steps(1)}
@keyframes rgbsplit{0%,86%,100%{text-shadow:none;transform:translate(calc(var(--snare) * 6px),0)}87%{text-shadow:-6px 0 rgba(224,36,47,.9),6px 0 rgba(241,209,132,.8);transform:translate(-4px,1px) skewX(-6deg)}90%{text-shadow:5px 0 rgba(224,36,47,.9),-5px 0 rgba(241,209,132,.8);transform:translate(3px,-1px)}93%{text-shadow:-3px 0 rgba(224,36,47,.8),3px 0 rgba(241,209,132,.7);transform:skewX(4deg)}}
html.calm .tag.on{animation:none}

/* ---------- the song player (SoundCloud, audio only) ---------- */
.scbox{position:fixed;right:12px;bottom:70px;z-index:79;width:min(420px,calc(100% - 24px));padding:8px;background:rgba(8,6,6,.94);border:1px solid var(--gold3);box-shadow:0 0 0 1px rgba(212,168,67,.15) inset,0 20px 50px rgba(0,0,0,.7),0 0 calc(var(--kick) * 40px) rgba(224,36,47,.5)}
.scbox[hidden]{display:none}
.scbox::before{content:"NOW SPINNING";display:block;margin:0 0 6px;font:600 10px var(--cond);letter-spacing:.3em;color:var(--gold)}
.scbox__frame iframe{display:block;width:100%;height:120px;border:0}
.radio__skip{flex:0 0 34px;height:34px;border:1px solid var(--line);background:none;color:var(--gold2);font:700 10px var(--cond);letter-spacing:-.1em;cursor:pointer}
.radio__skip:hover{border-color:var(--gold)}
@media (max-width:640px){.scbox{left:8px;right:8px;width:auto;bottom:64px;padding:4px 6px}.scbox::before{display:none}.scbox__frame iframe{height:20px}.radio__skip{flex-basis:30px}}

/* ===== CHAOS LAYER ===== */
.walls{position:fixed;inset:0;z-index:0;pointer-events:none;display:flex;flex-direction:column;justify-content:space-around;overflow:hidden}
.wall__row{white-space:nowrap;opacity:.06;transition:opacity .2s}
.wall__row span{display:inline-block;font:400 clamp(70px,13vw,200px)/1 var(--disp);color:transparent;-webkit-text-stroke:1.5px var(--gold);will-change:transform}
.wall__row:nth-child(even) span{-webkit-text-stroke-color:var(--red2)}
.debris{position:fixed;inset:0;width:100%;height:100%;z-index:1;pointer-events:none}
.trail{position:fixed;inset:0;width:100%;height:100%;z-index:96;pointer-events:none}
#view{will-change:transform;transform-origin:50% 0}
.vhs{position:fixed;inset:0;z-index:94;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(0,0,0,.18) 0 1px,transparent 1px 3px);mix-blend-mode:multiply}
.vhs i{position:absolute;left:0;right:0;height:9vh;opacity:0;background:linear-gradient(180deg,transparent,rgba(241,209,132,.12) 30%,rgba(224,36,47,.2) 50%,rgba(255,255,255,.1) 70%,transparent);backdrop-filter:blur(1.5px) hue-rotate(40deg);mix-blend-mode:screen}
.vhs.tear i{animation:tear .5s steps(5)}
@keyframes tear{0%{opacity:1;transform:translateX(-30px) scaleY(.6)}30%{transform:translateX(40px) scaleY(1.4)}60%{transform:translateX(-12px)}100%{opacity:0;transform:translateX(0)}}
.drop{position:fixed;inset:0;z-index:125;pointer-events:none;display:grid;place-items:center;opacity:0}
.drop.on{animation:dropIn 2.2s cubic-bezier(.2,.8,.2,1) forwards}
.drop__in{text-align:center;transform:rotate(-4deg)}
.drop__in small{display:block;font:600 clamp(11px,1.4vw,16px) var(--cond);letter-spacing:.5em;color:var(--gold)}
.drop__in b{display:block;font:400 clamp(70px,16vw,240px)/.85 var(--disp);text-transform:uppercase;color:var(--paper);text-shadow:-8px 0 rgba(224,36,47,.9),8px 0 rgba(241,209,132,.9),0 0 60px rgba(0,0,0,.9)}
.drop__in em{display:block;font:400 clamp(26px,5vw,70px)/1 var(--disp);font-style:normal;text-transform:uppercase;color:var(--red2);letter-spacing:.06em;margin-top:6px}
@keyframes dropIn{0%{opacity:0;transform:scale(2.4);filter:blur(20px)}12%{opacity:1;transform:scale(.94);filter:none}16%{transform:scale(1.04) translateX(-12px)}20%{transform:scale(1) translateX(10px)}24%{transform:none}75%{opacity:1;transform:scale(1.03)}100%{opacity:0;transform:scale(1.25) translateY(-30px);filter:blur(8px)}}
.btn{transition:transform .25s var(--ease),box-shadow .25s,background .25s,translate .2s ease-out}
html.calm .walls,html.calm .debris,html.calm .trail,html.calm .vhs,html.calm .drop{display:none!important}

/* ===== CRAZY: smoke, scratch, tunnel, shatter, kinetic ===== */
.smoke{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.platter{position:fixed;z-index:99;width:280px;height:280px;margin:-140px 0 0 -140px;pointer-events:none;opacity:0;transform:scale(.4);transition:opacity .2s,transform .3s cubic-bezier(.34,1.56,.64,1);border-radius:50%;background:repeating-radial-gradient(circle,#0b0909 0 2px,#17120f 2px 4px);box-shadow:0 0 0 6px #1a1512,0 0 0 8px var(--gold3),0 30px 60px rgba(0,0,0,.8),0 0 80px rgba(224,36,47,.5)}
.platter.on{opacity:1;transform:scale(1)}
.platter img{position:absolute;inset:12%;width:76%;height:76%;object-fit:contain}
.scratchpad{position:fixed;left:10px;bottom:76px;z-index:81;width:74px;height:74px;border-radius:50%;display:none;place-items:center;background:repeating-radial-gradient(circle,#0b0909 0 2px,#17120f 2px 4px);box-shadow:0 0 0 3px var(--gold3),0 10px 30px rgba(0,0,0,.7),0 0 calc(var(--kick) * 30px) rgba(224,36,47,.8);touch-action:none;user-select:none;-webkit-user-select:none;animation:platter 3s linear infinite}
.scratchpad img{width:62%;height:auto;pointer-events:none}
.scratchpad b{position:absolute;bottom:-16px;font:600 9px var(--cond);letter-spacing:.24em;color:var(--gold)}
@media (hover:none),(pointer:coarse){.scratchpad{display:grid}}
html.scratching,html.scratching *{cursor:grabbing!important;user-select:none!important}
html.scratching #view{filter:hue-rotate(calc(var(--scr) * 70deg)) contrast(calc(1 + var(--scrA) * .4)) blur(calc(var(--scrA) * 1.2px))}
html.scratching .kickglow{opacity:calc(.25 + var(--scrA) * .5)}

.tunnel{position:fixed;inset:0;z-index:1;pointer-events:none;perspective:650px;overflow:hidden}
.tunnel__world{position:absolute;left:50%;top:50%;transform-style:preserve-3d}
.tunnel__world>div{position:absolute;left:0;top:0;will-change:transform,opacity}
.tring{width:1000px;height:1000px;margin:-500px 0 0 -500px;border-radius:50%;border:3px solid rgba(212,168,67,.55);box-shadow:0 0 30px rgba(212,168,67,.35),inset 0 0 30px rgba(212,168,67,.25)}
.tring--red{border-color:rgba(224,36,47,.6);box-shadow:0 0 30px rgba(224,36,47,.45),inset 0 0 30px rgba(224,36,47,.3);border-style:dashed}
.trecord{width:130px;height:130px;margin:-65px 0 0 -65px;border-radius:50%;background:radial-gradient(circle,#d4a843 0 5%,#a3121c 5.5% 30%,transparent 31%),repeating-radial-gradient(circle,#0b0909 0 2px,#1a1411 2px 4px);box-shadow:0 0 0 2px rgba(212,168,67,.4)}
.tpaper{width:180px;margin:-60px 0 0 -90px;padding:14px;background:#e9e1cf;color:#241a12;font:400 13px/1.3 var(--type);box-shadow:0 10px 30px rgba(0,0,0,.6)}
.tpaper b{display:block;font:400 12px var(--disp);text-transform:uppercase;color:#7a0c13;margin-bottom:4px}
.tstring{width:460px;height:3px;margin:-1px 0 0 -230px;background:#b3121d;box-shadow:0 0 8px rgba(224,36,47,.7)}
body.tunnel-on .chap{background:rgba(5,4,4,.74);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);padding:18px 18px 34px 76px;margin-bottom:40px;border:1px solid rgba(212,168,67,.18)}
body.tunnel-on .chap__num{left:12px;top:18px}
body.tunnel-on .timeline::before{opacity:.3}
body.tunnel-on .phead,body.tunnel-on .progress,body.tunnel-on .end{position:relative;z-index:3}

.shatter{position:fixed;inset:0;z-index:98;pointer-events:none}
.shatter svg{position:absolute;inset:0;width:100%;height:100%;animation:crack 1.4s ease-out forwards}
.shatter path{fill:none;stroke:#fff8e6;stroke-width:2.2;stroke-linejoin:bevel;filter:drop-shadow(0 0 6px rgba(241,209,132,.9)) drop-shadow(0 0 2px #fff)}
.shatter i{position:absolute;inset:0;backdrop-filter:hue-rotate(var(--sh)) brightness(1.25) contrast(1.25) saturate(1.4);-webkit-backdrop-filter:hue-rotate(var(--sh)) brightness(1.25) contrast(1.25) saturate(1.4);animation:shard 1s cubic-bezier(.2,.8,.2,1) forwards}
@keyframes crack{0%{opacity:0}6%{opacity:1}70%{opacity:.9}100%{opacity:0}}
@keyframes shard{0%{transform:none;opacity:0}8%{opacity:1;transform:translate(calc(var(--sx) * .3),calc(var(--sy) * .3))}40%{transform:translate(var(--sx),var(--sy))}100%{transform:none;opacity:0}}
html.slicing #view{animation:slice .62s steps(6)}
@keyframes slice{0%{clip-path:none;transform:translateX(0)}15%{clip-path:polygon(0 0,100% 0,100% 33%,0 41%);transform:translateX(-18px)}30%{clip-path:polygon(0 41%,100% 33%,100% 72%,0 66%);transform:translateX(22px) skewY(-1deg)}45%{clip-path:polygon(0 66%,100% 72%,100% 100%,0 100%);transform:translateX(-12px)}60%{clip-path:polygon(0 0,100% 0,100% 55%,0 48%);transform:translateX(10px)}80%{clip-path:none;transform:translateX(-4px);filter:invert(.15)}100%{clip-path:none;transform:none}}

.kinetic{position:fixed;inset:0;z-index:93;pointer-events:none;overflow:hidden;mix-blend-mode:difference}
.kinetic b{position:absolute;transform:translate(-50%,-50%) rotate(var(--r));font-family:var(--disp);font-weight:400;line-height:.85;text-transform:uppercase;white-space:nowrap;color:#f3ead6;animation:slam .7s cubic-bezier(.2,.9,.2,1) forwards}
.kinetic b.red{color:#ff2a36}
.kinetic b.outline{color:transparent;-webkit-text-stroke:3px #f3ead6}
@keyframes slam{0%{opacity:0;transform:translate(-50%,-50%) rotate(var(--r)) scale(2.6);filter:blur(14px)}14%{opacity:1;transform:translate(-50%,-50%) rotate(var(--r)) scale(.92);filter:none}22%{transform:translate(-52%,-50%) rotate(var(--r)) scale(1.04)}60%{opacity:1}100%{opacity:0;transform:translate(-50%,-50%) rotate(var(--r)) scale(1.18) translateY(-12px);filter:blur(6px)}}
html.calm .smoke,html.calm .platter,html.calm .scratchpad,html.calm .tunnel,html.calm .shatter,html.calm .kinetic{display:none!important}