/*
 * Archivo: css/nieve.css
 * Descripción: Estilos y animaciones para el efecto de caída de nieve.
 */

/* 0. Contenedor Fijo para la Nieve */
/* * CRUCIAL: Este contenedor se fija a la ventana (viewport) y 
 * asegura que la nieve se mueva con el scroll y cubra toda la pantalla. 
 */
#snow-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw; /* 100% del ancho de la ventana */
    height: 100vh; /* 100% de la altura de la ventana */
    z-index: 9998; 
    pointer-events: none; /* Asegura que el usuario pueda hacer clic a través de la nieve */
    overflow: hidden; /* Oculta los copos que inician fuera de la vista */
}

/* 1. Estilos del Copo de Nieve (Clase .snowflake) */
.snowflake {
    position: absolute;
    top: -10px; /* Inicia la animación ligeramente fuera del #snow-overlay */
    
    /* Apariencia */
    color: #FFF; 
    line-height: 1; 
    text-shadow: 0 0 5px rgba(255, 255, 255, 0.5);
    
    /* Animación: Se aplica a la caída */
    animation-name: fall;
    animation-timing-function: linear; 
    animation-iteration-count: infinite; 
}

/* 2. Definición de la Animación de Caída (Keyframes) */

/* La animación 'fall' ahora solo necesita mover el copo la altura de la ventana (100vh) */
@keyframes fall {
    /* Inicio: Arriba, sin desplazamiento horizontal */
    0% {
        transform: translate3d(0, 0, 0) rotate(0deg); 
    }
    
    /* Mitad: Desplazamiento lateral y media caída */
    50% {
        /* Movimiento lateral sutil para efecto de viento (5% del ancho de ventana) */
        transform: translate3d(5vw, 50vh, 0) rotate(180deg); 
        opacity: 0.8; 
    }
    
    /* Fin: Cae fuera del contenedor fijo (el 100% de la ventana) */
    100% {
        /* Cae hasta el fondo de la ventana (100vh) */
        transform: translate3d(0, 100vh, 0) rotate(360deg);
        opacity: 0; /* Desaparece suavemente */
    }
}