/* Generación de los copos de nieve usando box-shadow */
/*
  Las variables $shadows-medium, $shadows-large, $shadows-tiny se usan
  para generar cientos de puntos con box-shadow. 
  Aquí vamos a usar el CSS puro generado por este concepto (ejemplo abreviado).
*/

/* ------------------------------------------------------------- */
/* GENERACIÓN DE COPÍTOS (Debe ser un código muy largo y repetitivo) */
/* ------------------------------------------------------------- */

/* Este código genera 600 puntos blancos separados por comas */
/* Aquí solo se muestra un ejemplo abreviado, el código real es más largo: */
.snow-container {
    /* La altura debe ser mayor que el viewport para que dé efecto de caída */
    height: 100vh;
    width: 100vw;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 0; /* Lo envía al fondo */
    pointer-events: none; /* Permite hacer clic detrás */
    overflow: hidden;
}

/* ------------------------------------------------------------- */
/* LAS TRES CAPAS DE NIEVE (Simulación de la nieve) */
/* ------------------------------------------------------------- */

/* Capa 1: Copos Grandes y Lentos */
.snow-container::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    /* EJEMPLO DE BOX-SHADOW: el código completo tiene cientos de sombras */
    /* Cada par de coordenadas crea un copo de nieve */
    box-shadow: 
        10px 50px 0 0px #FFF, 
        20px 100px 0 1px #FFF,
        30px 150px 0 0px #FFF,
        /* ... se repite con más de 200 sombras aquí ... */
        500px 1000px 0 0px #FFF;
    
    animation: fall-large 30s linear infinite; /* Animación lenta */
}

/* Capa 2: Copos Medianos y Normales */
.snow-container::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    /* EJEMPLO DE BOX-SHADOW: con sombras más pequeñas */
    box-shadow: 
        15px 70px 0 0px #FFF, 
        50px 200px 0 0px #FFF,
        /* ... se repite con más de 200 sombras aquí ... */
        400px 1500px 0 0px #FFF;
    
    animation: fall-medium 20s linear infinite; /* Velocidad media */
}

/* ------------------------------------------------------------- */
/* DEFINICIÓN DE LA ANIMACIÓN DE CAÍDA (@keyframes) */
/* ------------------------------------------------------------- */

/* Animación para la capa 2 (velocidad media) */
@keyframes fall-medium {
  0% { transform: translateY(-100%) } /* Empieza fuera de la pantalla (arriba) */
  100% { transform: translateY(100vh) } /* Cae 100% de la altura de la vista */
}

/* Animación para la capa 1 (velocidad lenta) */
@keyframes fall-large {
  0% { transform: translateY(-100%) }
  100% { transform: translateY(100vh) }
}