/* KON! live-stage layer. Loaded last; decorative motion only.
   Performance rule: every looping animation here animates transform or
   opacity only, so it runs on the compositor without main-thread style or
   paint work. Base rotations are folded into the keyframes. Containers that
   leave the viewport get .fx-sleep (fx.js) and pause. All of it is removed by
   the global prefers-reduced-motion rules in the base CSS. */
:root{--fx-a:var(--pick);--fx-b:var(--yellow);--fx-c:var(--teal);--fx-glass:color-mix(in srgb,var(--paper) 93%,transparent)}
:root[data-page=guild],:root[data-page=comments]{--fx-a:var(--teal);--fx-b:var(--pick);--fx-c:var(--yellow)}
:root[data-page=members],:root[data-page=users],:root[data-page=players]{--fx-a:var(--navy);--fx-b:var(--teal);--fx-c:var(--pick)}
:root[data-page=gallery],:root[data-page=activity]{--fx-a:var(--yellow);--fx-b:var(--pick);--fx-c:var(--navy)}
:root[data-page=raids],:root[data-page=admin]{--fx-a:var(--pick);--fx-b:var(--navy);--fx-c:var(--teal)}
:root[data-page=lottery],:root[data-page=shop],:root[data-page=wallet]{--fx-a:var(--yellow);--fx-b:var(--teal);--fx-c:var(--pick)}
.fx-sleep,.fx-sleep *,.fx-sleep::before,.fx-sleep::after,.fx-sleep *::before,.fx-sleep *::after{animation-play-state:paused!important}

/* Background: the page colour sits on <html> so the fixed stage layers can
   paint between it and the content. The WebGL stage (or, without WebGL, the
   static aurora) sits at z -2, floating notes at z -1. */
html{background:radial-gradient(var(--pattern) 1px,transparent 1px) 0 0/14px 14px,var(--paper)}
body{background:transparent}
/* 3D reveals project wider than their column while tilted; clip, never scroll. */
#main{overflow-x:clip}
.fx-gl{position:fixed;inset:0;width:100vw;height:100vh;z-index:-2;pointer-events:none;opacity:0;transition:opacity 1.2s ease}
.fx-gl.ready{opacity:1}
.fx-aurora{position:fixed;inset:0;z-index:-2;pointer-events:none;background:radial-gradient(50vmax 50vmax at 10% 0%,color-mix(in srgb,var(--fx-a) 18%,transparent),transparent),radial-gradient(45vmax 45vmax at 95% 30%,color-mix(in srgb,var(--fx-b) 20%,transparent),transparent),radial-gradient(50vmax 40vmax at 40% 110%,color-mix(in srgb,var(--fx-c) 18%,transparent),transparent)}
.fx-stage{position:fixed;inset:0;width:100vw;height:100vh;z-index:-1;pointer-events:none}
.fx-sparks{position:fixed;inset:0;width:100vw;height:100vh;z-index:2000;pointer-events:none}

/* Header: a tinted bar (no backdrop blur: blurring a moving background costs
   a full re-raster every frame), rainbow scroll meter, notes over nav links. */
.header{background:var(--fx-glass)}
.fx-progress{position:fixed;top:0;left:0;right:0;height:3px;z-index:60;pointer-events:none;transform:scaleX(0);transform-origin:left;background:linear-gradient(90deg,var(--pick),var(--yellow),var(--teal),var(--navy))}
html::before{width:60%;height:3px;background:linear-gradient(90deg,transparent,var(--pick),var(--yellow),var(--teal),transparent)}
.header nav a{position:relative}
.header nav a::before{content:'♪';position:absolute;left:50%;top:-2px;font-size:14px;line-height:1;color:var(--pick);opacity:0;transform:translate(-50%,8px) scale(.4) rotate(-20deg);transition:opacity .2s,transform .35s cubic-bezier(.34,1.8,.5,1);pointer-events:none}
.header nav a:nth-child(3n+2)::before{content:'♫';color:var(--teal)}.header nav a:nth-child(3n)::before{content:'♬';color:var(--warn)}
@media(hover:hover){.header nav a:hover::before{opacity:1;transform:translate(-50%,-4px) scale(1) rotate(12deg)}}
@media(hover:hover){.brand:hover .brand-word{animation:fx-boing .7s cubic-bezier(.3,1.6,.5,1)}}
@keyframes fx-boing{0%{transform:rotate(-6deg) scale(1)}25%{transform:rotate(-6deg) scale(1.22,.82)}50%{transform:rotate(-6deg) scale(.9,1.14)}75%{transform:rotate(-6deg) scale(1.06,.96)}100%{transform:rotate(-6deg) scale(1)}}
.brand-word.fx-party{animation:fx-party-brand 1.2s cubic-bezier(.3,1.4,.4,1)}
.home-wordmark.fx-party{animation:fx-party-mark 1.2s cubic-bezier(.3,1.4,.4,1)}
@keyframes fx-party-brand{0%{transform:rotate(-6deg)}40%{transform:rotate(354deg) scale(1.3)}70%{transform:rotate(714deg) scale(.92)}100%{transform:rotate(714deg)}}
@keyframes fx-party-mark{0%{transform:rotate(-5deg)}40%{transform:rotate(355deg) scale(1.3)}70%{transform:rotate(715deg) scale(.92)}100%{transform:rotate(715deg)}}
.theme-toggle svg{transition:transform .5s cubic-bezier(.34,1.6,.5,1)}
@media(hover:hover){.theme-toggle:hover svg{transform:rotate(-25deg)}}
::view-transition-old(root),::view-transition-new(root){animation:none;mix-blend-mode:normal}

/* Buttons catch a stage-light glint. */
.button.dark,.auth-submit{position:relative;overflow:hidden;isolation:isolate}
.button.dark::after,.auth-submit::after{content:'';position:absolute;top:-2px;bottom:-2px;left:0;width:45%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);transform:translateX(-140%) skewX(-20deg);pointer-events:none;z-index:-1;animation:fx-glint 3.6s ease-in-out infinite}
@keyframes fx-glint{0%,62%{transform:translateX(-140%) skewX(-20deg)}100%{transform:translateX(330%) skewX(-20deg)}}

/* Home: a living poster. */
.club-home{position:relative;overflow-x:clip}
.live-label{display:flex!important}
.live-label i{position:relative}
.live-label i::after{content:'';position:absolute;inset:0;border-radius:50%;background:var(--pick);animation:fx-pulse 1.6s ease-out infinite}
@keyframes fx-pulse{from{transform:scale(1);opacity:.6}to{transform:scale(3.4);opacity:0}}
.home-wordmark{position:relative;cursor:pointer;text-shadow:6px 6px 0 var(--yellow)}
[data-theme=dark] .home-wordmark{text-shadow:6px 6px 0 color-mix(in srgb,var(--teal) 70%,transparent)}
.home-wordmark>.wm{display:inline-block;color:var(--pick);animation:fx-bob 2.4s ease-in-out infinite}
.home-wordmark>.wm-o{color:var(--ink);animation-delay:.18s}.home-wordmark>.wm-n{animation-delay:.36s}
.home-wordmark>.wordmark-bang{animation:fx-bang 2.4s ease-in-out .54s infinite}
@keyframes fx-bob{0%,45%,100%{transform:translateY(0)}30%{transform:translateY(-14px)}55%{transform:translateY(-4px)}}
@keyframes fx-bang{0%,100%{transform:rotate(12deg)}30%{transform:translateY(-18px) rotate(26deg)}50%{transform:rotate(4deg)}}
.club-home h1 em{background-size:100% 100%;animation:fx-marker 1.1s cubic-bezier(.2,.8,.2,1) .4s both;background-repeat:no-repeat}
@keyframes fx-marker{from{background-size:0 100%}}
/* The poster is a real 3D stack: stickers, notes, equalizer and record sit at
   different depths, so the mouse tilt shows parallax. */
.home-band{--fx-base:2deg;--fx-lift:0px;transform-style:preserve-3d}
.home-band>img{transform:translateZ(0)}
.home-band>.band-sticker,.home-band>.band-eq{translate:0 0 46px}
.home-band>.band-note{translate:0 0 80px}
.home-band>.band-vinyl{translate:0 0 -50px}
.home-band:before{translate:0 0 30px}
.band-vinyl{position:absolute;z-index:-1;top:7%;right:-17%;height:86%;aspect-ratio:1;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle,var(--pick) 0 15%,var(--paper) 15.5% 17%,#15161c 17.5% 19%,transparent 19.5%),repeating-radial-gradient(circle,#15161c 0 2px,#262833 2.5px 3.5px);box-shadow:0 0 0 2px var(--edge),5px 6px 0 var(--shadow);animation:fx-spin 5s linear infinite}
.band-vinyl::after{content:'';position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 20deg,transparent,rgba(255,255,255,.18) 8%,transparent 18%,transparent 50%,rgba(255,255,255,.12) 58%,transparent 68%)}
.band-vinyl span{font:900 clamp(10px,1.1vw,15px)/1 'Arial Black',Impact,sans-serif;color:#fff;letter-spacing:-.04em}
@keyframes fx-spin{to{transform:rotate(360deg)}}
.home-band:before{animation:fx-sway-label 3.4s ease-in-out infinite;transform-origin:20% 50%}
@keyframes fx-sway-label{0%,100%{transform:rotate(-8deg)}50%{transform:rotate(-1deg)}}
.band-sticker{display:block!important;animation:fx-sway-sticker 2.8s ease-in-out .3s infinite;z-index:2}
@keyframes fx-sway-sticker{0%,100%{transform:rotate(-10deg)}50%{transform:rotate(-3deg)}}
.band-note{position:absolute;z-index:2;font:900 38px/1 var(--sans);color:var(--pick);text-shadow:2px 2px 0 var(--edge);pointer-events:none;animation:fx-float 4.2s ease-in-out infinite}
.band-note.n1{left:-7%;top:14%;color:var(--teal)}.band-note.n2{left:44%;top:-11%;font-size:30px;animation-delay:-1.4s}.band-note.n3{right:-5%;bottom:-12%;color:var(--yellow);font-size:44px;animation-delay:-2.6s}
@keyframes fx-float{0%,100%{transform:rotate(-10deg)}50%{transform:translate(6px,-16px) rotate(12deg)}}
.band-eq{position:absolute;left:22px;bottom:-16px;z-index:2;display:flex;align-items:flex-end;gap:3px;height:38px;padding:6px 9px;background:var(--poster-ink);border:2px solid var(--edge);border-radius:7px;box-shadow:3px 3px 0 var(--shadow)}
.band-eq{width:120px}.heading-eq{width:96px}
.eq-mask{position:absolute;inset:6px 9px;overflow:hidden;-webkit-mask:repeating-linear-gradient(90deg,#000 0 4px,transparent 4px 7px);mask:repeating-linear-gradient(90deg,#000 0 4px,transparent 4px 7px)}
/* One wave layer slides under a bar mask: a whole equalizer for one compositor animation. */
.eq-wave{position:absolute;left:0;top:0;bottom:0;width:200%;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 40' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='1' x2='0' y2='0'%3E%3Cstop offset='0' stop-color='%2375bdba'/%3E%3Cstop offset='.55' stop-color='%23f7ca58'/%3E%3Cstop offset='1' stop-color='%23d84447'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M0 40 L0 11.2 L4 7.05 L8 10.75 L12 15.77 L16 15.3 L20 11.94 L24 12.06 L28 14.63 L32 13.02 L36 6.76 L40 3.84 L44 9.15 L48 17.25 L52 21.01 L56 21.9 L60 25.85 L64 31.83 L68 32.45 L72 25.87 L76 19.7 L80 20.16 L84 23.48 L88 22.98 L92 19.96 L96 20.68 L100 24.8 L104 24.58 L108 16.77 L112 8.18 L116 5.84 L120 7.32 L124 6.37 L128 4.08 L132 7.06 L136 15.68 L140 21.81 L144 20.38 L148 16.54 L152 17.2 L156 20.58 L160 20.5 L164 17.73 L168 19.47 L172 27.42 L176 33.86 L180 32.58 L184 27.38 L188 25.07 L192 24.52 L196 19.7 L200 11.2 L200 40Z' fill='url%28%23g%29'/%3E%3C/svg%3E") 0 100%/50% 100% repeat-x;animation:fx-eq-wave 2.6s linear infinite}
.eq-wave+.eq-wave{opacity:.55;animation-duration:1.7s;animation-direction:reverse;transform-origin:bottom}
@keyframes fx-eq-wave{to{transform:translateX(-50%)}}
@keyframes fx-eq{from{transform:scaleY(.15)}to{transform:scaleY(1)}}
.home-actions .button span{display:inline-block;transition:transform .3s cubic-bezier(.34,1.6,.5,1)}
@media(hover:hover){.home-actions .button:hover span{transform:translate(4px,-4px)}}

/* Opening shot: on the first home render the poster assembles in 3D, like a
   title sequence. One-shot transform animations only. */
.club-home.cinematic{perspective:1200px}
.cinematic .home-wordmark>.wm,.cinematic .home-wordmark>.wordmark-bang{animation:fx-fly-in .9s cubic-bezier(.2,1.2,.4,1) both,fx-bob 2.4s ease-in-out 1.4s infinite}
.cinematic .home-wordmark>.wm-o{animation-delay:.12s,1.58s}.cinematic .home-wordmark>.wm-n{animation-delay:.24s,1.76s}.cinematic .home-wordmark>.wordmark-bang{animation:fx-fly-in-bang .9s cubic-bezier(.2,1.2,.4,1) .36s both,fx-bang 2.4s ease-in-out 1.94s infinite}
@keyframes fx-fly-in{from{transform:perspective(500px) translate3d(0,-60px,420px) rotateX(-70deg);opacity:0}}
@keyframes fx-fly-in-bang{from{transform:perspective(500px) translate3d(0,-60px,420px) rotateX(-70deg) rotate(12deg);opacity:0}to{transform:rotate(12deg)}}
.cinematic .home-copy>:not(.home-wordmark){animation:fx-rise .8s cubic-bezier(.16,1,.3,1) both}
.cinematic .home-copy>h1{animation-delay:.45s}.cinematic .home-copy>p{animation-delay:.58s}.cinematic .home-copy>.home-actions{animation-delay:.7s}.cinematic .home-copy>.home-jp{animation-delay:.82s}
@keyframes fx-rise{from{transform:translateY(28px);opacity:0}}
.cinematic .home-band{animation:fx-swing-in 1.3s cubic-bezier(.2,1,.3,1) .2s both}
@keyframes fx-swing-in{from{transform:perspective(1000px) rotateY(-75deg) rotateX(18deg) translateZ(-300px) rotate(2deg);opacity:0}to{transform:rotate(2deg)}}
.cinematic .band-vinyl{animation:fx-slide-record 1s cubic-bezier(.2,1,.3,1) 1.1s both,fx-spin 5s linear 1.1s infinite}
@keyframes fx-slide-record{from{transform:translateX(-60%) rotate(-120deg)}to{transform:none}}
.cinematic .ticker-cross{animation:fx-rise .8s ease 1s both}

/* Two crossing marquee tapes. */
.ticker-cross{position:relative;overflow-x:clip;padding-block:18px 26px;margin-top:6px}
.ticker-cross .club-ticker{display:block!important;padding:12px 0;justify-content:flex-start;transform:rotate(-1.6deg);box-shadow:0 4px 0 var(--shadow);position:relative;z-index:1;margin-inline:-20px}
.ticker-cross .club-ticker.alt{background:var(--teal);transform:rotate(1.8deg);margin-top:-8px;z-index:0;opacity:.95}
.ticker-track{display:flex;width:max-content;gap:28px;align-items:center;animation:fx-marquee 34s linear infinite;padding-left:28px}
.club-ticker.alt .ticker-track{animation-direction:reverse;animation-duration:42s}
.club-ticker .ticker-track>:is(span,b){display:block}
@keyframes fx-marquee{to{transform:translateX(-50%)}}
.photo-section-label>span{display:block!important}

/* Photo diary framed as a film strip: slow Ken Burns drift, REC timecode and
   a light-leak flash when the reel changes. */
.hero{position:relative;padding-block:26px;background:#15161c;border-color:var(--edge)}
.hero::before,.hero::after{content:'';position:absolute;left:12px;right:12px;height:10px;background:repeating-linear-gradient(90deg,#f5eedb 0 12px,transparent 12px 24px);border-radius:2px;opacity:.85}
.hero::before{top:8px}.hero::after{bottom:8px}
.hero .hero-caption{color:#f5eedb}.hero .hero-caption #photo-credit,.hero .hero-caption i{color:#c4c8d4}
.hero .slide-controls button{background:#262833;border-color:#4a4e5e;color:#f5eedb}
.hero-media img{animation:fx-kenburns 18s ease-in-out infinite alternate}
@keyframes fx-kenburns{from{transform:scale(1.02)}to{transform:scale(1.12) translate(-2%,-1.5%)}}
.hero-rec{position:absolute;z-index:3;left:18px;top:14px;display:flex;align-items:center;gap:8px;padding:4px 10px;border-radius:4px;background:rgba(0,0,0,.45);color:#fff;font:700 12px/1.3 'Consolas','Courier New',monospace;letter-spacing:.08em;pointer-events:none}
.hero-rec i{width:9px;height:9px;border-radius:50%;background:#ff3b3b;animation:fx-rec 1s steps(1) infinite}
@keyframes fx-rec{50%{opacity:0}}
.hero-media::after{content:'';position:absolute;inset:0;z-index:2;pointer-events:none;background:radial-gradient(120% 90% at 0% 0%,rgba(255,180,90,.75),rgba(255,90,60,.35) 35%,transparent 65%);opacity:0}
.hero-media.flash::after{animation:fx-leak .9s ease-out}
@keyframes fx-leak{0%{opacity:0;transform:translateX(-10%)}25%{opacity:1}100%{opacity:0;transform:translateX(15%)}}
.story-photo{--fx-base:-2deg;--fx-lift:-4px}
.section-title,.home-story h2,.photo-section-label h2{background:linear-gradient(color-mix(in srgb,var(--yellow) 70%,transparent),color-mix(in srgb,var(--yellow) 70%,transparent)) no-repeat 0 88%/100% .3em;padding-inline:2px;width:fit-content}
[data-theme=dark] :is(.section-title,.home-story h2,.photo-section-label h2){background-image:linear-gradient(color-mix(in srgb,var(--yellow) 38%,transparent),color-mix(in srgb,var(--yellow) 38%,transparent))}
.fx-reveal.section-title,.photo-section-label.fx-reveal h2{background-size:0 .3em}
.fx-in.section-title,.photo-section-label.fx-in h2{background-size:100% .3em;transition:background-size .9s cubic-bezier(.2,.8,.2,1) calc(var(--fx-delay,0ms) + .25s)}
.explore-grid .club-icon{transition:transform .4s}
@media(hover:hover){.explore-grid>a:hover .club-icon{animation:fx-wiggle .6s ease-in-out}.explore-grid>a:hover .arrow{transform:translateX(6px)}}
.explore-grid .arrow{display:inline-block;transition:transform .3s cubic-bezier(.34,1.6,.5,1)}
@keyframes fx-wiggle{0%,100%{transform:none}25%{transform:rotate(-14deg) scale(1.15)}50%{transform:rotate(10deg)}75%{transform:rotate(-5deg)}}

/* Subpage headings: track label, scrolling stage stripe, drifting art. */
.chapter-label{display:flex!important}
.chapter-label>span{animation:fx-sway-tag 3s ease-in-out infinite}
@keyframes fx-sway-tag{0%,100%{transform:rotate(-6deg)}50%{transform:rotate(1deg)}}
.heading-jp{display:flex!important}
.club-heading::before{content:'';position:absolute;left:-51px;right:0;top:0;height:6px;z-index:2;background:repeating-linear-gradient(-45deg,var(--pick) 0 12px,var(--yellow) 12px 24px,var(--teal) 24px 36px);animation:fx-stripe 1.6s linear infinite}
@keyframes fx-stripe{to{transform:translateX(51px)}}
.heading-art>img{animation:fx-kenburns 20s ease-in-out infinite alternate}
.art-sticker{animation:fx-float-sticker 4s ease-in-out infinite}
@keyframes fx-float-sticker{0%,100%{transform:rotate(-7deg)}50%{transform:translate(6px,-12px) rotate(-2deg)}}
.art-sticker small{display:block!important}
.heading-eq{position:absolute;left:16px;bottom:16px;z-index:1;display:flex;align-items:flex-end;gap:3px;height:30px;padding:5px 8px;background:var(--poster-ink);border:2px solid var(--edge);border-radius:6px}

/* Card tilt with a travelling highlight. */
:is(.member,.explore-grid>a,.user-card,.shop-card,.directory-card,.directory-person,.photo-tile,.targets>article,.player-entry-grid>a,.team-member,.account-entry,.account-title-card,.home-stats){position:relative}
:is(.member,.explore-grid>a,.user-card,.shop-card,.directory-card,.photo-tile,.targets>article,.player-entry-grid>a,.account-entry,.home-stats)::after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:radial-gradient(circle at var(--fx-mx,50%) var(--fx-my,50%),rgba(255,255,255,.55),transparent 55%);mix-blend-mode:soft-light;opacity:0;transition:opacity .3s}
:is(.member,.explore-grid>a,.user-card,.shop-card,.directory-card,.photo-tile,.targets>article,.player-entry-grid>a,.account-entry,.home-stats).fx-tilt::after{opacity:1}
:is(.member,.explore-grid>a,.user-card,.shop-card,.directory-card,.directory-person,.photo-tile,.targets>article,.home-band,.story-photo,.tea-ticket,.player-entry-grid>a,.team-member,.account-entry,.account-title-card,.home-stats).fx-tilt{transform:perspective(900px) rotate(var(--fx-base,0deg)) rotateX(var(--fx-rx,0deg)) rotateY(var(--fx-ry,0deg)) translateY(var(--fx-lift,-4px));transition:transform .12s ease-out,box-shadow .25s,border-color .25s}
.home-band.fx-tilt{transform:perspective(900px) rotate(2deg) rotateX(calc(var(--fx-rx,0deg) * 1.8)) rotateY(calc(var(--fx-ry,0deg) * 1.8))}
.tea-ticket{--fx-base:-6deg;--fx-lift:-2px}

/* Scroll reveal: blocks flip up out of the stage floor in 3D. */
.fx-reveal{opacity:0;transform:perspective(1000px) translateY(46px) rotateX(-28deg) scale(.96);transform-origin:50% 100%}
/* 超过一屏高的块不翻转：3D 投影会把命中区域和滚动高度撑到几千像素外，挡住别的区块 */
.fx-reveal.fx-tall{transform:perspective(1400px) translateY(26px)}
.fx-reveal.fx-in{opacity:1;transform:none;transition:opacity .6s ease var(--fx-delay,0ms),transform .9s cubic-bezier(.16,1,.3,1) var(--fx-delay,0ms)}
/* 还没揭示的块是透明的，绝不能拦截点击 */
.fx-reveal:not(.fx-in){pointer-events:none}
.photo-tile.fx-reveal{transform:perspective(900px) translateY(30px) rotateY(-24deg) rotateX(-12deg) scale(.9)}.photo-tile.fx-reveal:nth-child(even){transform:perspective(900px) translateY(30px) rotateY(24deg) rotateX(-12deg) scale(.9)}
.photo-tile.fx-reveal.fx-in{transform:none;transition-timing-function:ease,cubic-bezier(.34,1.3,.5,1)}

/* Route change: a film slate claps in, then three stage lights sweep away. */
.fx-wipe{position:fixed;inset:0;z-index:1500;pointer-events:none;overflow:hidden}
.fx-wipe i{position:absolute;top:-20%;bottom:-20%;left:0;width:34vw;transform:translateX(-120%) skewX(-18deg);animation:fx-sweep .62s cubic-bezier(.65,0,.35,1) .3s forwards;mix-blend-mode:multiply;opacity:.9}
[data-theme=dark] .fx-wipe i{mix-blend-mode:screen;opacity:.55}
.fx-wipe i:nth-child(1){background:var(--yellow)}.fx-wipe i:nth-child(2){background:var(--pick);animation-delay:.36s;width:18vw}.fx-wipe i:nth-child(3){background:var(--teal);animation-delay:.42s;width:9vw}
@keyframes fx-sweep{to{transform:translateX(calc(100vw + 60%)) skewX(-18deg)}}
.fx-slate{position:absolute;left:50%;top:50%;width:min(300px,70vw);margin:-90px 0 0 calc(min(300px,70vw) / -2);color:#fff;animation:fx-slate-in .75s cubic-bezier(.3,1.3,.5,1) forwards;transform-style:preserve-3d}
.fx-slate b{display:block;height:34px;border-radius:6px 6px 0 0;background:repeating-linear-gradient(-55deg,#f5eedb 0 18px,#15161c 18px 36px);border:3px solid #15161c;transform-origin:4px 100%;animation:fx-clap .45s cubic-bezier(.6,0,.4,1.4) .12s both}
.fx-slate div{padding:12px 16px 14px;border:3px solid #15161c;border-top:0;border-radius:0 0 8px 8px;background:#262833;font:800 13px/1.6 'Consolas','Courier New',monospace;letter-spacing:.06em;box-shadow:6px 8px 0 rgba(0,0,0,.35)}
.fx-slate div strong{display:block;font:900 26px/1.2 var(--sans);letter-spacing:0;color:var(--yellow)}
@keyframes fx-clap{from{transform:rotate(-24deg)}to{transform:rotate(0)}}
@keyframes fx-slate-in{0%{transform:perspective(800px) translateY(-40px) rotateX(50deg) scale(.7);opacity:0}25%{transform:none;opacity:1}75%{transform:none;opacity:1}100%{transform:perspective(800px) translateY(30px) rotateX(-40deg) scale(.85);opacity:0}}
.route-curtain{background:radial-gradient(circle at 50% 30%,color-mix(in srgb,var(--yellow) 40%,var(--paper)),var(--paper) 70%)}

/* Lottery and rewards. */
.tea-ticket{position:relative;overflow:hidden;animation:fx-hover-ticket 3.6s ease-in-out infinite}
.tea-ticket::after{content:'';position:absolute;top:0;bottom:0;left:0;width:60%;background:linear-gradient(115deg,transparent,rgba(255,255,255,.65) 45%,rgba(117,189,186,.35) 55%,transparent);animation:fx-holo 3.2s ease-in-out infinite;pointer-events:none}
@keyframes fx-hover-ticket{0%,100%{translate:0 0}50%{translate:0 -10px}}
@keyframes fx-holo{from{transform:translateX(-110%)}to{transform:translateX(190%)}}
.lottery-stage{overflow:hidden;isolation:isolate}
.lottery-stage::before{content:'';position:absolute;inset:-50%;z-index:-1;background:conic-gradient(from 0deg,transparent 0 8%,color-mix(in srgb,var(--yellow) 22%,transparent) 8% 12%,transparent 12% 25%,color-mix(in srgb,var(--pick) 14%,transparent) 25% 29%,transparent 29% 42%,color-mix(in srgb,var(--teal) 20%,transparent) 42% 46%,transparent 46% 58%,color-mix(in srgb,var(--yellow) 22%,transparent) 58% 62%,transparent 62% 75%,color-mix(in srgb,var(--pick) 14%,transparent) 75% 79%,transparent 79%);animation:fx-spin 40s linear infinite;-webkit-mask-image:radial-gradient(circle,#000 8%,transparent 42%);mask-image:radial-gradient(circle,#000 8%,transparent 42%);opacity:.8}
.economy-result{position:relative}

/* Lightbox pops open like a polaroid. */
dialog[open] .lightbox-content>img{animation:fx-pop .45s cubic-bezier(.34,1.5,.5,1)}
@keyframes fx-pop{from{opacity:0;transform:scale(.86) rotate(-3deg)}}

/* Footer: a live equalizer across the top edge. */
footer{position:relative;overflow:hidden;padding-top:58px}
.auth-footer{padding:52px 22px 22px}.auth-footer .fx-eq{height:30px;opacity:.6}
.fx-eq{position:absolute;left:0;right:0;top:0;height:40px;display:flex;align-items:flex-end;justify-content:space-between;gap:4px;padding:0 4px;opacity:.75;pointer-events:none}
.fx-eq .eq-mask{inset:0;-webkit-mask:repeating-linear-gradient(90deg,#000 0 14px,transparent 14px 18px);mask:repeating-linear-gradient(90deg,#000 0 14px,transparent 14px 18px)}
.fx-eq .eq-wave{width:200%;background-size:25% 100%;animation-duration:9s}
.footer-note>b{display:block!important;font-size:18px;background:linear-gradient(90deg,var(--pick),var(--warn),var(--teal),var(--navy));-webkit-background-clip:text;background-clip:text;color:transparent}

@media(min-width:901px){.home-band{margin-right:15%}}
@media(max-width:900px){.band-vinyl{right:-12%;height:74%;top:13%}}
@media(max-width:700px){
  .band-vinyl{right:-9%;height:64%;top:18%}.band-note{font-size:28px}.band-note.n3{font-size:32px}
  .band-eq{height:30px;left:14px;width:90px}.home-wordmark{text-shadow:4px 4px 0 var(--yellow)}
  .ticker-cross{padding-block:12px 20px}.ticker-cross .club-ticker{font-size:12px;padding:10px 0}
  .hero{padding-block:22px}.heading-eq{display:none}.fx-eq{height:30px}
  .auth-footer{padding-top:46px}.auth-footer .fx-eq{height:24px}
  .fx-wipe i{width:60vw}.fx-wipe i:nth-child(2){width:30vw}.fx-wipe i:nth-child(3){width:16vw}
  .hero-rec{left:12px;top:10px;font-size:10px}
}
@media(prefers-reduced-motion:reduce){.fx-gl,.fx-stage,.fx-sparks,.fx-wipe,.fx-progress{display:none}.fx-reveal{opacity:1;transform:none}}