/* Snow container */
#snow {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 2; /* above backgrounds, below content */
}

/* JS-generated flakes */
.snowflake {
    position: absolute;
    top: -10vh;
    width: 4px;   /* overridden by JS */
    height: 4px;  /* overridden by JS */
    background: white;            /* pure white */
    border-radius: 50%;
    box-shadow: 0 0 4px rgba(255,255,255,0.7);
    animation-name: fall, drift, twinkle;
    animation-iteration-count: infinite;
    animation-timing-function: linear, ease-in-out, ease-in-out;
}

/* fall animation */
@keyframes fall { 
    from { top: -10vh; } 
    to { top: 110vh; } 
}

/* slight sideways drift */
@keyframes drift {
    0%   { transform: translateX(0); }
    50%  { transform: translateX(20px); }
    100% { transform: translateX(0); }
}

/* twinkle/fade */
@keyframes twinkle {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.4; }
}