/**
 * SIMPLE AMBILIGHT v2.0
 * Только фон пульсирует - без перекрытий
 */

/* ============================================
   ANIMATED BACKGROUND
   ============================================ */

body {
    position: relative;
    overflow-x: hidden;
}

body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    background: radial-gradient(ellipse at center, 
        rgba(10,10,15,1) 0%, 
        rgba(5,5,10,1) 100%);
    transition: all 0.5s ease;
}

/* Активный режим - фон пульсирует ПЛАВНО */
body.visualizer-active::before {
    animation: background-pulse 4s ease-in-out infinite;
}

@keyframes background-pulse {
    0%, 100% {
        background: radial-gradient(ellipse at center, 
            rgba(10,10,15,1) 0%, 
            rgba(5,5,10,1) 100%);
        opacity: 1;
    }
    50% {
        background: radial-gradient(ellipse at center, 
            rgba(15,12,18,1) 0%, 
            rgba(8,6,12,1) 100%);
        opacity: 0.95;
    }
}

/* ============================================
   GENRE COLORS - меняем цвета под жанр
   ============================================ */

/* Power Metal - золотые оттенки */
body.visualizer-active.genre-power-metal::before {
    animation: pulse-power-metal 5s ease-in-out infinite;
}

@keyframes pulse-power-metal {
    0%, 100% {
        background: radial-gradient(ellipse at center, 
            rgba(15,12,8,1) 0%, 
            rgba(8,6,4,1) 100%);
    }
    50% {
        background: radial-gradient(ellipse at center, 
            rgba(22,18,10,1) 0%, 
            rgba(12,9,6,1) 100%);
    }
}

/* Heavy Metal - красные оттенки */
body.visualizer-active.genre-heavy-metal::before {
    animation: pulse-heavy-metal 5s ease-in-out infinite;
}

@keyframes pulse-heavy-metal {
    0%, 100% {
        background: radial-gradient(ellipse at center, 
            rgba(15,8,8,1) 0%, 
            rgba(10,5,5,1) 100%);
    }
    50% {
        background: radial-gradient(ellipse at center, 
            rgba(22,10,10,1) 0%, 
            rgba(14,6,6,1) 100%);
    }
}

/* Rock - оранжевые оттенки */
body.visualizer-active.genre-rock::before {
    animation: pulse-rock 5s ease-in-out infinite;
}

@keyframes pulse-rock {
    0%, 100% {
        background: radial-gradient(ellipse at center, 
            rgba(15,11,8,1) 0%, 
            rgba(10,7,5,1) 100%);
    }
    50% {
        background: radial-gradient(ellipse at center, 
            rgba(20,15,10,1) 0%, 
            rgba(13,10,7,1) 100%);
    }
}

/* Punk Rock - зелёные оттенки */
body.visualizer-active.genre-punk-rock::before {
    animation: pulse-punk-rock 5s ease-in-out infinite;
}

@keyframes pulse-punk-rock {
    0%, 100% {
        background: radial-gradient(ellipse at center, 
            rgba(10,15,8,1) 0%, 
            rgba(6,10,5,1) 100%);
    }
    50% {
        background: radial-gradient(ellipse at center, 
            rgba(14,20,10,1) 0%, 
            rgba(9,13,7,1) 100%);
    }
}

/* Gothic - фиолетовые оттенки */
body.visualizer-active.genre-gothic::before {
    animation: pulse-gothic 5s ease-in-out infinite;
}

@keyframes pulse-gothic {
    0%, 100% {
        background: radial-gradient(ellipse at center, 
            rgba(12,8,15,1) 0%, 
            rgba(8,5,10,1) 100%);
    }
    50% {
        background: radial-gradient(ellipse at center, 
            rgba(18,10,22,1) 0%, 
            rgba(11,7,14,1) 100%);
    }
}

/* Symphonic - синие оттенки */
body.visualizer-active.genre-symphonic::before {
    animation: pulse-symphonic 5s ease-in-out infinite;
}

@keyframes pulse-symphonic {
    0%, 100% {
        background: radial-gradient(ellipse at center, 
            rgba(8,10,15,1) 0%, 
            rgba(5,7,10,1) 100%);
    }
    50% {
        background: radial-gradient(ellipse at center, 
            rgba(10,14,20,1) 0%, 
            rgba(7,9,13,1) 100%);
    }
}

/* Flat - нейтральный */
body.visualizer-active.genre-flat::before {
    animation: background-pulse 4s ease-in-out infinite;
}

/* ============================================
   BASS INTENSITY - убрано, было слишком быстро
   ============================================ */

/* Всегда плавно и спокойно */

/* ============================================
   ПЛЕЕР - лёгкое свечение
   ============================================ */

.epic-player.playing {
    box-shadow: 
        0 0 60px rgba(255,215,0,0.3),
        inset 0 0 30px rgba(0,0,0,0.5);
}

/* ============================================
   MOBILE
   ============================================ */

@media (max-width: 768px) {
    /* На мобильных ещё более плавно */
    body.visualizer-active::before {
        animation-duration: 6s !important;
    }
}