/* ══════════ Music-themed animated backgrounds — SHARED ══════════
   Extracted from artist-profile.html (R661) into a shared stylesheet so the
   artist page AND the producer storefront render the identical FX layer and
   never drift (R692).

   This file is the FX LAYER ONLY: the moving visuals that live in `.bg-fx`.
   It is deliberately colour-scheme-agnostic — every rule uses `--accent`
   (which both pages define) or hardcoded scene colours, and NONE of it sets
   the page's colour-theme variables. Each host page keeps its own
   body[data-bgscene="…"] colour blocks. Scene templates that inject DOM
   (particles, bars, keys, strings, svg) get their children from buildBgScene()
   in bg-scenes.js. */

/* ── Ambient / gradient FX ── */
body[data-bgscene="aurora"] .bg-fx{position:fixed;inset:-20%;z-index:-1;background:conic-gradient(from 0deg at 30% 30%,#5b8cff,#38f0c0,#c04bff,#ff5bab,#5b8cff);filter:blur(70px) saturate(1.4);opacity:0.72;animation:spin 10s linear infinite;}
@keyframes spin{to{transform:rotate(360deg)}}
body[data-bgscene="vapor"] .bg-fx{position:fixed;inset:0;z-index:-1;background-image:linear-gradient(rgba(255,110,199,0.16) 1px,transparent 1px),linear-gradient(90deg,rgba(255,110,199,0.16) 1px,transparent 1px);background-size:38px 38px;mask-image:linear-gradient(180deg,transparent,#000 60%);animation:vaporScroll 3s linear infinite;}
@keyframes vaporScroll{from{background-position:0 0}to{background-position:0 38px}}
body[data-bgscene="nebula"] .bg-fx{position:fixed;inset:-30%;z-index:-1;background:radial-gradient(40% 40% at 30% 30%,rgba(168,85,247,0.65),transparent 58%),radial-gradient(45% 45% at 70% 60%,rgba(56,189,248,0.55),transparent 58%),radial-gradient(40% 40% at 50% 80%,rgba(236,72,153,0.50),transparent 58%);filter:blur(55px) saturate(1.35);animation:nebulaDrift 11s ease-in-out infinite alternate;}
@keyframes nebulaDrift{from{transform:translate3d(-8%,-6%,0) scale(1)}to{transform:translate3d(8%,7%,0) scale(1.2)}}
body[data-bgscene="flow"] .bg-fx{position:fixed;inset:0;z-index:-1;background:linear-gradient(120deg,#04121a,#0d4d63,#22a39a,#0d4d63,#04121a);background-size:300% 300%;animation:flowShift 7s ease infinite;}
@keyframes flowShift{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
body[data-bgscene="pulse"] .bg-fx{position:fixed;inset:0;z-index:-1;background:radial-gradient(60% 50% at 50% 40%,rgba(244,114,182,0.30),transparent 70%);animation:pulseGlow 4.5s ease-in-out infinite;}
@keyframes pulseGlow{0%,100%{opacity:0.5;transform:scale(1)}50%{opacity:0.9;transform:scale(1.15)}}
body[data-bgscene="lightning"] .bg-fx{position:fixed;inset:0;z-index:-1;overflow:hidden;background:radial-gradient(120% 90% at 50% -10%,rgba(80,110,190,0.18),transparent 60%);}
body[data-bgscene="lightning"] .bg-fx::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(210,225,255,0.95),rgba(150,190,255,0.25) 42%,transparent 72%);opacity:0;animation:ltFlash 5s steps(1,end) infinite;}
@keyframes ltFlash{0%,48%,100%{opacity:0}1%{opacity:.9}3%{opacity:.15}4%{opacity:.75}6%{opacity:0}50%{opacity:.6}52%{opacity:.05}53%{opacity:.5}55%{opacity:0}}
body[data-bgscene="lava"] .bg-fx{position:fixed;inset:-20%;z-index:-1;background:radial-gradient(50% 40% at 30% 70%,rgba(255,90,20,0.60),transparent 60%),radial-gradient(45% 45% at 70% 40%,rgba(255,160,40,0.50),transparent 60%),radial-gradient(40% 40% at 50% 92%,rgba(220,40,20,0.55),transparent 60%);filter:blur(48px) saturate(1.4);animation:lavaMove 9s ease-in-out infinite alternate;}
@keyframes lavaMove{from{transform:translate3d(-6%,4%,0) scale(1)}to{transform:translate3d(6%,-6%,0) scale(1.18)}}
body[data-bgscene="embers"] .bg-fx{position:fixed;inset:0;z-index:-1;overflow:hidden;background:radial-gradient(100% 80% at 50% 115%,rgba(255,110,40,0.20),transparent 60%);}
.p-ember{position:absolute;border-radius:50%;background:radial-gradient(circle,#ffd8a0,#ff6a1a 60%,transparent);box-shadow:0 0 8px #ff8a3c;animation:emberRise linear infinite;}
@keyframes emberRise{0%{transform:translateY(0) translateX(0) scale(1);opacity:0}10%{opacity:1}100%{transform:translateY(-112vh) translateX(24px) scale(.35);opacity:0}}
body[data-bgscene="smoke"] .bg-fx{position:fixed;inset:-25%;z-index:-1;background:radial-gradient(45% 45% at 30% 60%,rgba(180,190,205,0.16),transparent 60%),radial-gradient(50% 50% at 70% 40%,rgba(150,160,180,0.14),transparent 60%),radial-gradient(40% 40% at 55% 80%,rgba(200,210,225,0.12),transparent 60%);filter:blur(45px);animation:smokeMove 16s ease-in-out infinite alternate;}
@keyframes smokeMove{from{transform:translate3d(-5%,3%,0) scale(1)}to{transform:translate3d(6%,-5%,0) scale(1.2)}}
body[data-bgscene="starfield"] .bg-fx{position:fixed;inset:0;z-index:-1;overflow:hidden;background:radial-gradient(120% 90% at 50% 0%,rgba(60,80,160,0.20),transparent 60%);animation:starPan 90s linear infinite;}
.p-star{position:absolute;border-radius:50%;background:#fff;animation:starTw ease-in-out infinite;}
@keyframes starTw{0%,100%{opacity:.15}50%{opacity:1}}
@keyframes starPan{to{transform:translateX(-40px)}}
body[data-bgscene="rain"] .bg-fx{position:fixed;inset:0;z-index:-1;background:repeating-linear-gradient(115deg,transparent 0 13px,rgba(34,211,238,0.22) 13px 15px,transparent 15px 42px);background-size:66px 66px;animation:rainFall .55s linear infinite;}
@keyframes rainFall{to{background-position:-66px 130px}}
body[data-bgscene="synthwave"] .bg-fx{position:fixed;inset:0;z-index:-1;overflow:hidden;background:linear-gradient(180deg,#2a0a4a 0%,#3a1053 50%,#0a0416 51%);}
body[data-bgscene="synthwave"] .bg-fx::before{content:'';position:absolute;left:50%;top:16%;width:34vmin;height:34vmin;transform:translateX(-50%);border-radius:50%;background:linear-gradient(180deg,#ffc04c,#ff2d95);box-shadow:0 0 70px rgba(255,45,149,0.5);}
body[data-bgscene="synthwave"] .bg-fx::after{content:'';position:absolute;left:-50%;right:-50%;bottom:-25%;height:65%;background-image:linear-gradient(rgba(255,45,149,0.55) 2px,transparent 2px),linear-gradient(90deg,rgba(255,45,149,0.55) 2px,transparent 2px);background-size:64px 64px;transform:perspective(320px) rotateX(72deg);animation:swGrid 1.1s linear infinite;}
@keyframes swGrid{to{background-position:0 64px}}

/* ── Floating notes & lights ── */
body[data-bgscene="notes"] .bg-fx,body[data-bgscene="notesgold"] .bg-fx{position:fixed;inset:0;z-index:-1;overflow:hidden;}
.p-note{position:absolute;color:var(--accent);text-shadow:0 0 12px var(--accent);animation:noteRise linear infinite;will-change:transform;user-select:none;}
@keyframes noteRise{0%{transform:translateY(0) rotate(-12deg);opacity:0}12%{opacity:1}100%{transform:translateY(-116vh) rotate(16deg);opacity:0}}
body[data-bgscene="bubbles"] .bg-fx{position:fixed;inset:0;z-index:-1;overflow:hidden;background:radial-gradient(120% 90% at 50% 110%,rgba(56,189,248,0.14),transparent 60%);}
.p-bubble{position:absolute;border-radius:50%;background:radial-gradient(circle at 35% 30%,rgba(255,255,255,0.6),var(--accent) 60%,transparent);opacity:.5;animation:bubbleRise linear infinite;}
@keyframes bubbleRise{0%{transform:translateY(0) scale(.8);opacity:0}15%{opacity:.6}100%{transform:translateY(-112vh) scale(1.15);opacity:0}}

/* ── Instruments ── */
body[data-bgscene="guitar"] .bg-fx{position:fixed;inset:0;z-index:-1;overflow:hidden;background:linear-gradient(180deg,#141009,#0a0805);}
.g-string{position:absolute;left:0;right:0;background:linear-gradient(90deg,rgba(224,176,106,0.12),var(--accent),rgba(224,176,106,0.12));box-shadow:0 0 6px rgba(224,176,106,0.5);transform-origin:center;animation:gVibe ease-in-out infinite alternate;}
@keyframes gVibe{from{transform:translateY(-1.6px) scaleY(1)}to{transform:translateY(1.6px) scaleY(1.7)}}
body[data-bgscene="piano"] .bg-fx{position:fixed;inset:0;z-index:-1;overflow:hidden;background:linear-gradient(180deg,#111116,#08080a);}
.pk{position:absolute;bottom:0;height:24%;background:#f3f3f6;border:1px solid #0a0a0c;border-radius:0 0 4px 4px;animation:pkPress ease-in-out infinite;}
.pk.blk{height:15%;background:#141416;z-index:2;border-radius:0 0 3px 3px;box-shadow:0 2px 4px rgba(0,0,0,.5);}
@keyframes pkPress{0%,86%,100%{transform:translateY(0);filter:none}90%{transform:translateY(5px);filter:brightness(.55) drop-shadow(0 0 8px var(--accent))}}
body[data-bgscene="vinyl"] .bg-fx{position:fixed;inset:0;z-index:-1;overflow:hidden;background:#08080b;}
body[data-bgscene="vinyl"] .bg-fx::before{content:'';position:absolute;left:50%;top:50%;width:150vmax;height:150vmax;transform:translate(-50%,-50%);border-radius:50%;background:repeating-radial-gradient(circle at center,#0c0c10 0 3px,#17171d 3px 6px);animation:spin 8s linear infinite;opacity:.75;}
body[data-bgscene="vinyl"] .bg-fx::after{content:'';position:absolute;left:50%;top:50%;width:120px;height:120px;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle,var(--accent) 0 30%,#0a0a0d 34%);box-shadow:0 0 30px rgba(230,181,102,0.3);animation:spin 8s linear infinite;}
body[data-bgscene="drums"] .bg-fx{position:fixed;inset:0;z-index:-1;overflow:hidden;background:radial-gradient(circle at 50% 50%,rgba(244,63,94,0.12),transparent 60%);}
body[data-bgscene="drums"] .bg-fx::before,body[data-bgscene="drums"] .bg-fx::after{content:'';position:absolute;left:50%;top:50%;border:2px solid var(--accent);border-radius:50%;transform:translate(-50%,-50%);animation:ripple 2s ease-out infinite;}
body[data-bgscene="drums"] .bg-fx::after{animation-delay:1s;}
@keyframes ripple{0%{width:0;height:0;opacity:.75}100%{width:135vmax;height:135vmax;opacity:0}}
body[data-bgscene="cassette"] .bg-fx{position:fixed;inset:0;z-index:-1;overflow:hidden;background:linear-gradient(180deg,#14100a,#0a0806);}
.c-reel{position:absolute;top:42%;width:24vmin;height:24vmin;border-radius:50%;border:2.5vmin solid rgba(224,176,106,0.35);box-shadow:0 0 0 1vmin rgba(224,176,106,0.12) inset;animation:spin 3s linear infinite;}
.c-reel::before{content:'';position:absolute;inset:18%;border-radius:50%;background:conic-gradient(var(--accent) 0 12%,transparent 12% 25%,var(--accent) 25% 37%,transparent 37% 50%,var(--accent) 50% 62%,transparent 62% 75%,var(--accent) 75% 87%,transparent 87%);opacity:.5;}

/* ── Audio-reactive ── */
body[data-bgscene="equalizer"] .bg-fx{position:fixed;inset:0;z-index:-1;display:flex;align-items:flex-end;gap:3px;padding:0 4px;background:linear-gradient(180deg,#0a0a14,#06060b);}
.eq-bar{flex:1;height:39%;background:linear-gradient(180deg,var(--accent),transparent);border-radius:3px 3px 0 0;transform-origin:bottom;animation:eqBounce ease-in-out infinite alternate;}
@keyframes eqBounce{from{transform:scaleY(.06)}to{transform:scaleY(1)}}
body[data-bgscene="vumeter"] .bg-fx{position:fixed;inset:0;z-index:-1;display:flex;align-items:flex-end;gap:6px;padding:0 8px;background:linear-gradient(180deg,#0c0c0e,#070708);}
.vu-bar{flex:1;height:39%;background:linear-gradient(180deg,#f43f5e 0 18%,#eab308 18% 42%,var(--accent) 42%);background-size:100% 100%;transform-origin:bottom;border-radius:2px;-webkit-mask-image:repeating-linear-gradient(180deg,#000 0 8px,transparent 8px 12px);mask-image:repeating-linear-gradient(180deg,#000 0 8px,transparent 8px 12px);animation:eqBounce ease-in-out infinite alternate;}
body[data-bgscene="waveform"] .bg-fx{position:fixed;inset:0;z-index:-1;display:flex;align-items:flex-end;gap:3px;padding:0 4px;background:#06070a;}
.wf-bar{flex:1;height:39%;background:var(--accent);border-radius:4px 4px 0 0;box-shadow:0 0 8px var(--accent);transform-origin:bottom;animation:wfBounce ease-in-out infinite alternate;}
@keyframes wfBounce{from{transform:scaleY(.08)}to{transform:scaleY(1)}}
body[data-bgscene="spectrum"] .bg-fx{position:fixed;inset:0;z-index:-1;overflow:hidden;background:radial-gradient(circle at 50% 50%,rgba(167,139,250,0.14),transparent 60%);}
.sp-spoke{position:absolute;left:50%;top:50%;height:0;width:0;transform-origin:center;}
.sp-bar{position:absolute;left:-2px;bottom:0;width:4px;height:16vmin;transform-origin:center bottom;background:linear-gradient(0deg,var(--accent),transparent);border-radius:3px;animation:eqBounce ease-in-out infinite alternate;}
body[data-bgscene="oscilloscope"] .bg-fx{position:fixed;inset:0;z-index:-1;overflow:hidden;background:radial-gradient(120% 90% at 50% 50%,rgba(52,211,153,0.10),transparent 60%);}
.osc{position:absolute;left:0;top:50%;width:200%;height:40vmin;transform:translateY(-50%);animation:oscScroll 2.2s linear infinite;}
.osc path{fill:none;stroke:var(--accent);stroke-width:2;filter:drop-shadow(0 0 6px var(--accent));vector-effect:non-scaling-stroke;}
@keyframes oscScroll{from{transform:translate(0,-50%)}to{transform:translate(-50%,-50%)}}

/* ── Layer visibility ── default hidden; scene templates flip it on. ── */
.bg-fx{display:none}
body[data-bgscene="aurora"] .bg-fx,body[data-bgscene="vapor"] .bg-fx,body[data-bgscene="nebula"] .bg-fx,body[data-bgscene="flow"] .bg-fx,body[data-bgscene="pulse"] .bg-fx,
body[data-bgscene="lightning"] .bg-fx,body[data-bgscene="lava"] .bg-fx,body[data-bgscene="embers"] .bg-fx,body[data-bgscene="smoke"] .bg-fx,body[data-bgscene="starfield"] .bg-fx,body[data-bgscene="rain"] .bg-fx,body[data-bgscene="synthwave"] .bg-fx,
body[data-bgscene="notes"] .bg-fx,body[data-bgscene="notesgold"] .bg-fx,body[data-bgscene="bubbles"] .bg-fx,
body[data-bgscene="guitar"] .bg-fx,body[data-bgscene="piano"] .bg-fx,body[data-bgscene="vinyl"] .bg-fx,body[data-bgscene="drums"] .bg-fx,body[data-bgscene="cassette"] .bg-fx,
body[data-bgscene="spectrum"] .bg-fx,body[data-bgscene="oscilloscope"] .bg-fx{display:block}
/* equalizer / vumeter / waveform set display:flex in their own rule (beats the default display:none) */

/* Respect reduced-motion: keep the themed background, drop the movement. */
@media (prefers-reduced-motion: reduce) {
  .bg-fx, .bg-fx *, .bg-fx::before, .bg-fx::after { animation: none !important; }
}

/* Custom background: color / image / video + dim overlay. */
#bg-media{position:fixed;inset:0;z-index:-3;background-size:cover;background-position:center;display:none}
#bg-media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
#bg-overlay{position:fixed;inset:0;z-index:-2;background:#000;opacity:0;display:none;pointer-events:none}