/* CSS Snow Effect - Compositor-friendly (transform/opacity only) */
.snow-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    pointer-events: none;
    z-index: 9998;
}

.snowflake {
    position: absolute;
    top: -20px;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, #fff, rgba(255,255,255,0.8));
    will-change: transform;

    /* Custom properties set by JS for per-flake variation */
    --drift: 30px;
    --sway: 15px;

    animation: snowfall linear infinite;
}

/* Snowflake variants for visual depth */
.snowflake1 {
    background: radial-gradient(circle at 30% 30%, #fff, rgba(255,255,255,0.9));
    opacity: 1;
}

.snowflake2 {
    background: radial-gradient(circle at 30% 30%, rgba(220,230,255,0.95), rgba(200,220,255,0.7));
    opacity: 0.8;
}

.snowflake3 {
    background: radial-gradient(circle at 30% 30%, rgba(200,210,230,0.8), rgba(180,200,220,0.5));
    opacity: 0.55;
    filter: blur(1px);
}

/* Combined falling + swaying animation - all on compositor */
@keyframes snowfall {
    0% {
        transform: translate3d(0, 0, 0) rotate(0deg);
    }
    25% {
        transform: translate3d(calc(var(--drift) * 0.25 + var(--sway)), 27.5vh, 0) rotate(90deg);
    }
    50% {
        transform: translate3d(calc(var(--drift) * 0.5), 55vh, 0) rotate(180deg);
    }
    75% {
        transform: translate3d(calc(var(--drift) * 0.75 - var(--sway)), 82.5vh, 0) rotate(270deg);
    }
    100% {
        transform: translate3d(var(--drift), 110vh, 0) rotate(360deg);
    }
}