/* =========================================
   SPOTLIGHT BACKGROUND VISUALIZER
   Weiche Ränder & plastische Beleuchtung
   ========================================= */

:root {
    /* Ruhezustands-Werte */
    --spotlight-shadow: 0 0 150px 50px rgba(255, 77, 77, 0.15);
    --spotlight-radius: 45% 55% 60% 40% / 50% 45% 55% 50%;
    --spotlight-transform: translate(-50%, -50%) rotate(0deg) scale(1);
    --spotlight-opacity: 0.8;
}

/* Spotlight Section Hintergrund-Container */
.spotlight-section {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

/* Haupt-Spotlight-Effekt mit :before Pseudo-Element */
.spotlight-section::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 900px;
    height: 900px;
    
    /* Mehrschichtige, weiche Verläufe für plastischen Effekt */
    background: 
        /* Innerer heller Kern - wie echtes Licht */
        radial-gradient(
            ellipse at center,
            rgba(255, 255, 255, 0.08) 0%,
            rgba(255, 140, 140, 0.12) 10%,
            rgba(255, 100, 100, 0.14) 20%,
            rgba(255, 77, 77, 0.16) 30%,
            rgba(255, 60, 60, 0.12) 45%,
            rgba(255, 50, 50, 0.06) 60%,
            rgba(255, 40, 40, 0.02) 75%,
            transparent 90%
        );
    
    /* Organische Form - wird von JS animiert */
    border-radius: var(--spotlight-radius);
    
    /* Weiche, mehrschichtige Schatten für echte Lichttiefe */
    box-shadow: 
        /* Innerer Glow - Lichtkern */
        inset 0 0 80px rgba(255, 255, 255, 0.03),
        inset 0 0 40px rgba(255, 120, 120, 0.05),
        /* Hauptschatten - wird von JS animiert */
        var(--spotlight-shadow),
        /* Zusätzliche Tiefenschatten für Plastizität */
        0 0 180px 60px rgba(255, 77, 77, 0.1),
        0 0 280px 90px rgba(255, 60, 60, 0.06),
        0 0 400px 120px rgba(255, 50, 50, 0.03);
    
    /* Transform - wird von JS animiert */
    transform: var(--spotlight-transform);
    opacity: var(--spotlight-opacity);
    
    /* Weiche Übergänge */
    transition: 
        transform 0.1s ease-out,
        opacity 0.15s ease-out,
        box-shadow 0.15s ease-out,
        border-radius 0.25s ease-out;
    
    /* Performance-Optimierung */
    will-change: transform, opacity;
    pointer-events: none;
    z-index: -1;
    
    /* Starker Blur für sehr weiche, verlaufende Kanten */
    filter: blur(25px);
    -webkit-filter: blur(25px);
}

/* Zusätzlicher weicher Ambient-Glow mit :after */
.spotlight-section::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 1400px;
    height: 1400px;
    
    /* Sehr weicher Ambient-Glow für atmosphärische Tiefe */
    background: radial-gradient(
        circle at center,
        rgba(255, 77, 77, 0.04) 0%,
        rgba(255, 60, 60, 0.025) 30%,
        rgba(255, 50, 50, 0.015) 50%,
        transparent 75%
    );
    
    border-radius: 50%;
    transform: translate(-50%, -50%);
    opacity: 0.7;
    pointer-events: none;
    z-index: -2;
    
    /* Weicher Blur für fließenden Übergang */
    filter: blur(40px);
    -webkit-filter: blur(40px);
    
    /* Performance */
    will-change: opacity;
}

/* Bei aktivem Audio - leicht verstärkter Effekt */
body.spotlight-dynamic .spotlight-section::before {
    filter: blur(20px);
    -webkit-filter: blur(20px);
}

body.spotlight-dynamic .spotlight-section::after {
    opacity: 0.8;
}

/* Responsive Anpassungen */
@media (max-width: 1024px) {
    .spotlight-section::before {
        width: 800px;
        height: 800px;
        filter: blur(22px);
        -webkit-filter: blur(22px);
    }
    
    .spotlight-section::after {
        width: 1200px;
        height: 1200px;
    }
}

@media (max-width: 768px) {
    .spotlight-section::before {
        width: 700px;
        height: 700px;
        filter: blur(20px);
        -webkit-filter: blur(20px);
    }
    
    .spotlight-section::after {
        width: 1000px;
        height: 1000px;
        filter: blur(35px);
        -webkit-filter: blur(35px);
    }
}

@media (max-width: 480px) {
    .spotlight-section::before {
        width: 600px;
        height: 600px;
        filter: blur(18px);
        -webkit-filter: blur(18px);
        /* Vereinfachter Gradient für bessere Performance */
        background: 
            radial-gradient(
                ellipse at center,
                rgba(255, 120, 120, 0.12) 0%,
                rgba(255, 77, 77, 0.14) 25%,
                rgba(255, 60, 60, 0.08) 50%,
                rgba(255, 50, 50, 0.03) 70%,
                transparent 85%
            );
    }
    
    .spotlight-section::after {
        width: 900px;
        height: 900px;
        filter: blur(30px);
        -webkit-filter: blur(30px);
    }
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
    .spotlight-section::before {
        transition: opacity 0.3s ease;
    }
    
    .spotlight-section::after {
        animation: none;
    }
}

/* Performance-Optimierung für schwächere Geräte */
@media (prefers-reduced-motion: reduce) and (max-width: 768px) {
    .spotlight-section::before {
        filter: blur(15px);
        -webkit-filter: blur(15px);
    }
    
    .spotlight-section::after {
        filter: blur(25px);
        -webkit-filter: blur(25px);
    }
}

/* Responsive Anpassungen */
@media (max-width: 1024px) {
    .spotlight-section::before {
        width: 700px;
        height: 700px;
    }
    
    .spotlight-section::after {
        width: 1000px;
        height: 1000px;
    }
}

@media (max-width: 768px) {
    .spotlight-section::before {
        width: 600px;
        height: 600px;
    }
    
    .spotlight-section::after {
        width: 900px;
        height: 900px;
    }
}

@media (max-width: 480px) {
    .spotlight-section::before {
        width: 500px;
        height: 500px;
        /* Reduzierte Komplexität auf Mobile */
        background: 
            radial-gradient(
                circle at center,
                rgba(255, 120, 120, 0.15) 0%,
                rgba(255, 77, 77, 0.12) 30%,
                transparent 65%
            );
    }
    
    .spotlight-section::after {
        width: 700px;
        height: 700px;
    }
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
    .spotlight-section::before {
        transition: opacity 0.3s ease;
    }
    
    .spotlight-section::after {
        animation: none;
        opacity: 0.6;
    }
}

/* Performance-Optimierung für schwächere Geräte */
@media (prefers-reduced-motion: reduce) and (max-width: 768px) {
    .spotlight-section::before {
        filter: none;
        -webkit-filter: none;
        box-shadow: var(--spotlight-shadow);
    }
    
    .spotlight-section::after {
        display: none;
    }
}