/*
|--------------------------------------------------------------------------
| Navigation & interaction
|--------------------------------------------------------------------------
|
| Diese Datei kümmert sich nur um Navigation, Interaktion und Seitenwechsel.
| Die Geometrie des Buchs – inklusive Mobile-Zuständen – liegt ausschliesslich
| in trifold.css.
|
*/

.site-footer {
    padding-top: clamp(0.35rem, 0.8vh, 0.6rem);
}

/*
|--------------------------------------------------------------------------
| Interaction after opening
|--------------------------------------------------------------------------
*/

.book.is-open .book__spread,
.book.is-open-complete .book__spread,
.book.is-open .book-view.is-active,
.book.is-open-complete .book-view.is-active,
.book.is-open .book__page,
.book.is-open-complete .book__page {
    pointer-events: auto;
}

.book.is-open-complete {
    transform-style: flat;
}

.book.is-open-complete .book__spread {
    z-index: 4;
    transform: none;
}

/*
|--------------------------------------------------------------------------
| Desktop content transitions
|--------------------------------------------------------------------------
*/

@media (min-width: 901px) {
    .book-view {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .book-view .book__page-inner {
        opacity: 1;
        transform: translateX(0);
        transition:
            opacity 150ms ease,
            transform 180ms cubic-bezier(0.22, 0.72, 0.2, 1);
    }

    .book:not(.is-open-complete):not(.is-content-revealing) .book-view.is-active .book__page-inner {
        opacity: 0;
        transform: translateY(0.18rem);
    }

    .book.is-content-revealing .book-view.is-active .book__page-inner,
    .book.is-open-complete .book-view.is-active .book__page-inner {
        opacity: 1;
        transform: translateX(0) translateY(0);
    }

    .book-view.is-content-leaving-forward .book__page-inner {
        opacity: 0;
        transform: translateX(-0.65rem);
        pointer-events: none;
    }

    .book-view.is-content-entering-forward .book__page-inner {
        opacity: 0;
        transform: translateX(0.65rem);
        pointer-events: none;
    }

    .book-view.is-content-leaving-backward .book__page-inner {
        opacity: 0;
        transform: translateX(0.65rem);
        pointer-events: none;
    }

    .book-view.is-content-entering-backward .book__page-inner {
        opacity: 0;
        transform: translateX(-0.65rem);
        pointer-events: none;
    }
}

/* Keep desktop page scrollers inside the visual book height. */
.book__spread,
.book-view,
.book__page {
    min-height: 0;
}

.book-view {
    grid-template-rows: minmax(0, 1fr);
}

/*
|--------------------------------------------------------------------------
| Compact desktop / tablet landscape
|--------------------------------------------------------------------------
*/

@media (max-width: 1180px) and (min-width: 901px) {
    .book-scene {
        --cover-width: min(45vw, 32rem);
        --book-height: min(74vh, 42rem);
    }

    .book__page-inner {
        padding: clamp(1.8rem, 3vw, 2.8rem);
    }

    .book__page h2 {
        font-size: clamp(2.35rem, 4vw, 3.15rem);
    }
}

@media (max-height: 760px) and (min-width: 901px) {
    .book-scene {
        --book-height: min(78vh, 40rem);
        --cover-width: min(42vw, 31rem);
    }

    .book__page-inner {
        padding-block: clamp(1.5rem, 3vh, 2.1rem);
    }
}

/*
|--------------------------------------------------------------------------
| Mobile navigation only
|--------------------------------------------------------------------------
*/

@media (max-width: 900px) {
    .site-footer {
        padding-top: 0.65rem;
    }

    .secondary-nav {
        gap: 0.4rem 0.55rem;
        font-size: 0.72rem;
        line-height: 1.5;
    }
}

@media (max-width: 620px) {
    .secondary-nav {
        font-size: 0.68rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .book__page-inner {
        transition: none !important;
    }
}