/* DOM-частицы по месяцам (лепестки, снег и т.д.) — поверх неба, под интерфейсом */

#monthParticlesLayer {
    position: fixed;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    overflow: hidden;
}

.month-falling-item {
    position: absolute;
    top: -70px;
    pointer-events: none;
    z-index: 1;
    will-change: transform, opacity;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

@keyframes monthFall {
    0% {
        transform: translateY(0) translateX(0) rotate(0deg) scale(0.9);
        opacity: 0.85;
    }
    15% {
        transform: translateY(15vh) translateX(calc(var(--sway-end) * -0.25)) rotate(calc(var(--rotation-end) * 0.08)) scale(1);
        opacity: 0.9;
    }
    35% {
        transform: translateY(35vh) translateX(calc(var(--sway-end) * 0.5)) rotate(calc(var(--rotation-end) * 0.35)) scale(0.95);
        opacity: 0.85;
    }
    60% {
        transform: translateY(60vh) translateX(calc(var(--sway-end) * -0.15)) rotate(calc(var(--rotation-end) * 0.65)) scale(1.02);
        opacity: 0.7;
    }
    80% {
        transform: translateY(80vh) translateX(calc(var(--sway-end) * 0.7)) rotate(calc(var(--rotation-end) * 0.85)) scale(0.9);
        opacity: 0.5;
    }
    100% {
        transform: translateY(110vh) translateX(var(--sway-end)) rotate(var(--rotation-end)) scale(0.75);
        opacity: 0.15;
    }
}

@media (prefers-reduced-motion: reduce) {
    #monthParticlesLayer {
        display: none;
    }
}