.snowfall-layer {
    pointer-events: none;
    position: fixed;
    inset: 0;
    overflow: hidden;
    z-index: 3000;
    mix-blend-mode: screen;
}

.snowflake {
    position: absolute;
    top: -12vh;
    left: var(--left, 0%);
    animation: drift var(--duration, 18s) ease-in-out var(--delay, 0s) infinite;
    will-change: transform;
}

.snowflake::after {
    content: "";
    display: block;
    width: var(--size, 6px);
    height: var(--size, 6px);
    border-radius: 50%;
    background: radial-gradient(circle, #ffffff 0%, rgba(255, 255, 255, 0.32) 70%, transparent 100%);
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.55);
    opacity: 0.95;
    animation: fall var(--duration, 18s) linear var(--delay, 0s) infinite;
    will-change: transform, opacity;
}

@keyframes fall {
    from {
        transform: translate3d(0, -10vh, 0);
        opacity: 0.95;
    }

    to {
        transform: translate3d(0, 110vh, 0);
        opacity: 0.25;
    }
}

@keyframes drift {
    from {
        transform: translateX(calc(var(--sway, 18px) * -1));
    }

    to {
        transform: translateX(var(--sway, 18px));
    }
}