/* =========================================
   UPDATES SECTION - SUBTLE AURORA GLOW
   Dezenter Lichtnebel-Effekt über volle Breite
   ========================================= */

:root {
    --aurora-color-1: rgba(59, 130, 246, 0.08);
    --aurora-color-2: rgba(96, 165, 250, 0.06);
    --aurora-color-3: rgba(147, 197, 253, 0.05);
}

/* Updates Section Container */
.updates-section,
#updates {
    position: relative;
    isolation: isolate;
}

/* Canvas positioniert sich über gesamte Seitenbreite */
#updates-aurora-canvas {
    position: fixed;
    left: 0;
    top: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: -10; /* Weit im Hintergrund, beeinflusst nichts */
    opacity: 0;
    transition: opacity 0.6s ease-in-out;
}

/* Wird von JS aktiviert wenn Section sichtbar */
#updates-aurora-canvas.active {
    opacity: 1;
}

/* Sehr subtile Ambient-Akzente in der Section selbst */
.updates-section::after,
#updates::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: -1;
    
    /* Minimaler radialer Glow */
    background: 
        radial-gradient(
            ellipse 60% 50% at 50% 50%,
            rgba(59, 130, 246, 0.02) 0%,
            transparent 70%
        );
    
    opacity: 0.6;
}

/* Content bleibt unberührt */
.updates-section > *:not(canvas),
#updates > *:not(canvas) {
    position: relative;
    z-index: 1;
}

/* Responsive Anpassungen */
@media (max-width: 1024px) {
    #updates-aurora-canvas {
        opacity: 0;
    }
    
    #updates-aurora-canvas.active {
        opacity: 0.8;
    }
}

@media (max-width: 768px) {
    #updates-aurora-canvas.active {
        opacity: 0.6;
    }
    
    .updates-section::after,
    #updates::after {
        opacity: 0.4;
    }
}

@media (max-width: 480px) {
    #updates-aurora-canvas.active {
        opacity: 0.4;
    }
    
    .updates-section::after,
    #updates::after {
        opacity: 0.3;
    }
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
    #updates-aurora-canvas {
        display: none !important;
    }
    
    .updates-section::after,
    #updates::after {
        opacity: 0.2;
    }
}

/* Performance-Optimierung für schwächere Geräte */
@media (max-width: 768px) and (max-height: 768px) {
    #updates-aurora-canvas.active {
        opacity: 0.3;
    }
}

/* Wird von JS aktiviert wenn Section sichtbar */
#updates-aurora-canvas.active {
    opacity: 1;
}

/* Sehr subtile Ambient-Akzente in der Section selbst */
.updates-section::after,
#updates::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: -1;
    
    /* Minimaler radialer Glow */
    background: 
        radial-gradient(
            ellipse 60% 50% at 50% 50%,
            rgba(59, 130, 246, 0.02) 0%,
            transparent 70%
        );
    
    opacity: 0.6;
}

/* Content bleibt unberührt */
.updates-section > *:not(canvas),
#updates > *:not(canvas) {
    position: relative;
    z-index: 1;
}

/* Responsive Anpassungen */
@media (max-width: 1024px) {
    #updates-aurora-canvas {
        opacity: 0;
    }
    
    #updates-aurora-canvas.active {
        opacity: 0.8;
    }
}

@media (max-width: 768px) {
    #updates-aurora-canvas.active {
        opacity: 0.6;
    }
    
    .updates-section::after,
    #updates::after {
        opacity: 0.4;
    }
}

@media (max-width: 480px) {
    #updates-aurora-canvas.active {
        opacity: 0.4;
    }
    
    .updates-section::after,
    #updates::after {
        opacity: 0.3;
    }
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
    #updates-aurora-canvas {
        display: none !important;
    }
    
    .updates-section::after,
    #updates::after {
        opacity: 0.2;
    }
}

/* Performance-Optimierung für schwächere Geräte */
@media (max-width: 768px) and (max-height: 768px) {
    #updates-aurora-canvas.active {
        opacity: 0.3;
    }
}