/* ================================================================
   THEME: SoundGarbo
   Aesthetic: near-black, orange accent, static SVG "circuit board"
   ambient background that powers on while playing.

   No background.js for this theme — the circuit board is pure CSS
   (pseudo-elements on .now-playing), so #bgCanvas stays empty and
   that's expected.

   NOTE ON THE SVG DATA-URI BELOW: the stroke/fill colors inside it
   are literal rgba() values, NOT var(--accent), because CSS custom
   properties cannot be referenced inside a data: URI. If you retheme
   this file's --accent, you must also manually update the two
   rgba(...) values inside the SVG string below to match. Search for
   "MANUAL SYNC" to find them.
   ================================================================ */

:root {
    --bg:         #0f0f0f;
    --surface:    #1a1a1a;
    --surface2:   #242424;
    --border:     #2e2e2e;
    --accent:       #ff5500;
    --accent-dim:   rgba(255, 85, 0, 0.18);
    --accent-light: #ff8800;
    --accent-hover: #e04d00;
    --accent-glow:      rgba(255, 85, 0, 0.45);
    --accent-glow-fade: rgba(255, 85, 0, 0);
    --text:       #ffffff;
    --muted:      #888888;
    --mono: 'SF Mono', 'Fira Code', 'Fira Mono', 'Consolas', monospace;
    --sans: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

    --logo-icon-gradient: linear-gradient(135deg, var(--accent) 0%, var(--accent-light) 100%);
    --logo-text-gradient: linear-gradient(135deg, #ffffff 0%, #aaaaaa 100%);
    --logo-text-color: #ffffff;
    --play-btn-icon: #ffffff;
    --play-btn-hover-filter: none;
    --track-fmt-border: #444444;
    --lossless:        #7eb8a4;
    --lossless-border:  rgba(126,184,164,0.5);
    --lossless-bg:      rgba(126,184,164,0.1);
    --drawer-shadow: 0 -4px 32px rgba(0,0,0,0.5);

    /* Casing: SoundGarbo is uppercase everywhere */
    --case-logo-text:       uppercase;
    --case-track-label:     uppercase;
    --case-playlist-context: uppercase;
    --case-track-title:     uppercase;
    --case-action-btn:      uppercase;
    --case-switcher-label:  uppercase;
    --case-playlist-pill:   uppercase;
    --case-track-name:      uppercase;
    --case-track-fmt:       uppercase;
    --case-drawer-label:    uppercase;
}

/* Circuit board — hidden at rest, powers on when playing.
   MANUAL SYNC: stroke='rgba(255,85,0,0.2)' and fill='rgba(255,85,0,0.35)'
   inside the SVG below correspond to --accent. */
.now-playing::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cg stroke='rgba(255,85,0,0.2)' stroke-width='1' fill='none'%3E%3C!-- Horizontal traces --%3E%3Cline x1='0' y1='40'  x2='120' y2='40'/%3E%3Cline x1='80' y1='40'  x2='80'  y2='90'/%3E%3Cline x1='80' y1='90'  x2='200' y2='90'/%3E%3Cline x1='20' y1='130' x2='20'  y2='160'/%3E%3Cline x1='20' y1='160' x2='160' y2='160'/%3E%3Cline x1='160' y1='160' x2='160' y2='130'/%3E%3Cline x1='100' y1='130' x2='200' y2='130'/%3E%3Cline x1='0' y1='180' x2='60'  y2='180'/%3E%3Cline x1='60' y1='180' x2='60'  y2='130'/%3E%3Cline x1='140' y1='60'  x2='200' y2='60'/%3E%3Cline x1='140' y1='40'  x2='140' y2='90'/%3E%3C!-- Vertical traces --%3E%3Cline x1='30'  y1='0'   x2='30'  y2='40'/%3E%3Cline x1='110' y1='0'   x2='110' y2='90'/%3E%3Cline x1='170' y1='60'  x2='170' y2='130'/%3E%3Cline x1='50'  y1='130' x2='50'  y2='200'/%3E%3Cline x1='120' y1='90'  x2='120' y2='200'/%3E%3C!-- Junction nodes --%3E%3Ccircle cx='80'  cy='40'  r='2.5' fill='rgba(255,85,0,0.35)'/%3E%3Ccircle cx='80'  cy='90'  r='2.5' fill='rgba(255,85,0,0.35)'/%3E%3Ccircle cx='160' cy='160' r='2.5' fill='rgba(255,85,0,0.35)'/%3E%3Ccircle cx='20'  cy='160' r='2.5' fill='rgba(255,85,0,0.35)'/%3E%3Ccircle cx='60'  cy='180' r='2.5' fill='rgba(255,85,0,0.35)'/%3E%3Ccircle cx='60'  cy='130' r='2.5' fill='rgba(255,85,0,0.35)'/%3E%3Ccircle cx='140' cy='60'  r='2.5' fill='rgba(255,85,0,0.35)'/%3E%3Ccircle cx='140' cy='40'  r='2.5' fill='rgba(255,85,0,0.35)'/%3E%3Ccircle cx='170' cy='130' r='2.5' fill='rgba(255,85,0,0.35)'/%3E%3Ccircle cx='110' cy='90'  r='2.5' fill='rgba(255,85,0,0.35)'/%3E%3C/g%3E%3C/svg%3E");
    background-size: 200px 200px;
    /* Gradient mask: full strength at bottom, fades to ~20% at top
       so traces fill the whole panel but feel grounded at the bottom */
    -webkit-mask-image: linear-gradient(
        to top,
        black 0%,
        black 40%,
        rgba(0,0,0,0.4) 70%,
        rgba(0,0,0,0.12) 100%
    );
    mask-image: linear-gradient(
        to top,
        black 0%,
        black 40%,
        rgba(0,0,0,0.4) 70%,
        rgba(0,0,0,0.12) 100%
    );
    opacity: 0;
    transition: opacity 1.4s ease;
    pointer-events: none;
    z-index: 0;
}
/* Orange bloom — off at rest, rises when playing */
.now-playing::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(
        ellipse 110% 55% at 50% 100%,
        rgba(255, 85, 0, 0.18) 0%,
        rgba(255, 85, 0, 0.06) 50%,
        transparent 70%
    );
    opacity: 0;
    transition: opacity 1.4s ease;
    pointer-events: none;
    z-index: 0;
}
/* Playing: circuit powers on with drift + bloom pulses */
.now-playing.playing::before {
    opacity: 1;
    animation: tracesDrift 18s linear infinite;
}
.now-playing.playing::after {
    opacity: 1;
    animation: bloomPulse 3.5s ease-in-out infinite;
}
@keyframes tracesDrift {
    0%   { background-position: 0px 0px; }
    100% { background-position: -200px 0px; }
}
@keyframes bloomPulse {
    0%, 100% { opacity: 0.6; }
    50%       { opacity: 1;   }
}

@media (prefers-reduced-motion: reduce) {
    .now-playing.playing::before { animation: none; }
    .now-playing.playing::after  { animation: none; }
}