/* ❄️ Premium Snowfall Effect - Diciembre 2024 */

/* Contenedor de nieve - no bloquea interacciones */
.snowfall-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    pointer-events: none;
    z-index: var(--z-snowfall, 10000);
    /* isolation crea un nuevo stacking context independiente del header */
    isolation: isolate;
}

/* Copo de nieve individual */
.snowflake {
    position: absolute;
    top: -20px;
    /* Empezar un poco más arriba */
    left: var(--left, 50%);
    width: var(--size, 10px);
    height: var(--size, 10px);
    color: #ffffff;
    font-size: var(--size, 1em);
    line-height: 1;
    user-select: none;
    pointer-events: none;
    opacity: 0.5;
    /* Opacidad translúcida para efecto sutil */
    animation: fall var(--fall-duration, 10s) linear infinite;
    animation-delay: var(--fall-delay, 0s);
    /* Sombra oscura para crear contraste en fondo blanco */
    text-shadow:
        0 0 3px rgba(135, 206, 250, 0.7),
        0 0 8px rgba(135, 206, 250, 0.5),
        0 1px 2px rgba(0, 0, 0, 0.2);
    filter: drop-shadow(0 0 2px rgba(135, 206, 250, 0.4));
    will-change: transform;
    /* Optimización para móviles */
}

/* Animación de caída optimizada con translate3d */
@keyframes fall {
    0% {
        transform: translate3d(0, -20px, 0) rotate(0deg);
    }

    100% {
        transform: translate3d(0, calc(100vh + 100px), 0) rotate(360deg);
    }
}

/* Animación de vaivén suave */
@keyframes sway {

    0%,
    100% {
        transform: translateX(0);
    }

    50% {
        transform: translateX(25px);
    }
}

/* Animación combinada: caída + vaivén */
@keyframes fallSway {
    0% {
        transform: translate3d(0, -20px, 0) rotate(0deg);
    }

    25% {
        transform: translate3d(25px, calc(25vh + 5px), 0) rotate(90deg);
    }

    50% {
        transform: translate3d(0, calc(50vh + 25px), 0) rotate(180deg);
    }

    75% {
        transform: translate3d(25px, calc(75vh + 50px), 0) rotate(270deg);
    }

    100% {
        transform: translate3d(0, calc(100vh + 100px), 0) rotate(360deg);
    }
}

/* Variaciones de copos para mayor naturalidad */
.snowflake:nth-child(3n) {
    animation-name: fallSway;
}

.snowflake:nth-child(3n+1) {
    animation-name: fallSway;
    animation-timing-function: ease-in-out;
}

.snowflake:nth-child(3n+2) {
    animation-name: fallSway;
    animation-timing-function: cubic-bezier(0.4, 0, 0.6, 1);
}

/* Opacidades variadas para profundidad */
.snowflake:nth-child(4n) {
    opacity: 0.3;
}

.snowflake:nth-child(4n+1) {
    opacity: 0.5;
}

.snowflake:nth-child(4n+2) {
    opacity: 0.6;
}

.snowflake:nth-child(4n+3) {
    opacity: 0.4;
}

/* Reducir cantidad en móviles para rendimiento */
@media (max-width: 768px) {
    .snowflake:nth-child(n+16) {
        display: none;
    }
}

/* Blur muy sutil para algunos copos (efecto de profundidad) */
.snowflake:nth-child(5n) {
    filter: blur(1px);
}