/* global-background.css */
/* Keyframes - definieren die langsame Bewegung für den Ruhezustand */
@keyframes shapeMove {
    0% { transform: translate(-50%, -10px) rotate(0deg); border-radius: 40% 60% 70% 30% / 40% 55% 45% 60%; }
    50% { transform: translate(-50%, 10px) rotate(5deg); border-radius: 60% 40% 30% 70% / 60% 45% 55% 40%; }
    100% { transform: translate(-50%, -10px) rotate(0deg); border-radius: 40% 60% 70% 30% / 40% 55% 45% 60%; }
}
@keyframes shapeRotate {
    to { transform: translate(-50%, 0) rotate(360deg); }
}

/* Hintergrund-Element - scrollt vertikal mit, horizontal fixiert */
@media (min-width: 1025px) {
    /* Wrapper für overflow control */
    body {
        position: relative;
        overflow-x: clip; /* Moderne Alternative zu hidden, schneidet auch transformierte Elemente */
    }
    
    body::before {
        content: "";
        position: absolute; /* Bleibt absolute für vertikales Scrollen */
        
        /* Die Werte werden von den CSS-Variablen (definiert in aaw_style.css) gezogen */
        top: var(--bg-top, -200px); /* Fallback-Wert hinzugefügt */
        left: 50%;
        width: 150vw; 
        height: 900px; 
        max-width: 3000px; /* Begrenzt die Breite für sehr große Displays */
        
        /* NUTZT VAR-WERTE ALS DEFAULT (die von JS überschrieben werden) */
        border-radius: var(--bg-radius, 40% 60% 70% 30% / 40% 55% 45% 60%);
        transform: var(--bg-transform, translate(-50%, 0) rotate(0deg));
        box-shadow: var(--bg-shadow, 0 0 200px 80px rgba(255, 77, 77, 0.1));
        
        /* Fließender Übergang, wenn JS die Kontrolle abgibt (zurück zum Ruhezustand) */
        transition: transform 0.1s ease-out, border-radius 0.2s ease, box-shadow 0.5s ease;
        
        /* STANDARD-ANIMATION IM RUHEZUSTAND */
        animation: shapeMove 120s ease-in-out infinite alternate,
                   shapeRotate 180s linear infinite;
        
        /* ULTRA-DEZENTE FARBE */
        background: radial-gradient(ellipse at 50% 50%, 
            rgba(255, 77, 77, 0.05) 0%, 
            rgba(255, 77, 77, 0.02) 30%, 
            transparent 60%
        );
        
        z-index: -1; 
        pointer-events: none;
    }
}

/* Für kleinere Bildschirme - kein Hintergrund */
@media (max-width: 1024px) {
    body::before {
        display: none;
    }
}

/* WICHTIG: Pausiert die CSS-Animation, wenn JS die dynamische Kontrolle übernimmt */
.is-dynamic body::before {
    animation-play-state: paused !important;
}