/**
 * Radio Station Theme - Audio Visualizer Styles
 * Styles for the audio spectrum visualization overlay
 * 
 * @package Radio_Station_Theme
 */

/* ==========================================================================
   Audio Visualizer Canvas
   ========================================================================== */

#audio-visualizer-canvas {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    /* z-index između header-background (-1) i header-container (0) */
    z-index: 0;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
    /* Canvas je transparentan - ne blokira pozadinu */
    background: transparent;
}

/* Active state when playing */
#audio-visualizer-canvas.active {
    opacity: 1;
}

/* ==========================================================================
   Nav Bar Visualizer (when header bg-fade is enabled)
   ========================================================================== */

.nav-visualizer-canvas {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.4s ease;
    background: transparent;
}

/* Contain canvas within nav only on desktop (mobile nav is scrollable drawer) */
@media (min-width: 783px) {
    .main-navigation:has(.nav-visualizer-canvas) {
        overflow: hidden;
    }
}

/* ==========================================================================
   Loading State Styles
   ========================================================================== */

/* Show subtle pulse animation while buffering */
body.radio-buffering .header-background::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.1),
        transparent
    );
    animation: shimmer 2s infinite;
    z-index: 3;
    pointer-events: none;
}

@keyframes shimmer {
    0% {
        left: -100%;
    }
    100% {
        left: 100%;
    }
}

/* ==========================================================================
   Responsive Adjustments
   ========================================================================== */

/* Mobile devices - slightly reduced opacity for readability */
@media screen and (max-width: 768px) {
    #audio-visualizer-canvas.active {
        opacity: 0.5;
    }

    /* Nav visualizer not needed on mobile (nav is off-canvas drawer) */
    .nav-visualizer-canvas {
        display: none !important;
    }
}

/* Very small screens - lower opacity but keep visible */
@media screen and (max-width: 480px) {
    #audio-visualizer-canvas.active {
        opacity: 0.4;
    }
}

/* ==========================================================================
   Print Styles
   ========================================================================== */

@media print {
    #audio-visualizer-canvas {
        display: none;
    }
}