/* Quantum Music Player Dynamic Styles - CSP Compliant */

/* Volume toggle states */
.volume-toggle.muted {
    opacity: 0.5;
}

.volume-toggle.unmuted {
    opacity: 1;
}

/* Visualizer states */
.bar, .wave-bar {
    animation-duration: 1.5s;
    box-shadow: 0 0 6px currentColor;
    /* Use CSS custom properties for dynamic updates (CSP compliant) */
    opacity: var(--bar-opacity, 0.7);
    height: var(--bar-height, 12px);
    background: linear-gradient(to top,
        hsl(var(--bar-hue, 180), 100%, 60%),
        hsl(calc(var(--bar-hue, 180) + 40), 100%, 70%)
    );
    transition: all 0.1s ease-out;
}

.bar.enhanced, .wave-bar.enhanced {
    opacity: 1;
    animation-duration: 1s;
    box-shadow: 0 0 10px currentColor;
}

.bar.normalized, .wave-bar.normalized {
    opacity: 0.7;
    animation-duration: 1.5s;
    box-shadow: 0 0 6px currentColor;
}

.bar.loading, .wave-bar.loading {
    opacity: 0.3;
    animation-duration: 2s;
}

/* Audio error message */
.audio-error-message {
    color: var(--accent-color);
    font-size: 0.8rem;
    text-align: center;
    opacity: 0.8;
}

/* Quantum particles */
@keyframes quantumFloat {
    0%, 100% {
        opacity: 0;
        transform: translateY(0px) scale(0.8);
    }
    50% {
        opacity: 0.6;
        transform: translateY(-20px) scale(1.2);
    }
}

.quantum-particle {
    position: absolute;
    width: 3px;
    height: 3px;
    background: var(--primary-color);
    border-radius: 50%;
    opacity: 0;
    pointer-events: none;
    box-shadow: 0 0 6px currentColor;
    /* Use CSS custom properties set by JavaScript */
    animation-name: quantumFloat;
    animation-duration: var(--particle-duration, 3s);
    animation-delay: var(--particle-delay, 0s);
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    top: var(--particle-top, 50%);
    left: var(--particle-left, 50%);
    z-index: -1;
}

/* Play prompt */
@keyframes promptPulse {
    0%, 100% {
        transform: translateX(-50%) scale(1);
        opacity: 1;
    }
    50% {
        transform: translateX(-50%) scale(1.05);
        opacity: 0.9;
    }
}

.play-prompt {
    position: absolute;
    top: -40px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--glass-bg);
    color: var(--primary-color);
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 0.8rem;
    border: 1px solid var(--primary-color);
    animation: promptPulse 2s ease-in-out infinite;
    cursor: pointer;
    z-index: 10;
}

/* Error state */
.audio-error {
    color: var(--accent-color);
    font-size: 0.8rem;
    text-align: center;
    opacity: 0.8;
}

/* Spectrum lines - will use CSS custom properties for dynamic values */
.spectrum-line {
    transition: transform 50ms ease-out, opacity 50ms ease-out;
}

/* Dynamic spectrum line styling via CSS variables (CSP compliant) */
/* Use actual gradients as defaults so lines are visible before JavaScript updates */
.bass-line {
    transform: var(--bass-scale, scaleY(1));
    background: var(--bass-gradient, linear-gradient(90deg, #8B0000, #DC143C, #FF6347, #FF4500, #DC143C, #8B0000));
    box-shadow: var(--bass-shadow, 0 0 3px rgba(220, 20, 60, 0.5));
    opacity: var(--bass-opacity, 0.6);
}

.low-mid-line {
    transform: var(--low-mid-scale, scaleY(1));
    background: var(--low-mid-gradient, linear-gradient(90deg, #FF1493, #FF69B4, #FFB6C1, #FF69B4, #FF1493));
    box-shadow: var(--low-mid-shadow, 0 0 3px rgba(255, 20, 147, 0.5));
    opacity: var(--low-mid-opacity, 0.6);
}

.mid-line {
    transform: var(--mid-scale, scaleY(1));
    background: var(--mid-gradient, linear-gradient(90deg, #32CD32, #00FF7F, #98FB98, #00FF7F, #32CD32));
    box-shadow: var(--mid-shadow, 0 0 3px rgba(50, 205, 50, 0.5));
    opacity: var(--mid-opacity, 0.6);
}

.high-mid-line {
    transform: var(--high-mid-scale, scaleY(1));
    background: var(--high-mid-gradient, linear-gradient(90deg, #00CED1, #40E0D0, #AFEEEE, #40E0D0, #00CED1));
    box-shadow: var(--high-mid-shadow, 0 0 3px rgba(0, 206, 209, 0.5));
    opacity: var(--high-mid-opacity, 0.6);
}

.treble-line {
    transform: var(--treble-scale, scaleY(1));
    background: var(--treble-gradient, linear-gradient(90deg, #1E90FF, #4169E1, #87CEEB, #4169E1, #1E90FF));
    box-shadow: var(--treble-shadow, 0 0 3px rgba(30, 144, 255, 0.5));
    opacity: var(--treble-opacity, 0.6);
}

.high-line {
    transform: var(--high-scale, scaleY(1));
    background: var(--high-gradient, linear-gradient(90deg, #9370DB, #8A2BE2, #DDA0DD, #8A2BE2, #9370DB));
    box-shadow: var(--high-shadow, 0 0 3px rgba(147, 112, 219, 0.5));
    opacity: var(--high-opacity, 0.6);
}

.ultra-high-line {
    transform: var(--ultra-high-scale, scaleY(1));
    background: var(--ultra-high-gradient, linear-gradient(90deg, #FF8C00, #FFA500, #FFD700, #FFA500, #FF8C00));
    box-shadow: var(--ultra-high-shadow, 0 0 3px rgba(255, 140, 0, 0.5));
    opacity: var(--ultra-high-opacity, 0.6);
}

.presence-line {
    transform: var(--presence-scale, scaleY(1));
    background: var(--presence-gradient, linear-gradient(90deg, #FF00FF, #DA70D6, #EE82EE, #DA70D6, #FF00FF));
    box-shadow: var(--presence-shadow, 0 0 3px rgba(255, 0, 255, 0.5));
    opacity: var(--presence-opacity, 0.6);
}

/* Dynamic wave bars */
.bar:nth-child(1) { height: var(--bar-0-height, 12px); opacity: var(--bar-0-opacity, 0.7); background: var(--bar-0-gradient, currentColor); }
.bar:nth-child(2) { height: var(--bar-1-height, 20px); opacity: var(--bar-1-opacity, 0.7); background: var(--bar-1-gradient, currentColor); }
.bar:nth-child(3) { height: var(--bar-2-height, 12px); opacity: var(--bar-2-opacity, 0.7); background: var(--bar-2-gradient, currentColor); }
.bar:nth-child(4) { height: var(--bar-3-height, 20px); opacity: var(--bar-3-opacity, 0.7); background: var(--bar-3-gradient, currentColor); }
.bar:nth-child(5) { height: var(--bar-4-height, 12px); opacity: var(--bar-4-opacity, 0.7); background: var(--bar-4-gradient, currentColor); }
.bar:nth-child(6) { height: var(--bar-5-height, 20px); opacity: var(--bar-5-opacity, 0.7); background: var(--bar-5-gradient, currentColor); }
.bar:nth-child(7) { height: var(--bar-6-height, 12px); opacity: var(--bar-6-opacity, 0.7); background: var(--bar-6-gradient, currentColor); }
.bar:nth-child(8) { height: var(--bar-7-height, 20px); opacity: var(--bar-7-opacity, 0.7); background: var(--bar-7-gradient, currentColor); }