/* Навигация по «экранам»: Обо мне → только Галерея → Галерея + футер */

:root {
    --header-h: 5.5rem;
}

html {
    background-color: #2c2416;
}

body.has-phase-nav {
    min-height: 100vh;
    min-height: 100dvh;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
}

body.has-phase-nav .header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 30;
}

.page-shell {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    margin-top: var(--header-h);
}

/* Фаза с футером: белую полоску закрывает html{background} */
body.has-phase-nav.phase-2 .body-container {
    background-color: #fdfbf7;
}

/* Медленная «волна» при смене экрана */
.page-shell.page-shell--wave-out {
    animation: pageShellWaveOut 1.55s cubic-bezier(0.38, 0.55, 0.32, 1) forwards;
}

.page-shell.page-shell--wave-in {
    animation: pageShellWaveIn 1.78s cubic-bezier(0.22, 0.88, 0.34, 1) forwards;
}

@keyframes pageShellWaveOut {
    0% {
        transform: translateY(0) scale(1);
        opacity: 1;
        filter: blur(0);
    }
    45% {
        transform: translateY(-10px) scale(0.992);
        opacity: 0.78;
        filter: blur(0.3px);
    }
    100% {
        transform: translateY(18px) scale(0.985);
        opacity: 0.18;
        filter: blur(1px);
    }
}

@keyframes pageShellWaveIn {
    0% {
        transform: translateY(22px) scale(0.982);
        opacity: 0.2;
        filter: blur(1px);
    }
    42% {
        transform: translateY(-6px) scale(1.004);
        opacity: 0.88;
        filter: blur(0.25px);
    }
    72% {
        transform: translateY(3px) scale(0.998);
        opacity: 0.97;
    }
    100% {
        transform: translateY(0) scale(1);
        opacity: 1;
        filter: blur(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .page-shell.page-shell--wave-out,
    .page-shell.page-shell--wave-in {
        animation: none;
    }
}

/* Общий контейнер main: в фазах 1–2 меньше вертикальных отступов */
body.has-phase-nav.phase-1 .body-container,
body.has-phase-nav.phase-2 .body-container {
    padding-top: clamp(0.75rem, 2vw, 1.25rem);
    padding-bottom: clamp(0.75rem, 2vw, 1.25rem);
    /* В фазе галереи расширяем контент без 100vw (иначе появляется горизонтальная прокрутка) */
    max-width: min(1760px, 100%);
}

/* --- Фаза 0: только «Обо мне» --- */
body.has-phase-nav.phase-0 #gallery,
body.has-phase-nav.phase-0 .footer {
    display: none !important;
}

body.has-phase-nav.phase-0 .page-shell {
    min-height: 0;
}

body.has-phase-nav.phase-0 .body-container {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    display: flex;
    flex-direction: column;
    /* как в других фазах, чтобы низ "экрана" был предсказуемым */
    padding-top: clamp(0.75rem, 2vw, 1.25rem);
    padding-bottom: clamp(0.75rem, 2vw, 1.25rem);
    max-width: min(1760px, 100%);
}

/* Фаза 0: нижняя линия в "Обо мне" прижата к низу с тем же отступом */
body.has-phase-nav.phase-0 #about {
    flex: 1;
    min-height: 0;
    display: grid;
    grid-template-rows: auto 1fr;
    row-gap: var(--gallery-gap, 0.75rem);
    padding-bottom: var(--gallery-gap, 0.75rem);
    margin-bottom: 0;
}

body.has-phase-nav.phase-0 #about .about-body {
    min-height: 0;
    height: 100%;
}

/* --- Фаза 1: только «Галерея» на весь блок под шапкой --- */
body.has-phase-nav.phase-1 #about,
body.has-phase-nav.phase-1 .footer {
    display: none !important;
}

body.has-phase-nav.phase-1 .body-container {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: visible;
}

body.has-phase-nav.phase-1 #gallery {
    flex: 1;
    min-height: 0;
    display: grid;
    grid-template-rows: auto 1fr;
    row-gap: var(--gallery-gap, 0.75rem);
    padding-bottom: var(--gallery-gap, 0.75rem);
    margin: 0;
    overflow-x: visible;
    overflow-y: hidden;
}

body.has-phase-nav.phase-1 #gallery .gallery-body {
    min-height: 0;
    display: grid;
}

body.has-phase-nav.phase-1 #gallery .gallery-stage {
    min-height: 0;
}

body.has-phase-nav.phase-1 #gallery .card-grid {
    min-height: 0;
}

/* --- Фаза 2: галерея сверху (часть экрана), ниже — компактный футер --- */
body.has-phase-nav.phase-2 #about {
    display: none !important;
}

body.has-phase-nav.phase-2 .page-shell {
    gap: 0;
}

body.has-phase-nav.phase-2 .body-container {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: visible;
}

body.has-phase-nav.phase-2 #gallery {
    flex: 1;
    min-height: 0;
    display: grid;
    grid-template-rows: auto 1fr;
    row-gap: var(--gallery-gap, 0.75rem);
    padding-bottom: var(--gallery-gap, 0.75rem);
    margin: 0;
    overflow-x: visible;
    overflow-y: hidden;
}

body.has-phase-nav.phase-2 #gallery .gallery-body {
    min-height: 0;
    display: grid;
}

body.has-phase-nav.phase-2 #gallery .gallery-stage {
    min-height: 0;
}

body.has-phase-nav.phase-2 #gallery .card-grid {
    min-height: 0;
}

body.has-phase-nav.phase-2 .footer {
    flex: 0 0 auto;
    margin-top: 0;
    padding-bottom: max(0.75rem, env(safe-area-inset-bottom, 0px));
}

/* Фаза 2 (футер): скрываем декоративные линии, чтобы не мешали */
body.has-phase-nav.phase-2 #gallery .horizontal-lines {
    display: none !important;
}