/* ============================================================
   Graphic art layers. Everything here is driven by theme variables
   (--accent, --accent-2, --bg, --text …) so recolouring a theme
   recolours its artwork. Sizes use container-query units (cqh, cqw)
   so the same art also works inside the small admin thumbnails.
   ============================================================ */

.page-art { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }

.hero-art {
  position: absolute; z-index: -1; left: 50%; width: 100vw; top: -110px; bottom: -40px; transform: translateX(-50%);
  overflow: hidden; pointer-events: none; container-type: size;
  -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 calc(100% - 90px), transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0, #000 calc(100% - 90px), transparent 100%);
}
.hero-art > * { position: absolute; }
html[data-art='none'] .hero-art, html[data-art='none'] .page-art { display: none; }
.pv .hero-art { inset: 0; width: 100%; transform: none; left: 0; -webkit-mask-image: none; mask-image: none; z-index: 0; }

@keyframes a-spin { to { transform: rotate(360deg); } }
@keyframes a-float { 50% { transform: translate3d(0, -3cqh, 0) rotate(3deg); } }
@keyframes a-tw { 50% { opacity: .15; } }

/* ---------- vinyl ---------- */
[data-art='vinyl'] .a-vglow { right: -10cqw; top: 50%; width: 120cqh; aspect-ratio: 1; margin-top: -60cqh; background: radial-gradient(circle, color-mix(in srgb, var(--accent) 35%, transparent), transparent 65%); filter: blur(30px); }
[data-art='vinyl'] .a-vinyl {
  right: -14cqh; top: 50%; width: 118cqh; aspect-ratio: 1; margin-top: -59cqh; border-radius: 50%; animation: a-spin 16s linear infinite; opacity: .95;
  background:
    radial-gradient(circle, var(--bg) 0 2.2%, var(--accent) 2.6% 14%, #0b0b0b 14.4% 15.4%, transparent 15.8%),
    repeating-radial-gradient(circle, #0c0c0c 0 2px, #171717 2px 3px),
    conic-gradient(from 20deg, transparent 0 18%, rgba(255, 255, 255, .22) 24%, transparent 30% 62%, rgba(255, 255, 255, .16) 70%, transparent 78%);
  box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .8), 0 0 0 2px rgba(255, 255, 255, .05);
}
[data-art='vinyl'] .a-vinyl i { position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle at 50% 50%, transparent 0 17%, rgba(255, 255, 255, .05) 17.4% 17.8%, transparent 18% 40%, rgba(255, 255, 255, .04) 40.4% 40.8%, transparent 41% 66%, rgba(255, 255, 255, .04) 66.4% 66.8%, transparent 67%); }
[data-art='vinyl'] .a-vinyl2 { right: auto; left: -34cqh; top: 118%; width: 90cqh; margin-top: 0; opacity: .22; animation-duration: 24s; animation-direction: reverse; filter: saturate(.5); }
.pv[data-art='vinyl'] .a-vinyl { right: -18%; width: 130%; margin-top: -65%; }

/* ---------- synthwave ---------- */
[data-art='sun'] .a-sun { right: 7cqw; bottom: 22%; width: min(78cqh, 40cqw); aspect-ratio: 1; filter: drop-shadow(0 0 40px color-mix(in srgb, var(--accent) 60%, transparent)); }
[data-art='sun'] .a-sunglow { right: 0; bottom: 18%; width: 60cqw; height: 60cqh; background: radial-gradient(60% 60% at 70% 55%, color-mix(in srgb, var(--accent) 28%, transparent), transparent 70%); }
[data-art='sun'] .a-floor {
  left: -40%; right: -40%; bottom: 0; height: 40%;
  background:
    repeating-linear-gradient(90deg, var(--accent-2) 0 2px, transparent 2px 70px),
    repeating-linear-gradient(0deg, var(--accent-2) 0 2px, transparent 2px 46px);
  background-position: 0 0, 0 0;
  transform: perspective(240px) rotateX(58deg); transform-origin: 50% 100%;
  -webkit-mask-image: linear-gradient(to top, #000, transparent 92%); mask-image: linear-gradient(to top, #000, transparent 92%);
  animation: a-grid 2.4s linear infinite; opacity: .85; box-shadow: 0 -2px 30px var(--accent-2);
}
@keyframes a-grid { to { background-position: 0 0, 0 46px; } }
.pv[data-art='sun'] .a-sun { right: 6%; width: 60%; bottom: 20%; }
.pv[data-art='sun'] .a-floor { background-size: 28px 100%, 100% 18px; animation: none; }

/* ---------- equalizer ---------- */
[data-art='eq'] .a-eq { left: 0; right: 0; bottom: 0; height: 52%; display: flex; align-items: flex-end; gap: .5%; padding: 0 .5%; }
[data-art='eq'] .a-eq i {
  flex: 1; height: 100%; transform-origin: bottom; border-radius: 6px 6px 0 0;
  background: linear-gradient(to top, var(--accent), var(--accent-2)); opacity: .36;
  transform: scaleY(var(--h)); animation: a-eq var(--t) ease-in-out infinite alternate; animation-delay: var(--d);
}
@keyframes a-eq { from { transform: scaleY(.06); } to { transform: scaleY(var(--h)); } }
[data-art='eq'] .a-eqglow { left: 0; right: 0; bottom: 0; height: 40%; background: linear-gradient(to top, color-mix(in srgb, var(--accent) 30%, transparent), transparent); }

/* ---------- holo ---------- */
[data-art='holo'] .a-holo { inset: -30%; background: conic-gradient(from 0deg at 50% 50%, #ff9ad5, #ffd29a, #c8ff9a, #9affea, #9ab8ff, #d49aff, #ff9ad5); filter: blur(70px); opacity: .5; animation: a-spin 36s linear infinite; }
[data-art='holo'] .a-sph { border-radius: 50%; background: radial-gradient(circle at 30% 28%, #fff 0 8%, var(--accent-2) 30%, var(--accent) 72%, color-mix(in srgb, var(--accent) 50%, #000) 100%); box-shadow: 0 30px 50px -20px color-mix(in srgb, var(--accent) 60%, transparent), inset -10px -14px 30px rgba(0, 0, 0, .18); animation: a-float 9s ease-in-out infinite; }
[data-art='holo'] .s1 { left: 4%; top: 22%; width: min(15cqh, 9cqw); aspect-ratio: 1; }
[data-art='holo'] .s2 { right: 3%; top: 10%; width: min(24cqh, 14cqw); aspect-ratio: 1; animation-delay: -3s; }
[data-art='holo'] .s3 { right: 10%; bottom: 20%; width: min(10cqh, 6cqw); aspect-ratio: 1; animation-delay: -5s; }
[data-art='holo'] .a-hring { left: 14%; bottom: 6%; width: 30cqh; aspect-ratio: 1; border-radius: 50%; background: conic-gradient(from 0deg, #ff9ad5, #9affea, #9ab8ff, #d49aff, #ff9ad5); -webkit-mask: radial-gradient(circle, transparent 57%, #000 59%); mask: radial-gradient(circle, transparent 57%, #000 59%); animation: a-spin 14s linear infinite; opacity: .85; }
[data-art='holo'] .a-hstar { background: linear-gradient(135deg, #fff, var(--accent-2)); clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%); animation: a-tw 4s ease-in-out infinite; }
[data-art='holo'] .st1 { left: 30%; top: 14%; width: 9cqh; aspect-ratio: 1; }
[data-art='holo'] .st2 { right: 34%; top: 40%; width: 6cqh; aspect-ratio: 1; animation-delay: -1.4s; }
[data-art='holo'] .st3 { left: 8%; top: 60%; width: 7cqh; aspect-ratio: 1; animation-delay: -2.4s; }

/* ---------- cosmos ---------- */
.pa-stars circle { fill: var(--text); }
.pa-stars circle.tw { animation: a-tw 4s ease-in-out infinite; }
[data-art='cosmos'] .a-neb { inset: 0; background: radial-gradient(40% 55% at 78% 45%, color-mix(in srgb, var(--accent) 34%, transparent), transparent 70%), radial-gradient(35% 40% at 15% 85%, color-mix(in srgb, var(--accent-2) 24%, transparent), transparent 70%); filter: blur(16px); }
[data-art='cosmos'] .a-orbit { left: 74%; top: 50%; width: var(--s); aspect-ratio: 1; margin: calc(var(--s) / -2) 0 0 calc(var(--s) / -2); border-radius: 50%; border: 1px solid color-mix(in srgb, var(--text) 16%, transparent); animation: a-spin var(--t) linear infinite; }
[data-art='cosmos'] .a-orbit i { position: absolute; top: -6px; left: 50%; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: var(--c); box-shadow: 0 0 14px 2px var(--c); }
[data-art='cosmos'] .o1 { --s: 78cqh; --t: 26s; --c: var(--accent-2); }
[data-art='cosmos'] .o2 { --s: 108cqh; --t: 44s; --c: var(--accent); border-style: dashed; animation-direction: reverse; }
[data-art='cosmos'] .o3 { --s: 144cqh; --t: 70s; --c: var(--text); }
[data-art='cosmos'] .a-planet { left: -6cqh; bottom: -12cqh; width: 40cqh; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 30% 28%, color-mix(in srgb, var(--accent-2) 70%, #fff), var(--accent) 60%, color-mix(in srgb, var(--accent) 40%, #000)); box-shadow: 0 0 80px -10px color-mix(in srgb, var(--accent) 60%, transparent), inset -18px -22px 40px rgba(0, 0, 0, .45); }
.pv[data-art='cosmos'] .a-orbit { left: 70%; }

/* ---------- stage ---------- */
[data-art='stage'] .a-beam {
  top: -14%; left: var(--x); width: 34cqw; height: 128%; margin-left: -17cqw; transform-origin: 50% 0;
  background: linear-gradient(to bottom, color-mix(in srgb, var(--c) 78%, transparent), transparent 82%);
  clip-path: polygon(46% 0, 54% 0, 100% 100%, 0 100%); mix-blend-mode: screen; filter: blur(5px);
  animation: a-sweep var(--t) ease-in-out infinite alternate; animation-delay: var(--d);
}
@keyframes a-sweep { from { transform: rotate(calc(var(--a) * -1)); } to { transform: rotate(var(--a)); } }
[data-art='stage'] .a-haze { inset: auto 0 0 0; height: 60%; background: radial-gradient(70% 90% at 50% 100%, color-mix(in srgb, var(--accent) 24%, transparent), transparent 70%); }
[data-art='stage'] .a-crowd { left: 0; right: 0; bottom: -2%; height: 12%; background: radial-gradient(circle at 50% 100%, #000 0 58%, transparent 60%) 0 0 / 7% 100% repeat-x; }
[data-art='stage'] .c2 { bottom: -5%; height: 9%; background-size: 5% 100%; background-position: 2.5% 0; opacity: .9; }

/* ---------- night city ---------- */
[data-art='city'] .a-city { inset: 0; width: 100%; height: 100%; }
.a-city .cf { fill: color-mix(in srgb, var(--accent) 22%, var(--bg)); }
.a-city .cn { fill: color-mix(in srgb, var(--bg) 92%, #000); }
.a-city .cw { fill: #ffd98a; opacity: .9; }
.a-city .cw.w2 { fill: var(--accent-2); }
.a-city .cw.tw { animation: a-tw 5s ease-in-out infinite; }

/* ---------- blobs ---------- */
@keyframes a-morph { 0%, 100% { border-radius: 58% 42% 36% 64% / 56% 38% 62% 44%; } 33% { border-radius: 38% 62% 58% 42% / 44% 62% 38% 56%; } 66% { border-radius: 62% 38% 44% 56% / 36% 52% 48% 64%; } }
[data-art='blob'] .a-blob { width: 62cqh; aspect-ratio: 1; animation: a-morph 14s ease-in-out infinite, a-float 11s ease-in-out infinite; filter: saturate(1.1); }
[data-art='blob'] .b1 { right: 6%; top: 4%; background: linear-gradient(135deg, var(--accent), var(--accent-2)); }
[data-art='blob'] .b2 { left: -6%; bottom: -10%; width: 52cqh; background: linear-gradient(200deg, var(--accent-2), color-mix(in srgb, var(--accent) 40%, #fff)); animation-delay: -4s; opacity: .9; }
[data-art='blob'] .b3 { right: 30%; bottom: -16%; width: 34cqh; background: color-mix(in srgb, var(--accent) 60%, #fff); animation-delay: -8s; opacity: .55; }
[data-art='blob'] .a-bstar { left: 47%; top: 17%; width: 13cqh; aspect-ratio: 1; background: var(--text); clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%); animation: a-spin 14s linear infinite; }
[data-art='blob'] .a-bring { left: 38%; top: 6%; width: 14cqh; aspect-ratio: 1; border-radius: 50%; border: 3px solid var(--text); animation: a-float 8s ease-in-out infinite; }
[data-art='blob'] .a-bdot { border-radius: 50%; background: var(--accent-2); aspect-ratio: 1; }
[data-art='blob'] .d1 { right: 46%; bottom: 14%; width: 6cqh; }
[data-art='blob'] .d2 { right: 4%; bottom: 22%; width: 9cqh; background: var(--accent); }

/* ---------- glitch ---------- */
[data-art='glitch'] .a-gbars { inset: 0; }
[data-art='glitch'] .a-gbars i { position: absolute; background: var(--c); opacity: 0; mix-blend-mode: screen; animation: a-gl 4s steps(1) infinite; }
@keyframes a-gl { 0%, 86%, 100% { opacity: 0; transform: none; } 87% { opacity: .85; transform: translateX(-12px); } 90% { opacity: .5; transform: translateX(16px); } 93% { opacity: .9; transform: none; } 96% { opacity: 0; } }
[data-art='glitch'] .a-scan { inset: 0; background: repeating-linear-gradient(0deg, rgba(255, 255, 255, .04) 0 1px, transparent 1px 4px); }
[data-art='glitch'] .a-vig { inset: 0; background: radial-gradient(80% 80% at 50% 50%, transparent 55%, rgba(0, 0, 0, .7)); }

/* ---------- riso halftone ---------- */
[data-art='halftone'] .a-ht { aspect-ratio: 1; border-radius: 50%; mix-blend-mode: multiply; }
[data-art='halftone'] .h1 { right: 8%; top: -22%; width: 96cqh; background: radial-gradient(circle, var(--accent) 36%, transparent 38%) 0 0 / 16px 16px; -webkit-mask-image: radial-gradient(circle at 40% 40%, #000 0, transparent 70%); mask-image: radial-gradient(circle at 40% 40%, #000 0, transparent 70%); }
[data-art='halftone'] .h2 { right: -6%; top: 6%; width: 86cqh; background: radial-gradient(circle, var(--accent-2) 36%, transparent 38%) 4px 4px / 16px 16px; -webkit-mask-image: radial-gradient(circle at 60% 55%, #000 0, transparent 68%); mask-image: radial-gradient(circle at 60% 55%, #000 0, transparent 68%); }
[data-art='halftone'] .h3 { left: -10%; bottom: -30%; width: 80cqh; background: radial-gradient(circle, var(--accent-2) 34%, transparent 36%) 0 0 / 14px 14px; opacity: .8; -webkit-mask-image: radial-gradient(circle, #000 0, transparent 70%); mask-image: radial-gradient(circle, #000 0, transparent 70%); }
[data-art='halftone'] .a-burst { right: 22%; bottom: 8%; width: 24cqh; fill: #ffd23f; stroke: var(--text); stroke-width: 2; animation: a-spin 30s linear infinite; mix-blend-mode: multiply; }

/* ---------- waves ---------- */
[data-art='waves'] .a-wave { left: 0; top: 6%; width: 200%; height: 72%; animation: a-slide var(--t) linear infinite; }
@keyframes a-slide { to { transform: translateX(-50%); } }
.a-wave path { fill: none; stroke: var(--accent); stroke-width: 3; vector-effect: non-scaling-stroke; }
.a-wave.w0 path { fill: color-mix(in srgb, var(--accent) 10%, transparent); stroke: color-mix(in srgb, var(--accent) 60%, transparent); }
.a-wave.w1 path { stroke: var(--accent-2); opacity: .9; }
.a-wave.w2 path { stroke: var(--accent); opacity: .55; }
.a-wave.w3 path { stroke: var(--accent-2); opacity: .35; stroke-width: 2; }
[data-art='waves'] .a-dots { inset: 0; background: radial-gradient(color-mix(in srgb, var(--text) 18%, transparent) 1px, transparent 1.4px) 0 0 / 26px 26px; -webkit-mask-image: linear-gradient(transparent, #000 60%); mask-image: linear-gradient(transparent, #000 60%); }

/* ---------- studio rack ---------- */
[data-art='rack'] .a-rack {
  right: 5cqw; top: 50%; width: min(46cqw, 120cqh); margin-top: -34cqh; padding: 3cqh 3cqh 2.4cqh; display: grid; gap: 2.2cqh;
  border-radius: 10px; border: 1px solid #3a3a3a; background: linear-gradient(180deg, #2b2b2b, #1b1b1b 60%, #161616);
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .8), inset 0 1px 0 rgba(255, 255, 255, .1); transform: rotate(-1.5deg);
}
.a-rack .scr { position: absolute; width: 1.8cqh; height: 1.8cqh; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #777, #222); box-shadow: inset 0 0 0 1px #000; }
.a-rack .scr::after { content: ''; position: absolute; left: 20%; right: 20%; top: 46%; height: 8%; background: #111; transform: rotate(35deg); }
.a-rack .s1 { left: 1cqh; top: 1cqh; } .a-rack .s2 { right: 1cqh; top: 1cqh; } .a-rack .s3 { left: 1cqh; bottom: 1cqh; } .a-rack .s4 { right: 1cqh; bottom: 1cqh; }
.a-rack .vus { display: grid; grid-template-columns: 1fr 1fr; gap: 2cqh; }
.a-vu { width: 100%; display: block; }
.a-vu .face { fill: color-mix(in srgb, var(--accent) 22%, #f6e7bf); stroke: #000; stroke-width: 3; }
.a-vu line { stroke: #2a2112; stroke-width: 2.2; }
.a-vu line.red { stroke: #c0281a; }
.a-vu .needle { stroke: #c0281a; stroke-width: 2.6; transform-origin: 100px 118px; animation: a-needle 2.2s ease-in-out infinite alternate; }
.a-vu .n2 { animation-duration: 1.7s; animation-delay: -.8s; }
.a-vu .hub { fill: #222; }
@keyframes a-needle { 0% { transform: rotate(-38deg); } 30% { transform: rotate(8deg); } 55% { transform: rotate(-14deg); } 100% { transform: rotate(32deg); } }
.a-rack .knobs { display: flex; justify-content: space-around; padding: 0 4%; }
.a-rack .knobs i { width: 8.4cqh; aspect-ratio: 1; border-radius: 50%; background: conic-gradient(from 0deg, #3a3a3a, #111, #3a3a3a, #111, #3a3a3a); border: 2px solid #000; box-shadow: 0 6px 10px rgba(0, 0, 0, .5), 0 0 0 3px #222, 0 0 0 4px #444; position: relative; animation: a-knob 9s ease-in-out infinite alternate; }
.a-rack .knobs i::after { content: ''; position: absolute; left: 50%; top: 8%; width: 3px; height: 30%; margin-left: -1.5px; background: var(--accent); box-shadow: 0 0 8px var(--accent); border-radius: 2px; }
.a-rack .knobs i:nth-child(2) { animation-duration: 6s; } .a-rack .knobs i:nth-child(3) { animation-duration: 12s; animation-direction: alternate-reverse; } .a-rack .knobs i:nth-child(4) { animation-duration: 7s; }
@keyframes a-knob { from { transform: rotate(-120deg); } to { transform: rotate(110deg); } }
.a-rack .leds { display: grid; grid-template-columns: repeat(20, 1fr); gap: 3px; }
.a-rack .leds i { height: 1.7cqh; border-radius: 2px; background: #35e06b; box-shadow: 0 0 8px #35e06b; animation: a-led 1.1s ease-in-out infinite alternate; animation-delay: calc(var(--i) * -.09s); }
.a-rack .leds i:nth-child(n+14) { background: var(--accent); box-shadow: 0 0 8px var(--accent); }
.a-rack .leds i:nth-child(n+18) { background: #ff4a36; box-shadow: 0 0 8px #ff4a36; }
@keyframes a-led { from { opacity: .18; } to { opacity: 1; } }

/* ---------- neon ---------- */
.pa-bricks rect { fill: color-mix(in srgb, var(--text) 4.5%, var(--bg)); }
.pa-vig { position: absolute; inset: 0; background: radial-gradient(90% 80% at 50% 30%, transparent 30%, var(--bg) 100%); }
[data-art='neon'] .a-neonsign { fill: none; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; animation: a-flick 5s linear infinite; }
[data-art='neon'] .n1 { left: 3%; top: 16%; height: 48cqh; stroke: var(--accent-2); filter: drop-shadow(0 0 3px var(--accent-2)) drop-shadow(0 0 12px var(--accent-2)) drop-shadow(0 0 26px var(--accent-2)); transform: rotate(-8deg); }
[data-art='neon'] .n2 { right: 4%; top: 10%; height: 44cqh; stroke: var(--accent); filter: drop-shadow(0 0 3px var(--accent)) drop-shadow(0 0 12px var(--accent)) drop-shadow(0 0 26px var(--accent)); transform: rotate(7deg); animation-delay: -2s; }
[data-art='neon'] .n3 { right: 12%; bottom: 8%; height: 18cqh; stroke: var(--accent-2); filter: drop-shadow(0 0 3px var(--accent-2)) drop-shadow(0 0 14px var(--accent-2)); animation-delay: -3.4s; }
@keyframes a-flick { 0%, 18%, 22%, 62%, 66%, 100% { opacity: 1; } 20%, 64% { opacity: .35; } 21%, 65% { opacity: .9; } }

/* ---------- lo-fi hills ---------- */
[data-art='hills'] .a-hills { inset: 0; width: 100%; height: 100%; }
.a-hills .hsun { filter: drop-shadow(0 0 60px color-mix(in srgb, var(--accent-2) 60%, transparent)); }
.a-hills .hcl ellipse { fill: color-mix(in srgb, var(--text) 14%, transparent); }
.a-hills .hcl { animation: a-drift 40s ease-in-out infinite alternate; }
@keyframes a-drift { to { transform: translateX(60px); } }
.a-hills .h1 { fill: color-mix(in srgb, var(--accent) 48%, var(--bg)); }
.a-hills .h2 { fill: color-mix(in srgb, var(--accent) 32%, var(--bg)); }
.a-hills .h3 { fill: color-mix(in srgb, var(--accent) 18%, var(--bg)); }
.a-hills .h4 { fill: var(--bg); }
.a-hills .hbirds path { fill: none; stroke: var(--text); stroke-width: 2; opacity: .6; stroke-linecap: round; }

@media (prefers-reduced-motion: reduce) { .hero-art *, .page-art * { animation: none !important; } }