/* =============================================
   FOTOBOEK — book.css
   Zelfde mechaniek als fchavonet/creative_coding-flip_book:
   - boek schuift opzij (translateX) zodra de kaft opengaat
   - kaft klapt om via rotateY, met z-index-delay net als origineel
   - pagina's krijgen oplopende z-index naarmate je verder bladert
   - "edge shading" afbeeldingen voor de papierdiepte (originele assets)
   ============================================= */

.hidden { display: none !important; }

.book-counter {
    text-align: center;
    margin-top: 18px;
    font-family: 'DM Sans', sans-serif;
    font-size: 0.85rem;
    letter-spacing: 0.04em;
    color: #8a8378;
}

.book-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    margin: 40px auto 0;
    max-width: 960px;
}

/* ── Bühne: geeft ruimte voor het zijwaarts schuivende boek ── */
.book-stage {
    position: relative;
    width: min(88vw, 540px);
    aspect-ratio: 298 / 420;
    perspective: 2000px;
}

/* ── Het boek: schuift opzij zodra hij openklapt ── */
.book {
    position: absolute;
    top: 0;
    left: 50%;
    width: 100%;
    height: 100%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    transition: transform 1s ease;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
}

.book.open {
    -webkit-transform: translateX(-2%);
    transform: translateX(-2%);
}

/* ── Kaft (voorkant), identiek qua opzet aan front_cover/back_cover ── */
.book-front-cover,
.book-back-cover {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-radius: 2px 6px 6px 2px;
}

.book-back-cover {
    z-index: -1;
    backface-visibility: hidden;
    background-image: url('assets/images/flip_book_edge_shading.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-color: #33422f;
    box-shadow: 0 0 6px 0 rgba(20, 15, 10, 0.35);
}

.book-front-cover {
    cursor: pointer;
    transform-origin: left center;
    transition: transform 1.5s ease, z-index 0s 0.75s;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    z-index: 99;
}

/* Omgeklapt: helemaal naar achteren, zodat de omgeslagen bladen (en hun
   page-back links) erbovenop blijven. De z-index wisselt pas halverwege de
   draai, als de kaft toch al van de kijker af staat. */
.book-front-cover.flipped {
    -webkit-transform: rotateY(-178deg);
    transform: rotateY(-178deg);
    z-index: -1;
}

/* De twee zijden van de voorkaft: buitenkant (dicht) + binnenkant (open) ── */
.cover-face {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
    padding: 0 24px;
    text-align: center;
    border-radius: 2px 6px 6px 2px;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.cover-face-front {
    background-image: url('assets/images/flip_book_edge_shading.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-color: #33422f;
    box-shadow: 0 0 6px 0 rgba(20, 15, 10, 0.35);
}

.cover-face-inside {
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg);
    background: linear-gradient(120deg, #f2ece1, #fbf7f0 55%, #efe8db);
    box-shadow: inset 0 0 45px rgba(120, 100, 70, 0.15);
}

.cover-inside-text {
    font-family: 'Playfair Display', serif;
    font-size: 1.05rem;
    line-height: 1.75;
    color: #4a4438;
    text-align: center;
}

.cover-inside-text p {
    margin: 0 0 0.9em;
}

.cover-inside-text p:last-child {
    margin-bottom: 0;
}

/* ── Introblad: eerste blad is een tekstpagina i.p.v. een foto ── */
.page-intro .page-front {
    background: linear-gradient(120deg, #f2ece1, #fbf7f0 55%, #efe8db);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12% 13%;
}

.page-intro-text {
    font-family: 'Playfair Display', serif;
    font-size: 1.05rem;
    line-height: 1.75;
    color: #4a4438;
    text-align: center;
}

.page-intro-text p {
    margin: 0 0 0.9em;
}

.page-intro-text p:last-child {
    margin-bottom: 0;
}

.cover-emblem {
    font-size: 2.1rem;
    color: #e8d9b8;
}

.cover-title {
    font-family: 'Playfair Display', serif;
    font-size: 1.3rem;
    color: #f3ecd9;
    letter-spacing: 0.02em;
    margin: 0;
}

.cover-hint {
    font-family: 'DM Sans', sans-serif;
    font-size: 0.78rem;
    color: rgba(243, 236, 217, 0.55);
    margin: 0;
}

/* ── Pagina's: iets kleiner dan de kaft, zodat die als rand zichtbaar blijft ── */
.book-pages {
    position: absolute;
    top: 2.4%;
    bottom: 2.4%;
    left: 0.35%;
    right: 3%;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
}

.page {
    position: absolute;
    inset: 0;
    border-radius: 0 5px 5px 0;
    background-color: #fbf7f0;
    transform-origin: left center;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-transform: rotateY(0deg);
    transform: rotateY(0deg);
    transition: transform 0.8s ease;
    cursor: pointer;
}

.page.flipped {
    -webkit-transform: rotateY(-178deg);
    transform: rotateY(-178deg);
}

/* LET OP: hier bewust GEEN `overflow: hidden` + `border-radius`. In
   combinatie met backface-visibility + preserve-3d laat iOS Safari de
   inhoud dan niet renderen. De voorkant vult de pagina exact, dus er valt
   toch niets af te knippen. De kleine translateZ zet de twee zijden op
   losse dieptes zodat ze niet z-fighten (flikkeren/verdwijnen op iOS). */
.page-front,
.page-back {
    position: absolute;
    inset: 0;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.page-front {
    -webkit-transform: translateZ(1px);
    transform: translateZ(1px);
}

.page-back {
    -webkit-transform: rotateY(180deg) translateZ(1px);
    transform: rotateY(180deg) translateZ(1px);
    background: linear-gradient(120deg, #f2ece1, #fbf7f0 55%, #efe8db);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 18px;
    padding: 12% 14%;
    text-align: center;
}

.page-back-caption {
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-size: 1.05rem;
    line-height: 1.55;
    color: #4a4438;
    white-space: pre-wrap;
}

.page-content {
    display: block;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* originele edge-shading afbeeldingen voor de papierdiepte */
.edge-shading {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.edge-shading-front {
    background-image: url('assets/images/front_page_edge_shading.webp');
}

.edge-shading-back {
    background-image: url('assets/images/back_page_edge_shading.webp');
}

.page-back-hint {
    font-family: 'Playfair Display', serif;
    font-size: 1.6rem;
    color: rgba(74, 68, 56, 0.3);
}

.page-caption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 26px 16px 12px;
    background: linear-gradient(0deg, rgba(0,0,0,0.55), transparent);
    color: #fff;
    font-family: 'Playfair Display', serif;
    font-style: italic;
    text-align: center;
    font-size: 0.9rem;
}

/* knoppen bovenop de foto */
.page-toolbar {
    position: absolute;
    top: 14px;
    right: 14px;
    display: flex;
    gap: 8px;
    z-index: 5;
}

.page-btn {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(4px);
    font-size: 0.8rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0,0,0,0.18);
    transition: transform 0.15s ease, background 0.15s ease;
}

.page-btn:hover {
    transform: scale(1.1);
    background: #fff;
}

/* ── Navigatieknoppen naast het boek ── */
.book-nav {
    flex: none;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: none;
    background: #fff;
    color: #4A90D9;
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 6px 16px rgba(0,0,0,0.15);
    transition: transform 0.15s ease, opacity 0.15s ease;
}

.book-nav:hover:not(:disabled) {
    transform: scale(1.08);
}

.book-nav:disabled {
    opacity: 0.3;
    cursor: default;
}

/* =============================================
   RESPONSIVE / TELEFOON
   Het volledige 3D-omslagboek blijft — ook de dubbele spread. Om die op
   een telefoon te laten passen maken we de "stage" kleiner dan een halve
   viewport, en zetten we het geopende boek zo dat de rug (spine) in het
   midden van het scherm ligt: dan staat de spread symmetrisch en past
   [-W .. +W] rond het midden precies. De navigatieknoppen komen onder
   het boek. De foto is een background-image (rendert wel in 3D op iOS).
   ============================================= */
@media (max-width: 760px) {
    .book-wrap {
        display: grid;
        grid-template-columns: 1fr 1fr;
        justify-items: center;
        align-items: center;
        gap: 14px 18px;
        margin-top: 22px;
        overflow: hidden;          /* vangnet voor heel smalle schermen */
    }
    .book-stage {
        grid-row: 1;
        grid-column: 1 / -1;
        width: min(45vw, 320px);   /* spread = 2x deze breedte, past gecentreerd */
    }
    .book-nav-prev { grid-row: 2; grid-column: 1; justify-self: end; }
    .book-nav-next { grid-row: 2; grid-column: 2; justify-self: start; }
    .book-nav { width: 48px; height: 48px; font-size: 1.4rem; } /* tikdoel >= 44px */

    /* .book.open NIET overschrijven: dezelfde translateX(-2%) als op desktop.
       Omdat de stage hier maar ~45vw is, staat de dubbele spread (2x stage)
       vanzelf gecentreerd en past hij op het scherm. */

    /* Kleinere pagina's -> iets kleinere tekst */
    .page-intro-text,
    .cover-inside-text,
    .page-back-caption { font-size: 0.82rem; line-height: 1.5; }
    .page-intro .page-front { padding: 9% 10%; }
    .page-back { padding: 9% 11%; }
    .cover-title { font-size: 1rem; }
    .cover-emblem { font-size: 1.6rem; }
    .cover-hint { font-size: 0.66rem; }

    .page-toolbar { top: 8px; right: 8px; gap: 6px; }
    .page-btn { width: 26px; height: 26px; font-size: 0.7rem; }

    .book-counter { margin-top: 12px; }
    .book-mobile-caption { display: none; }   /* linkerpagina toont de tekst al */
}

@media (min-width: 761px) {
    .book-mobile-caption { display: none; }
}