/**
 * Snowfall Animation CSS
 * Responsive winter snowfall effect for chat page
 * Source: cssscript.com/responsive-snowfall-animation/
 */

.snowflake-area {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none; /* Allow clicks to pass through to chat elements */
    z-index: 1; /* Below header and chat elements but above background */
    overflow: hidden;
}

.snowflake-area.hidden {
    display: none;
}

.snowflake {
    position: absolute;
    top: -20%;
    aspect-ratio: 1;
    border-radius: 50%;
    background-color: snow;
    animation: snowfall 10s linear infinite;
    pointer-events: none;
}

@keyframes snowfall {
    0% {
        transform: translateY(0) rotate(0);
    }
    100% {
        transform: translateY(125vh) rotate(360deg);
    }
}

/* Optional sway animation for future enhancement */
@keyframes sway {
    0%,
    100% {
        transform: translateX(calc(-1 * var(--sway-amplitude)));
    }
    50% {
        transform: translateX(var(--sway-amplitude));
    }
}