/*
 * Contenedor principal para todas las capas de nieve.
 * Se encarga de posicionar el efecto en la pantalla.
*/
.snow-container {
    /* Fija el contenedor a la ventana para que no se mueva con el scroll. */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    /* Z-index alto para que se vea por encima de todo. Cámbialo a -1 para ponerlo de fondo. */
    z-index: 9999;

    /* Evita que se creen barras de scroll si la animación se sale. */
    overflow: hidden;

    /* Permite hacer clic "a través" de la nieve en los elementos de abajo. */
    pointer-events: none;

    /* Por defecto, la nieve está oculta y se activa con JavaScript. */
    display: none;
}

/*
 * Clase para activar la visibilidad de la nieve.
 * Se añade y quita con JavaScript.
*/
.snow-container.snow-active {
    display: block;
}

/*
 * Estilo base que comparten TODAS las capas de nieve.
*/
.snow {
    /* Posiciona cada capa dentro del .snow-container. */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    /* La imagen que se usará como copo de nieve. */
    /* background-image: url('../img/lluvia/halowen.png'); */
    /* background-image: url('../img/lluvia/bandera_1.png'); */
    /* background-image: url('../img/lluvia/pop1.png'); */
    background-image: url('../img/lluvia/snowball.png');
    
    /* Repite la imagen para crear la densidad de copos. */
    background-repeat: repeat;

    /* Un leve desenfoque para dar un efecto de profundidad. */
    filter: blur(0.5px);
}


/*
 * --- AQUÍ SE CONTROLAN LAS CAPAS INDIVIDUALES ---
 * Usamos varias capas para crear un efecto de profundidad (parallax).
 * Las capas más lentas y grandes parecen estar más cerca.
*/

/* Capa de copos pequeños y lejanos */
.snow-container.snow-active .little {
    /* DENSIDAD: Un tamaño pequeño crea muchos copos. */
    background-size: 150px 135px;
    
    /* VELOCIDAD: La animación dura 90 segundos (muy lenta). */
    animation: fall-and-sway 90s infinite linear;
}

/* Capa de copos medianos */
.snow-container.snow-active .normal {
    /* DENSIDAD: Tamaño mediano, menos copos que 'little'. */
    background-size: 300px 270px;
    
    /* VELOCIDAD: 70 segundos, un poco más rápida para dar profundidad. */
    animation: fall-and-sway 70s linear infinite;

    /* RETRASO: Empieza en un punto diferente de la animación para que no se vea repetitivo. */
    animation-delay: -15s;
}

/* Capa de copos grandes */
.snow-container.snow-active .big {
    /* DENSIDAD: Tamaño grande, menos copos. */
    background-size: 600px 540px;
    
    /* VELOCIDAD: 110 segundos, más lenta para simular que están cerca. */
    animation: fall-and-sway 110s linear infinite;
    
    /* RETRASO: */
    animation-delay: -25s;
}

/* * --- ¡REGLA CORREGIDA! AÑADIMOS LA ANIMACIÓN PARA LA CAPA GIGANTE ---
*/
.snow-container.snow-active .giant {
    /* DENSIDAD: El más grande, para copos muy cercanos. */
    background-size: 900px 810px;
    
    /* VELOCIDAD: 130 segundos, la más lenta de todas. */
    animation: fall-and-sway 130s linear infinite;
    
    /* RETRASO: */
    animation-delay: -35s;
}


/*
 * --- ANIMACIÓN DE CAÍDA Y MOVIMIENTO LATERAL ---
*/
@keyframes fall-and-sway {
    /* Estado inicial de la animación */
    0% {
        /* Inicia movido 30px a la izquierda y con la imagen de fondo arriba. */
        transform: translateX(-30px);
        background-position: 0% 0%;
        opacity: 0; /* Inicia invisible para un efecto más suave */
    }

    /* Durante los primeros segundos, el copo se hace visible */
    10% {
        opacity: 1;
    }
    
    /* A mitad de camino, se ha movido completamente hacia el otro lado. */
    50% {
        /* Mueve toda la capa 30px a la derecha. Ajusta este valor para más o menos vaivén. */
        transform: translateX(30px);
    }
    
    /* Cerca del final, empieza a desvanecerse */
    90% {
        opacity: 1;
    }

    /* Estado final de la animación */
    100% {
        /* Vuelve a su posición horizontal original. */
        transform: translateX(-30px);
        
        /* Mueve la imagen de fondo completamente hacia abajo para simular la caída. */
        background-position: 0% 1200vh;
        
        /* Termina invisible */
        opacity: 0;
    }
}