.seasonal-overlay {
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    overflow: hidden;
}

.seasonal-particle {
    position: absolute;
    top: -15vh;
    left: 0;
    width: var(--size, 20px);
    height: var(--size, 20px);
    opacity: 0;
    border-radius: 0;
    box-shadow: var(--shadow, none);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    filter: var(--filter, none);
    animation-name: seasonal-fall;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-duration: var(--duration, 24s);
    animation-delay: var(--delay, 0s);
    transform-origin: center;
    will-change: transform, opacity;
}

.seasonal-overlay--autumn .seasonal-particle {
    mix-blend-mode: multiply;
}

.seasonal-overlay--winter .seasonal-particle {
    mix-blend-mode: screen;
}

.seasonal-overlay--spring .seasonal-particle,
.seasonal-overlay--summer .seasonal-particle {
    mix-blend-mode: soft-light;
}

@keyframes seasonal-fall {
    0% {
        transform: translate3d(0, -20vh, 0) rotate(0deg);
        opacity: 0;
    }
    10% {
        opacity: var(--max-opacity, 0.8);
    }
    25% {
        transform: translate3d(calc(var(--drift, 0px) * 0.25), 25vh, 0) rotate(calc(var(--rotation, 180deg) * 0.25));
    }
    50% {
        transform: translate3d(calc(var(--drift, 0px) * 0.5), 55vh, 0) rotate(calc(var(--rotation, 180deg) * 0.5));
    }
    75% {
        transform: translate3d(calc(var(--drift, 0px) * 0.75), 85vh, 0) rotate(calc(var(--rotation, 180deg) * 0.75));
    }
    100% {
        transform: translate3d(var(--drift, 0px), 120vh, 0) rotate(var(--rotation, 180deg));
        opacity: 0;
    }
}