.snow{
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 9999;
    overflow: hidden;
}

.snow::before,
.snow::after{
    content:"";
    position:absolute;
    inset:-250px 0 0 0;
    background-repeat: repeat;
    animation-timing-function: linear;
    will-change: transform;
}

/* FAR layer (now a bit larger) */
.snow::before{
    opacity: .55;
    filter: blur(.25px) drop-shadow(0 1px 1px rgba(0,0,0,.10));
    background-image:
            radial-gradient(circle, rgba(185,195,210,.95) 1.6px, transparent 1.7px),
            radial-gradient(circle, rgba(205,215,230,.75) 1.3px, transparent 1.4px),
            radial-gradient(circle, rgba(170,180,200,.70) 1.9px, transparent 2.0px);
    background-size: 170px 170px, 260px 260px, 340px 340px;
    background-position: 0 0, 60px 80px, 120px 40px;

    animation:
            snow-fall-1 22s linear infinite,
            snow-drift-1 6s ease-in-out infinite;
}

/* NEAR layer (bigger) */
.snow::after{
    opacity: .8;
    filter: blur(.45px) drop-shadow(0 2px 2px rgba(0,0,0,.12));
    background-image:
            radial-gradient(circle, rgba(175,185,205,.95) 2.8px, transparent 2.9px),
            radial-gradient(circle, rgba(210,220,235,.80) 2.2px, transparent 2.3px);
    background-size: 300px 300px, 460px 460px;
    background-position: 30px 10px, 160px 120px;

    animation:
            snow-fall-2 16s linear infinite,
            snow-drift-2 4.5s ease-in-out infinite;
}

@keyframes snow-fall-1{
    from { transform: translateY(-250px); }
    to   { transform: translateY(115vh); }
}
@keyframes snow-fall-2{
    from { transform: translateY(-250px); }
    to   { transform: translateY(115vh); }
}

@keyframes snow-drift-1{
    0%,100% { translate: 0 0; }
    50%     { translate: 30px 0; }
}
@keyframes snow-drift-2{
    0%,100% { translate: 0 0; }
    50%     { translate: -45px 0; }
}