/* =============================================
   Падающие лепестки сакуры
   ============================================= */
#sakura-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}

.sakura-petal {
    position: absolute;
    will-change: transform;
    transform: translate3d(var(--sakura-x), var(--sakura-y), 0) rotate(var(--sakura-rotate));
    animation: sakura-x cubic-bezier(0.4, 0.2, 0.6, 0.8) var(--sakura-duration, 12s) var(--sakura-delay, 0s) infinite,
               sakura-y linear var(--sakura-duration, 12s) var(--sakura-delay, 0s) infinite;
    backface-visibility: hidden;
    transform-style: preserve-3d;
}

/* Переменные для анимации X/Y раздельно */
@property --sakura-x {
    syntax: '<length>';
    initial-value: 0px;
    inherits: false;
}
@property --sakura-y {
    syntax: '<length>';
    initial-value: 0;
    inherits: false;
}
@property --sakura-rotate {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}
/* Типизация CSS переменных для оптимизации */
@property --sakura-x-0 {
    syntax: '<length>';
    initial-value: 0px;
    inherits: false;
}
@property --sakura-x-12 {
    syntax: '<length>';
    initial-value: 0px;
    inherits: false;
}
@property --sakura-x-25 {
    syntax: '<length>';
    initial-value: 0px;
    inherits: false;
}
@property --sakura-x-37 {
    syntax: '<length>';
    initial-value: 0px;
    inherits: false;
}
@property --sakura-x-50 {
    syntax: '<length>';
    initial-value: 0px;
    inherits: false;
}
@property --sakura-x-62 {
    syntax: '<length>';
    initial-value: 0px;
    inherits: false;
}
@property --sakura-x-75 {
    syntax: '<length>';
    initial-value: 0px;
    inherits: false;
}
@property --sakura-x-87 {
    syntax: '<length>';
    initial-value: 0px;
    inherits: false;
}
@property --sakura-x-100 {
    syntax: '<length>';
    initial-value: 0px;
    inherits: false;
}
@keyframes sakura-x {
    0% { --sakura-x: var(--sakura-x-0, 0px); }
    12.5% { --sakura-x: var(--sakura-x-12, 0px); }
    25% { --sakura-x: var(--sakura-x-25, 0px); }
    37.5% { --sakura-x: var(--sakura-x-37, 0px); }
    50% { --sakura-x: var(--sakura-x-50, 0px); }
    62.5% { --sakura-x: var(--sakura-x-62, 0px); }
    75% { --sakura-x: var(--sakura-x-75, 0px); }
    87.5% { --sakura-x: var(--sakura-x-87, 0px); }
    100% { --sakura-x: var(--sakura-x-100, 0px); }
}

@keyframes sakura-y {
    0% {
        --sakura-y: 0;
        --sakura-rotate: var(--sakura-rotate-start, 0deg);
        opacity: 1;
    }
    12.5% {
        --sakura-y: 14.4vh;
        --sakura-rotate: var(--sakura-rotate-12, 45deg);
    }
    22.5% {
        --sakura-y: 25.9vh;
        --sakura-rotate: var(--sakura-rotate-22, 67deg);
    }
    25% {
        --sakura-y: 28.8vh;
        --sakura-rotate: var(--sakura-rotate-25, 90deg);
    }
    27.5% {
        --sakura-y: 31.6vh;
        --sakura-rotate: var(--sakura-rotate-27, 112deg);
    }
    37.5% {
        --sakura-y: 43.1vh;
        --sakura-rotate: var(--sakura-rotate-37, 135deg);
    }
    47.5% {
        --sakura-y: 54.6vh;
        --sakura-rotate: var(--sakura-rotate-47, 157deg);
    }
    50% {
        --sakura-y: 57.2vh;
        --sakura-rotate: var(--sakura-rotate-50, 180deg);
    }
    52.5% {
        --sakura-y: 60.4vh;
        --sakura-rotate: var(--sakura-rotate-52, 202deg);
    }
    62.5% {
        --sakura-y: 71.9vh;
        --sakura-rotate: var(--sakura-rotate-62, 225deg);
    }
    72.5% {
        --sakura-y: 83.4vh;
        --sakura-rotate: var(--sakura-rotate-72, 247deg);
    }
    75% {
        --sakura-y: 86vh;
        --sakura-rotate: var(--sakura-rotate-75, 270deg);
    }
    77.5% {
        --sakura-y: 89.1vh;
        --sakura-rotate: var(--sakura-rotate-77, 292deg);
    }
    87.5% {
        --sakura-y: 100.6vh;
        --sakura-rotate: var(--sakura-rotate-87, 315deg);
    }
    100% {
        --sakura-y: 115vh;
        --sakura-rotate: var(--sakura-rotate-end, 360deg);
        opacity: 0.4;
    }
}

.sakura-petal.paused {
    animation-play-state: paused !important;
}

/* Заморозка всех лепестков при скрытой вкладке — предотвращает накопление */
#sakura-container.paused .sakura-petal {
    animation-play-state: paused !important;
}

/* На мобильных: гарантируем, что лепестки всегда между фоном и контентом */
@media (max-width: 768px) {
    #sakura-container {
        z-index: 0;
    }
    /* Не трогаем fixed-порталы: иначе ломается position/z-index (лайтбокс галереи, корень модалок) */
    body > *:not(#sakura-container):not(#lightbox):not(#modal-root):not(#cookie-banner) {
        position: relative;
        z-index: 1;
    }
}