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

.snowbank {
    --bank-transform: scaleX(1);
    position: absolute;
    bottom: -4vh;
    width: 32vw;
    max-width: 420px;
    height: 18vh;
    pointer-events: none;
    background:
        radial-gradient(90% 100% at 18% 100%, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.35) 68%, rgba(255, 255, 255, 0) 100%),
        radial-gradient(120% 110% at 58% 100%, rgba(255, 255, 255, 0.92) 0%, rgba(255, 255, 255, 0.4) 70%, rgba(255, 255, 255, 0) 100%),
        radial-gradient(80% 90% at 88% 100%, rgba(255, 255, 255, 0.85) 0%, rgba(255, 255, 255, 0.32) 68%, rgba(255, 255, 255, 0) 100%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.88) 0%, rgba(255, 255, 255, 0.5) 42%, rgba(255, 255, 255, 0.15) 86%, rgba(255, 255, 255, 0) 100%);
    opacity: 0.9;
    filter: drop-shadow(0 10px 18px rgba(255, 255, 255, 0.25));
    transform: var(--bank-transform);
    transform-origin: bottom;
    animation: settle 18s ease-in-out infinite alternate;
    z-index: 1;
    clip-path: polygon(0 100%, 6% 82%, 14% 92%, 20% 72%, 32% 88%, 40% 62%, 52% 84%, 60% 58%, 70% 90%, 78% 70%, 88% 86%, 96% 78%, 100% 100%);
}

.snowbank::before {
    content: "";
    position: absolute;
    inset: -4% 0 12% 0;
    background:
        radial-gradient(120% 130% at 28% 100%, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0) 70%),
        radial-gradient(140% 140% at 72% 100%, rgba(255, 255, 255, 0.48) 0%, rgba(255, 255, 255, 0) 74%);
    opacity: 0.9;
    transform: translateY(-4%) scaleX(1.03);
    clip-path: polygon(0 100%, 10% 78%, 16% 94%, 26% 68%, 34% 90%, 44% 62%, 56% 82%, 64% 60%, 76% 92%, 86% 70%, 94% 88%, 100% 100%);
    mix-blend-mode: screen;
}

.snowbank::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(160% 140% at 50% 110%, rgba(255, 255, 255, 0.32) 0%, rgba(255, 255, 255, 0) 70%);
    mix-blend-mode: screen;
    opacity: 0.7;
}

.snowbank-left {
    left: -6vw;
}

.snowbank-right {
    right: -6vw;
    --bank-transform: scaleX(-1);
}

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

.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));
    }
}

@keyframes settle {
    from {
        transform: var(--bank-transform) translateY(10px) scale(1);
    }

    to {
        transform: var(--bank-transform) translateY(0px) scale(1.04);
    }
}