/* ===== SCHNEE (Dynamischer Yoyo-Effekt) ===== */
:root {
    /* Valores padrão para o IDE reconhecer as variáveis */
    --snow-x: 0;
    --snow-size: 5px;
    --snow-opacity: 1;
    --snow-duration: 10s;
    --snow-delay: 0s;
    --snow-drift: 0px;
}
#snow-area {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    /* Hintergrund ist transparent, da er bereits im Body definiert ist */
}

.snowflake {
    position: absolute;
    top: -20px; /* Startet oberhalb des Sichtfelds */
    background: white;
    border-radius: 50%;
    pointer-events: none; /* Klicks gehen durch den Schnee hindurch */

    /* "Glow"-Effekt (Leuchten) wie im ursprünglichen SCSS-Code */
    filter: drop-shadow(0 0 6px white);

    /* --- Dynamische Variablen (werden von JS berechnet und gesetzt) --- */
    left: var(--snow-x);
    width: var(--snow-size);
    height: var(--snow-size);
    opacity: var(--snow-opacity);

    /* Die Animation nutzt die individuell berechnete Dauer und Verzögerung */
    animation: snowfall var(--snow-duration) linear infinite;
    animation-delay: var(--snow-delay);
}

/* Die Animation simuliert den "Yoyo"-Effekt aus dem SCSS.
   Die Flocke fällt nicht gerade, sondern driftet zur Seite (var(--snow-drift)).
*/
@keyframes snowfall {
    0% {
        transform: translate(0, 0);
    }
    /* Auf halbem Weg driftet sie zur Seite (simuliert Wind/Yoyo) */
    50% {
        transform: translate(var(--snow-drift), 50vh);
    }
    /* Am Ende driftet sie leicht zurück, damit die Bewegung organisch wirkt */
    100% {
        transform: translate(calc(var(--snow-drift) / 2), 105vh);
    }
}