/* Black Culture Vault — motion layer. Loaded after all other styles. */

/* Ambient canvases */
#fxDust,#fxConfetti{position:fixed;inset:0;width:100%;height:100%;pointer-events:none}
#fxDust{z-index:-1}
#fxConfetti{z-index:60}

/* Vault door gate (home page, once per session) */
.fx-gate{position:fixed;inset:0;z-index:100;display:grid;place-items:center;cursor:pointer;overflow:hidden;background:#07040f}
.fx-door{position:absolute;top:0;bottom:0;width:50.5%;background:repeating-linear-gradient(90deg,#2a1240 0 2px,transparent 2px 46px),linear-gradient(135deg,#3b1659,#170829 60%,#2b0f44);box-shadow:inset 0 0 80px #000c;transition:transform 1.15s cubic-bezier(.7,0,.2,1)}
.fx-door.l{left:0;border-right:3px solid #e6a84d}.fx-door.r{right:0;border-left:3px solid #e6a84d}
.fx-door::after{content:"";position:absolute;top:50%;width:26px;height:120px;margin-top:-60px;border-radius:13px;background:linear-gradient(#fff3b0,#c78a1f,#7a4a00);box-shadow:0 0 18px #ffb43a}
.fx-door.l::after{right:28px}.fx-door.r::after{left:28px}
.fx-dial{position:relative;z-index:2;width:min(52vw,250px);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,#fff6c4 0 9%,#d79a2b 10% 14%,#2a1240 15% 58%,#e6a84d 59% 62%,#1c0b31 63%);box-shadow:0 0 0 6px #4a2368,0 0 60px #ffb43a88;transition:transform 1.1s cubic-bezier(.6,-.2,.3,1.3),opacity .5s}
.fx-dial::before{content:"";position:absolute;inset:18%;border-radius:50%;background:repeating-conic-gradient(#ffd77a 0 2deg,transparent 2deg 15deg);mask:radial-gradient(circle,transparent 60%,#000 61%);-webkit-mask:radial-gradient(circle,transparent 60%,#000 61%)}
.fx-dial img{position:absolute;inset:27%;width:46%;height:46%;border-radius:50%;background:#fff}
.fx-gate-cta{position:absolute;z-index:3;bottom:12%;left:0;right:0;text-align:center;font-weight:1000;letter-spacing:3px;color:#ffdf8a;font-size:clamp(14px,3.6vw,22px);text-shadow:0 0 18px #ffb43a;animation:fxBlink 1.4s ease-in-out infinite}
.fx-gate-cta small{display:block;margin-top:8px;font-size:11px;letter-spacing:1.5px;color:#cbb6e6;text-shadow:none}
.fx-gate.open .fx-dial{transform:rotate(540deg) scale(.6);opacity:0}
.fx-gate.open .fx-door.l{transform:translateX(-102%)}.fx-gate.open .fx-door.r{transform:translateX(102%)}
.fx-gate.open .fx-gate-cta{opacity:0;animation:none}
.fx-gate.open{background:transparent;pointer-events:none}
.fx-flash{position:fixed;inset:0;z-index:99;pointer-events:none;background:radial-gradient(circle,#fff6c9,#ffb43a66 40%,transparent 70%);opacity:0}
.fx-flash.go{animation:fxFlash .9s ease-out}

/* Sound dock */
.fx-dock{position:fixed;right:14px;bottom:14px;z-index:70;display:flex;gap:8px}
.fx-dock button{width:48px;height:48px;padding:0;border-radius:50%;display:grid;place-items:center;background:linear-gradient(140deg,#5a2391,#22104a)!important;border:2px solid #ffd774!important;box-shadow:0 0 16px #ffb43a77!important;color:#ffe9a8;cursor:pointer;animation:none!important}
.fx-dock button[aria-pressed=false]{opacity:.55;border-color:#8a74b0!important;box-shadow:none!important}
.fx-dock svg{width:22px;height:22px}
.fx-eq{display:flex;gap:3px;align-items:flex-end;height:18px}
.fx-eq i{width:4px;height:30%;background:#ffd774;border-radius:2px}
.fx-dock .playing .fx-eq i{animation:fxEq .55s ease-in-out infinite alternate}
.fx-eq i:nth-child(2){animation-delay:.15s!important}.fx-eq i:nth-child(3){animation-delay:.3s!important}.fx-eq i:nth-child(4){animation-delay:.08s!important}

/* Home entrance choreography */
.fx-ready .show-header{animation:fxDrop .7s cubic-bezier(.2,1.4,.4,1) backwards}
.fx-ready .show-emblem{animation:fxZoomIn .9s cubic-bezier(.2,1.5,.4,1) .15s backwards,emblemGlow 3s ease-in-out 1.1s infinite}
.fx-ready .show-silhouettes svg{animation:fxRiseUp .8s cubic-bezier(.2,1.3,.4,1) backwards,vaultFloat 5s ease-in-out 1.2s infinite}
.fx-ready .show-silhouettes svg:nth-child(1){animation-delay:.35s,1.2s}.fx-ready .show-silhouettes svg:nth-child(2){animation-delay:.45s,1.7s}.fx-ready .show-silhouettes svg:nth-child(3){animation-delay:.55s,2.2s}.fx-ready .show-silhouettes svg:nth-child(4){animation-delay:.65s,2.7s}
.fx-ready .show-banner{animation:fxSlam .6s cubic-bezier(.2,1.6,.4,1) .55s backwards}
.fx-ready .show-subtitle{animation:fxRise .6s ease .75s backwards}
.fx-ready .show-categories h2{animation:fxRise .5s ease .85s backwards}
.fx-ready .show-categories .category-choice{animation:fxPop .55s cubic-bezier(.2,1.6,.4,1) backwards}
.fx-ready .show-categories .category-choice:nth-child(1){animation-delay:.95s}.fx-ready .show-categories .category-choice:nth-child(2){animation-delay:1.05s}.fx-ready .show-categories .category-choice:nth-child(3){animation-delay:1.15s}.fx-ready .show-categories .category-choice:nth-child(4){animation-delay:1.25s}
.fx-ready .show-action{animation:fxRise .6s cubic-bezier(.2,1.4,.4,1) 1.35s backwards}
.fx-ready .show-action+.show-action{animation-delay:1.45s}
.fx-ready .show-foot{animation:fxRise .6s ease 1.6s backwards}
.fx-ready .show-foot span{animation:fxBlinkSoft 3s ease-in-out infinite}
.fx-ready .show-foot span:nth-child(2){animation-delay:.75s}.fx-ready .show-foot span:nth-child(3){animation-delay:1.5s}.fx-ready .show-foot span:nth-child(4){animation-delay:2.25s}

/* Marquee banner: shimmer + chasing bulbs */
.show-banner{overflow:hidden}
.show-banner::before{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,#fff7 48%,transparent 62%);transform:translateX(-120%);animation:fxShine 3.2s ease-in-out 2s infinite}
.fx-bulbs{position:absolute;inset:3px;border-radius:31px;pointer-events:none;border:2px dotted #fff3b0;animation:fxBulbs 1s steps(2) infinite}

/* Category + action interaction */
.category-choice,.show-action{transform-style:preserve-3d;will-change:transform}
.category-choice .category-icon{transition:transform .35s cubic-bezier(.2,1.6,.4,1)}
.category-choice:hover .category-icon{transform:translateY(-6px) rotate(-6deg) scale(1.08)}
.category-choice.fx-picked{animation:fxPicked .55s cubic-bezier(.2,1.6,.4,1)!important}
.category-choice.fx-picked .category-icon{animation:fxSpin .6s cubic-bezier(.2,1.4,.4,1)}
.fx-ripple{position:absolute;border-radius:50%;pointer-events:none;background:radial-gradient(circle,#fff9,#ffd77a44 50%,transparent 70%);transform:scale(0);animation:fxRipple .65s ease-out forwards}
.category-choice,.show-action,.cta,.answer,.option{position:relative;overflow:hidden}
.show-action::after,.cta::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 35%,#ffffff66 50%,transparent 65%);transform:translateX(-130%);animation:fxShine 3.6s ease-in-out infinite}
.multiplayer-action::after{animation-delay:1.8s}

/* Gameplay */
.fx-shake{animation:fxShake .45s cubic-bezier(.36,.07,.19,.97)!important}
.fx-bump{animation:fxBump .5s cubic-bezier(.2,1.8,.4,1)!important;display:inline-block}
.fx-float{position:fixed;z-index:65;pointer-events:none;font-weight:1000;font-size:28px;color:#8dffd1;text-shadow:0 0 14px #2dffa8,0 3px 0 #0a3d2a;animation:fxFloatUp 1.1s ease-out forwards}
.fx-float.vault{color:#ffde75;text-shadow:0 0 18px #ffb43a,0 3px 0 #5c3200;font-size:34px}
.fx-vignette{position:fixed;inset:0;z-index:55;pointer-events:none;box-shadow:inset 0 0 0 0 #ff3c5a00;transition:box-shadow .25s}
.fx-vignette.hot{box-shadow:inset 0 0 120px 20px #ff3c5a77}
.fx-vignette.win{animation:fxWinGlow .8s ease-out}
.fx-banner-drop{position:fixed;left:50%;top:22%;z-index:66;pointer-events:none;transform:translate(-50%,-50%);padding:14px 28px;border-radius:40px;border:3px solid #ffda72;background:linear-gradient(#6b2489,#2c0b45);color:#ffdf8a;font-weight:1000;font-style:italic;font-size:clamp(20px,5vw,40px);white-space:nowrap;text-shadow:0 2px 3px #140019;box-shadow:0 0 30px #ffbe49;animation:fxBannerDrop 1.8s cubic-bezier(.2,1.5,.4,1) forwards}
.answer.right,.option.correct{box-shadow:0 0 0 3px #8bffd4,0 0 34px #2dffa877}
.stage h2,#question{animation:fxRise .45s ease both}
.trophy{animation:fxTrophy 1s cubic-bezier(.2,1.6,.4,1) both,bob 2s ease-in-out 1s infinite!important;display:inline-block}
.end-score{animation:fxZoomIn .8s cubic-bezier(.2,1.6,.4,1) .3s both}
.clock.urgent{animation:pulse .6s infinite,fxTick 1s ease-in-out infinite!important}

/* Keyframes */
@keyframes fxBlink{50%{opacity:.45}}
@keyframes fxBlinkSoft{50%{color:#ffe099;text-shadow:0 0 12px #ffb43a}}
@keyframes fxFlash{0%{opacity:0}15%{opacity:1}100%{opacity:0}}
@keyframes fxEq{from{height:20%}to{height:100%}}
@keyframes fxDrop{from{opacity:0;transform:translateY(-60px)}to{opacity:1;transform:none}}
@keyframes fxZoomIn{from{opacity:0;transform:scale(.3) rotate(-25deg)}to{opacity:1;transform:none}}
@keyframes fxRiseUp{from{opacity:0;transform:translateY(80px)}to{opacity:.94;transform:none}}
@keyframes fxSlam{0%{opacity:0;transform:scale(2.2)}100%{opacity:1;transform:none}}
@keyframes fxRise{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
@keyframes fxPop{0%{opacity:0;transform:scale(.4) translateY(30px)}100%{opacity:1;transform:none}}
@keyframes fxShine{0%{transform:translateX(-130%)}45%,100%{transform:translateX(130%)}}
@keyframes fxBulbs{50%{border-color:#ffb43a;opacity:.6}}
@keyframes fxPicked{0%{transform:scale(1)}35%{transform:scale(.9)}70%{transform:scale(1.08)}100%{transform:scale(1)}}
@keyframes fxSpin{from{transform:rotate(-360deg) scale(.6)}to{transform:none}}
@keyframes fxRipple{to{transform:scale(4);opacity:0}}
@keyframes fxShake{10%,90%{transform:translateX(-3px)}20%,80%{transform:translateX(6px)}30%,50%,70%{transform:translateX(-10px)}40%,60%{transform:translateX(10px)}}
@keyframes fxBump{0%{transform:scale(1)}40%{transform:scale(1.55);color:#fff}100%{transform:scale(1)}}
@keyframes fxFloatUp{0%{opacity:0;transform:translate(-50%,0) scale(.6)}20%{opacity:1;transform:translate(-50%,-20px) scale(1.15)}100%{opacity:0;transform:translate(-50%,-110px) scale(1)}}
@keyframes fxWinGlow{0%{box-shadow:inset 0 0 0 0 #2dffa800}30%{box-shadow:inset 0 0 140px 30px #2dffa855}100%{box-shadow:inset 0 0 0 0 #2dffa800}}
@keyframes fxBannerDrop{0%{opacity:0;transform:translate(-50%,-160%) scale(.7)}20%{opacity:1;transform:translate(-50%,-50%) scale(1)}75%{opacity:1;transform:translate(-50%,-50%) scale(1)}100%{opacity:0;transform:translate(-50%,-50%) scale(1.4)}}
@keyframes fxTrophy{from{opacity:0;transform:translateY(-120px) rotate(-30deg) scale(.4)}to{opacity:1;transform:none}}
@keyframes fxTick{0%,100%{transform:scale(1)}10%{transform:scale(1.18)}}

@media(max-width:760px){.fx-dock{right:10px;bottom:10px}.fx-dock button{width:42px;height:42px}}
@media(prefers-reduced-motion:reduce){
 .fx-ready *,.fx-door,.fx-dial,.show-banner::before,.show-action::after,.cta::after,.fx-bulbs,.fx-float,.fx-banner-drop,.fx-dock .playing .fx-eq i{animation:none!important;transition:none!important}
 .fx-float,.fx-banner-drop{display:none}
}

/* Cover the page until the vault gate is drawn (class set by an inline head script) */
html.fx-gating body::after{content:"";position:fixed;inset:0;z-index:98;background:#07040f}
/* Keep the Mixed card as a slim full-width bar on phones (a later 420px rule was stretching it) */
@media(max-width:760px){.show-categories .mix-card{min-height:65px}}

#fxEnable{width:auto!important;min-width:125px;padding:0 12px!important;font-weight:900;font-size:13px;background:linear-gradient(130deg,#f7c95e,#b06a09)!important;color:#180b26!important;border-radius:14px!important;box-shadow:0 0 14px #ffbd4a99!important}#fxEnable:focus-visible{outline:3px solid white;outline-offset:2px}@media(max-width:760px){#fxEnable{min-width:110px;font-size:12px}}

/* ===================== HERO REVAMP ===================== */
.show-stage{--emb:clamp(190px,28vw,350px);--orb:calc(var(--emb) + 120px);--chip:clamp(40px,4.4vw,56px);margin-top:22px}

/* Scrolling marquee under the header */
.hero-ticker{position:relative;z-index:4;overflow:hidden;margin:10px -3.5% 4px;padding:8px 0;background:linear-gradient(90deg,#2a0b47,#6b2489 25%,#8a2fb3 50%,#6b2489 75%,#2a0b47);border-top:2px solid #ffda72;border-bottom:2px solid #ffda72;box-shadow:0 0 18px #ffbe4966}
.hero-track{display:flex;width:max-content;align-items:center;animation:heroTicker 32s linear infinite;font-weight:1000;font-size:clamp(12px,1.4vw,16px);letter-spacing:1.5px;color:#fff;white-space:nowrap;text-shadow:0 2px 4px #0008}
.hero-track span,.hero-track b{padding:0 10px}
.hero-track b{color:#ffd774;text-shadow:0 0 10px #ffb43a}

/* Header polish */
.show-header-logo{box-shadow:0 0 0 3px #ffd774,0 0 22px #ffb43a,0 0 50px #b952ff88;animation:heroLogo 4s ease-in-out infinite}
.show-nav .nav-signup{position:relative;overflow:hidden}
.show-nav .nav-signup::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 35%,#fff9 50%,transparent 65%);transform:translateX(-130%);animation:fxShine 3s ease-in-out 1s infinite}

/* Colored spotlights */
.left-light{background:linear-gradient(165deg,#ffd77a88,transparent 75%)}
.right-light{background:linear-gradient(195deg,#ff6fc488,transparent 75%)}

/* Rotating sunburst behind the emblem */
.hero-rays{position:absolute;left:50%;top:50%;width:calc(var(--emb)*2.7);aspect-ratio:1;translate:-50% -50%;border-radius:50%;z-index:0;pointer-events:none;background:repeating-conic-gradient(from 0deg,#ffd77a40 0 5deg,transparent 5deg 15deg,#ff8bca30 15deg 20deg,transparent 20deg 30deg);-webkit-mask:radial-gradient(circle,#000 18%,transparent 66%);mask:radial-gradient(circle,#000 18%,transparent 66%);animation:heroSpin 45s linear infinite}

/* Light-up equalizer on the stage floor */
.hero-eq{position:absolute;left:3%;right:3%;bottom:12px;height:42%;display:flex;align-items:flex-end;gap:3px;z-index:0;opacity:.55;pointer-events:none;-webkit-mask:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.hero-eq i{flex:1;height:100%;border-radius:3px 3px 0 0;background:linear-gradient(#ff8bca,#b952ff 45%,#ffd77a);transform-origin:bottom;transform:scaleY(.15);animation:heroEq 1.2s ease-in-out infinite alternate}
.hero-eq i:nth-child(3n){animation-duration:.85s;animation-delay:-.4s}
.hero-eq i:nth-child(3n+1){animation-duration:1.05s;animation-delay:-.75s}
.hero-eq i:nth-child(4n){animation-duration:.7s;animation-delay:-.2s}
.hero-eq i:nth-child(5n+2){animation-duration:1.45s;animation-delay:-1s}

/* Silhouettes get colored rim light */
.show-silhouettes svg{stroke-width:4.5}
.show-silhouettes svg:nth-child(1){stroke:#ffcf6b;filter:drop-shadow(0 0 6px #ffb43a) drop-shadow(0 0 18px #ffb43a)}
.show-silhouettes svg:nth-child(2){stroke:#ff8bca;filter:drop-shadow(0 0 6px #ff4fae) drop-shadow(0 0 18px #ff4fae)}
.show-silhouettes svg:nth-child(3){stroke:#9feaff;filter:drop-shadow(0 0 6px #2cc6ff) drop-shadow(0 0 18px #2cc6ff)}
.show-silhouettes svg:nth-child(4){stroke:#cf9bff;filter:drop-shadow(0 0 6px #a03bff) drop-shadow(0 0 18px #a03bff)}

/* Chasing marquee bulbs around the emblem */
.emblem-bulbs{position:absolute;inset:-15px;border-radius:50%;pointer-events:none;background:repeating-conic-gradient(#fff6b8 0 3deg,transparent 3deg 15deg);-webkit-mask:radial-gradient(closest-side,transparent calc(100% - 9px),#000 calc(100% - 8px),#000 calc(100% - 1px),transparent 100%);mask:radial-gradient(closest-side,transparent calc(100% - 9px),#000 calc(100% - 8px),#000 calc(100% - 1px),transparent 100%);filter:drop-shadow(0 0 5px #ffb43a);animation:heroChase .9s steps(2) infinite}

/* Culture icons orbiting the emblem */
.hero-orbit{position:absolute;left:50%;top:50%;width:var(--orb);aspect-ratio:1;translate:-50% -50%;z-index:4;pointer-events:none;border-radius:50%;border:1.5px dashed #ffd77a55;animation:heroSpin 28s linear infinite}
.orbit-chip{position:absolute;left:50%;top:50%;width:var(--chip);height:var(--chip);margin:calc(var(--chip)/-2) 0 0 calc(var(--chip)/-2);transform:rotate(var(--a)) translateY(calc(var(--orb)/-2)) rotate(calc(var(--a)*-1))}
.orbit-chip i{display:grid;place-items:center;width:100%;height:100%;border-radius:50%;background:radial-gradient(circle at 35% 30%,#8a43c9,#2a0c4e 70%);border:2px solid #ffd774;box-shadow:0 0 16px #ffb43a99,inset 0 2px 5px #fff5;animation:heroSpin 28s linear infinite reverse}
.orbit-chip svg{width:62%;height:62%;filter:drop-shadow(0 2px 2px #0008)}

/* Entrance for the new pieces */
.fx-ready .hero-ticker{animation:fxDrop .6s cubic-bezier(.2,1.4,.4,1) .2s backwards}
.fx-ready .hero-orbit{animation:heroOrbitIn 1s cubic-bezier(.2,1.4,.4,1) .9s backwards,heroSpin 28s linear infinite}
.fx-ready .hero-rays,.fx-ready .hero-eq{animation-delay:0s}

@keyframes heroTicker{to{transform:translateX(-50%)}}
@keyframes heroSpin{to{transform:rotate(360deg)}}
@keyframes heroEq{to{transform:scaleY(.9)}}
@keyframes heroChase{to{transform:rotate(15deg)}}
@keyframes heroLogo{50%{box-shadow:0 0 0 3px #fff3b0,0 0 34px #ffb43a,0 0 70px #b952ffaa}}
@keyframes heroOrbitIn{from{opacity:0;scale:.4}}

@media(max-width:760px){
 .show-stage{--emb:185px;--chip:40px;--orb:calc(var(--emb) + 100px);height:300px;margin-top:16px}
 .hero-ticker{margin:6px -14px 2px;padding:7px 0}
 .hero-eq{height:36%}
}
@media(max-width:420px){
 .show-stage{--emb:155px;--chip:36px;--orb:calc(var(--emb) + 92px);height:270px;margin-top:14px}
}
@media(prefers-reduced-motion:reduce){
 .hero-track,.hero-rays,.hero-eq i,.emblem-bulbs,.hero-orbit,.orbit-chip i,.show-header-logo,.show-nav .nav-signup::after{animation:none!important}
 .hero-eq i{transform:scaleY(.4)}
}