/* ==========================================================================
   Flipbook — mobile portrait layout
   Paired with js/flipbook-mobile.js.

   The print book is a wide 2-up spread (≈1.66:1). On a phone we rebuild each
   spread as one portrait page:

     ┌───────────────────────┐
     │   blurred bleed       │  ← same art, upscaled + blurred, fills the band
     │  ┌─────────────────┐  │
     │  │                 │  │
     │  │  TRUE ART       │  │  ← illustration half, fitted to width, uncropped
     │  │  (untouched)    │  │
     │  ├─────────────────┤  │
     │  │ frosted card    │  │  ← backdrop-filter blur, art shows through
     │  │ story text      │  │
     │  └─────────────────┘  │
     └───────────────────────┘

   Nothing is cropped and no artwork is redrawn — the letterbox band is filled
   with the page's own colours so the illustration still reads as one surface.
   ========================================================================== */

.flipbook-turn--mobile {
    /* turn.js positions pages absolutely; keep our own stacking predictable. */
    touch-action: pan-y;
}

.flipbook-turn .page.mpage {
    position: relative;
    overflow: hidden;
    background: var(--white, #fff);
    border-radius: 6px;
}

/* ---- Layer 1: blurred bleed ---------------------------------------------
   A 40px-wide render of the same half, upscaled and blurred into the band the
   contained illustration doesn't reach. Cheap, and it keeps the page feeling
   painted edge-to-edge instead of showing white bars. */
.mpage__bleed {
    position: absolute;
    inset: -8%;
    background-size: cover;
    background-position: center;
    filter: blur(26px) saturate(1.15);
    transform: scale(1.06);
    opacity: 0.85;
    pointer-events: none;
}

/* ---- Layer 2: the real illustration ------------------------------------- */
.mpage__art {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    line-height: 0;
}

.mpage__art canvas {
    display: block;
    max-width: 100%;
    height: auto;
}

/* Single portrait pages (the cover) fill the frame outright. */
.mpage--full .mpage__art {
    top: 0;
    bottom: 0;
    align-items: center;
}

/* Soften the seam where the true art meets the blurred bleed by fading the
   art's bottom edge out. A mask is used rather than a white gradient so it
   works on any page tone — a white veil would haze the deeply saturated
   spreads (the orange star page) while being invisible on the pale ones. */
.mpage--has-text .mpage__art {
    -webkit-mask-image: linear-gradient(to bottom, #000 90%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 90%, transparent 100%);
}

/* ---- Layer 3: frosted story text ----------------------------------------
   `backdrop-filter` blurs whatever sits behind the card — so the illustration's
   colour still comes through, just softened enough for the text to be legible.
   Only the card area is blurred; the rest of the page stays perfectly sharp. */
.mpage__text {
    position: absolute;
    left: 3.5%;
    right: 3.5%;
    bottom: 3.5%;
    max-height: 52%;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;

    padding: 0.95rem 1.05rem;
    border-radius: 16px;

    background: rgba(255, 255, 255, 0.52);
    -webkit-backdrop-filter: blur(14px) saturate(1.5);
    backdrop-filter: blur(14px) saturate(1.5);
    border: 1px solid rgba(255, 255, 255, 0.65);
    box-shadow: 0 6px 20px rgba(41, 37, 36, 0.14);
}

/* Browsers without backdrop-filter get a more opaque card so text never sits
   on raw illustration at low contrast. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .mpage__text {
        background: rgba(255, 255, 255, 0.9);
    }
}

.mpage__p {
    margin: 0;
    font-family: var(--font-body, system-ui, sans-serif);
    /* The baked text renders around 5px on a phone. This is the whole point of
       the exercise: real, resizable text at a genuine reading size. */
    font-size: clamp(1rem, 4.1vw, 1.14rem);
    line-height: 1.5;
    font-weight: 500;
    color: #1c1917;
    text-wrap: pretty;
}

.mpage__p + .mpage__p {
    margin-top: 0.6rem;
}

/* Language swap is CSS-only — both languages are already in the DOM, so
   toggling never re-renders the PDF. Covers the story paragraphs and any
   other localised string on a page (e.g. the cover's flip prompt). */
.flipbook-turn[data-lang='en'] .mpage__p[lang='es'],
.flipbook-turn[data-lang='es'] .mpage__p[lang='en'],
.flipbook-turn[data-lang='en'] .mpage__i18n[lang='es'],
.flipbook-turn[data-lang='es'] .mpage__i18n[lang='en'] {
    display: none;
}

/* ---- Zoom affordance ----------------------------------------------------- */
.mpage__zoom {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid rgba(41, 37, 36, 0.12);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.82);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    color: var(--charcoal, #292524);
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(41, 37, 36, 0.14);
    z-index: 4;
}

.mpage__zoom:active {
    transform: scale(0.94);
}

/* ---- Cover: "this is a book, flip it" ------------------------------------
   A corner that lifts and settles on a loop, plus a one-line prompt. Both are
   on the cover only and disappear for good after the first flip, so they read
   as an invitation rather than permanent chrome. */
.mpage__curl {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 62px;
    height: 62px;
    z-index: 5;
    pointer-events: none;
    border-radius: 3px 0 3px 0;
    background: linear-gradient(
        315deg,
        rgba(255, 255, 255, 0.96) 0%,
        rgba(255, 251, 235, 0.92) 45%,
        rgba(253, 224, 71, 0.35) 70%,
        rgba(41, 37, 36, 0.06) 100%
    );
    box-shadow: -3px -3px 10px rgba(41, 37, 36, 0.18);
    transform-origin: bottom right;
    animation: mpage-curl 2.6s ease-in-out infinite;
}

@keyframes mpage-curl {
    0%, 62%, 100% { transform: scale(0.34); opacity: 0.55; }
    78%           { transform: scale(1);    opacity: 1; }
    88%           { transform: scale(0.82); opacity: 0.92; }
}

.mpage__tip {
    position: absolute;
    left: 50%;
    bottom: 14px;
    transform: translateX(-50%);
    z-index: 5;
    pointer-events: none;

    max-width: 84%;
    padding: 0.5rem 0.9rem;
    border-radius: 999px;
    background: rgba(41, 37, 36, 0.82);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    color: #fff;
    font-family: var(--font-body, system-ui, sans-serif);
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1.25;
    text-align: center;
    animation: mpage-tip-in 0.5s ease-out both;
    animation-delay: 0.6s;
}

@keyframes mpage-tip-in {
    from { opacity: 0; transform: translate(-50%, 8px); }
    to   { opacity: 1; transform: translate(-50%, 0); }
}

/* Once the reader has flipped even once, the lesson has landed. */
.flipbook-turn--flipped .mpage__curl,
.flipbook-turn--flipped .mpage__tip {
    display: none;
}

/* ---- Back cover in portrait --------------------------------------------- */
.flipbook-turn .page.back-cover--mobile .back-cover__link {
    padding: 1.5rem 1.25rem;
}

/* ==========================================================================
   Toolbar — language toggle
   ========================================================================== */

/* Pinned over the book's top-left — opposite the zoom control, on the quietest
   part of the artwork. It sits on the stage rather than in the toolbar because
   in the toolbar it fell below the fold, which made a bilingual book look
   monolingual to anyone arriving from "Peek inside the flipbook". */
.flipbook-lang {
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(calc(-1 * var(--mpage-w, 340px) / 2 + 10px));
    z-index: 6;

    min-height: 36px;
    padding: 0 0.85rem;
    border: 1px solid rgba(41, 37, 36, 0.12);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.86);
    -webkit-backdrop-filter: blur(10px) saturate(1.4);
    backdrop-filter: blur(10px) saturate(1.4);
    box-shadow: 0 2px 8px rgba(41, 37, 36, 0.16);

    font-family: var(--font-display, sans-serif);
    font-weight: 700;
    font-size: 0.82rem;
    color: var(--charcoal, #292524);
    white-space: nowrap;
    cursor: pointer;
}

.flipbook-lang:active {
    transform: translateX(calc(-1 * var(--mpage-w, 340px) / 2 + 10px)) scale(0.96);
}

/* ==========================================================================
   Full-screen pinch / pan zoom
   ========================================================================== */

.mzoom {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(28, 25, 23, 0.94);
}

.mzoom.is-open {
    display: flex;
}

.mzoom__stage {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    /* We handle pinch + drag ourselves via pointer events. */
    touch-action: none;
    cursor: grab;
}

.mzoom__img {
    max-width: 96%;
    max-height: 88%;
    transform-origin: center center;
    will-change: transform;
    user-select: none;
    -webkit-user-drag: none;
    border-radius: 4px;
    background: #fff;
}

.mzoom__close {
    position: absolute;
    top: max(12px, env(safe-area-inset-top));
    right: 12px;
    width: 44px;
    height: 44px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.16);
    color: #fff;
    font-size: 1.6rem;
    line-height: 1;
    cursor: pointer;
    z-index: 2;
}

.mzoom__hint {
    position: absolute;
    bottom: max(16px, env(safe-area-inset-bottom));
    left: 0;
    right: 0;
    margin: 0;
    text-align: center;
    color: rgba(255, 255, 255, 0.72);
    font-family: var(--font-body, system-ui, sans-serif);
    font-size: 0.82rem;
    pointer-events: none;
}

/* ==========================================================================
   Mobile-only adjustments to the surrounding preview section
   ========================================================================== */

@media (max-width: 767px) {
    /* Everything a reader needs to work the book — the book, the flip
       controls and the language toggle — has to land on one screen. Arriving
       from "Peek inside the flipbook" and finding the controls below the fold
       is how the language toggle went unnoticed entirely. So the section
       trims its own chrome and the JS sizes the page to what's left
       (CHROME_H in js/flipbook-mobile.js). */
    .section-preview {
        padding-top: 1.1rem;
        padding-bottom: 1.1rem;
    }

    .section-preview__header {
        margin-bottom: 0.25rem;
    }

    .section-preview__header h2 {
        margin-bottom: 0.15rem;
    }

    /* The heading already says "Take a Look Inside"; the sentence under it is
       the first thing worth losing to keep the book on screen. */
    .section-preview__header p {
        display: none;
    }

    /* Reserved pre-mount height is tuned for a wide spread; in portrait that
       leaves a large empty gap before the book appears. */
    .flipbook-stage__shell {
        min-height: 0;
        padding: 0.35rem 0;
    }

    .flipbook-stage {
        position: relative;
    }

    .flipbook-toolbar {
        gap: 0.5rem;
        margin-top: 0.6rem;
        flex-wrap: nowrap;
    }

    .flipbook-toolbar button {
        min-height: 44px;
        padding: 0 0.9rem;
    }

    .flipbook-toolbar #flipPageLabel {
        font-size: 0.8rem;
        text-align: center;
        flex: 1 1 auto;
        min-width: 0;
    }

    /* The cover's own curl + tooltip now teach the flip gesture in place,
       so the separate hint below the book is redundant weight on screen. */
    .preview-hint {
        display: none;
    }

    /* Set while the preview section is on screen (see flipbook-inline.js).
       The fixed CTA bar is ~78px — a tenth of a phone screen — and the same
       CTA sits immediately below this section, so it stands down here and
       returns the moment the preview scrolls away. */
    body.flipbook-immersive .mobile-bar-landing {
        transform: translateY(110%);
        pointer-events: none;
    }

    .mobile-bar-landing {
        transition: transform 0.25s ease;
    }
}

/* Above the portrait breakpoint the corner-drag hint is the accurate one. */
@media (min-width: 768px) {
    .preview-hint__label--touch {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .mpage__zoom:active {
        transform: none;
    }
}