/* ================== iOS-STYLE PAGE TRANSITIONS ================== */

/* Анимация при загрузке страницы - снизу вверх */
@keyframes pageSlideIn {
    from {
        opacity: 0;
        transform: translateY(100vh) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Анимация при уходе со страницы - вниз */
@keyframes pageSlideOut {
    from {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
    to {
        opacity: 0;
        transform: translateY(100vh) scale(0.95);
    }
}

/* Применяем анимацию к странице */
.page {
    animation: pageSlideIn 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* Класс для анимации выхода */
.page-exit {
    animation: pageSlideOut 0.4s cubic-bezier(0.4, 0, 0.6, 1) forwards;
}

/* ВАЖНО: Header находится вне .page, поэтому анимация не влияет на его position: fixed */

/* Эффект затемнения при переходе */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0);
    pointer-events: none;
    z-index: 9998;
    opacity: 0;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

body.transitioning::before {
    opacity: 1;
    background: rgba(0, 0, 0, 0.2);
}