/* Flipbook mechanics (flipbook.js): the same 3D scene as the storybook intro clip -- the camera a
   little above a book that leans back, and every leaf turning inside that one scene, so a page lifts
   towards you as it turns. Paper, covers and page content are styled by the app (tale-pages.css). */

.fb {
    position: relative;
    width: 100%;
    height: 100%;
    display: grid;
    place-items: center;
    container-type: size; /* no overflow clipping: the book's shadow may extend past the host */
    perspective: 2800px;
    perspective-origin: 50% 30%;
    -webkit-tap-highlight-color: transparent;
    --fb-dur: 1150ms;
    --fb-turn-ease: cubic-bezier(.55, .05, .25, 1);
    --fb-move-ease: cubic-bezier(.6, 0, .3, 1);
}
.fb, .fb * { box-sizing: border-box; }

/* Nothing between .fb and the faces may clip (overflow) or it would flatten the 3D scene. */
.fb-book {
    --fb-sx: 0%;
    --fb-sy: 0%;
    --fb-tilt: 9deg;
    position: relative;
    transform-style: preserve-3d;
    transform: translate(var(--fb-sx), var(--fb-sy)) rotateX(var(--fb-tilt));
    transition: transform var(--fb-dur) var(--fb-move-ease), width .45s ease, height .45s ease;
}

/* Two-page spreads fill the host: the page shape may flex between 0.65 and 0.85 wide per 1 high to
   use the space, with a small margin for the page edges and the tilt. A closed book sits centred on
   its cover. */
.fb[data-mode="double"] .fb-book {
    width: min(97cqw, 93cqh * 1.7);
    height: min(93cqh, 97cqw / 1.3);
}
.fb[data-mode="double"] .fb-book[data-at="start"] { --fb-sx: -25%; }
.fb[data-mode="double"] .fb-book[data-at="end"] { --fb-sx: 25%; }

/* Portrait phones: the book on its side -- left page on top, right page below, spine across the
   middle -- like the old booklet, but with the text upright. Pages may flex between 0.84 and 1.3
   wide per 1 high. A closed book sits centred on its cover. */
.fb[data-mode="vertical"] { perspective: 2400px; perspective-origin: 50% 45%; }
.fb[data-mode="vertical"] .fb-book {
    --fb-tilt: 5deg;
    width: min(96cqw, 95cqh * .65);
    height: min(95cqh, 96cqw / .42);
}
.fb[data-mode="vertical"] .fb-book[data-at="start"] { --fb-sy: -25%; }
.fb[data-mode="vertical"] .fb-book[data-at="end"] { --fb-sy: 25%; }

/* First show: the book slides up onto the table, as in the intro. */
.fb-enter .fb-book { animation: fb-enter 1.15s cubic-bezier(.2, .9, .25, 1.04) both; }
@keyframes fb-enter {
    from { transform: translate(var(--fb-sx), calc(var(--fb-sy) + 70cqh)) rotateX(26deg); }
    to { transform: translate(var(--fb-sx), var(--fb-sy)) rotateX(var(--fb-tilt)); }
}

.fb-instant .fb-book,
.fb-instant .fb-leaf { transition: none !important; }

/* ---- leaves: hinged on the spine, front = right page, back = left page ---- */
.fb-leaf {
    --fb-z: 0px;
    position: absolute;
    top: 0;
    left: 50%;
    width: 50%;
    height: 100%;
    transform-origin: left center;
    transform-style: preserve-3d;
    transform: translateZ(var(--fb-z)) rotateY(0deg);
    transition: transform var(--fb-dur) var(--fb-turn-ease);
}
.fb-leaf.fb-turned { transform: translateZ(var(--fb-z)) rotateY(-180deg); }
/* On its side: leaves hinge on their top edge and turn upwards, lifting towards the reader. */
.fb[data-mode="vertical"] .fb-leaf {
    top: 50%;
    left: 0;
    width: 100%;
    height: 50%;
    transform-origin: center top;
    transform: translateZ(var(--fb-z)) rotateX(0deg);
}
.fb[data-mode="vertical"] .fb-leaf.fb-turned { transform: translateZ(var(--fb-z)) rotateX(180deg); }
.fb-leaf.fb-hidden { visibility: hidden; }

.fb-face {
    position: absolute;
    inset: 0;
    overflow: hidden;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    background: #fffaf0;
}
.fb-back { transform: rotateY(180deg); }
.fb[data-mode="vertical"] .fb-back { transform: rotateX(180deg); }

.fb-side-right { border-radius: 4px 18px 18px 4px; }
.fb-side-left { border-radius: 18px 4px 4px 18px; }
.fb[data-mode="vertical"] .fb-side-right { border-radius: 4px 4px 18px 18px; }
.fb[data-mode="vertical"] .fb-side-left { border-radius: 18px 18px 4px 4px; }

.fb-scroll {
    position: absolute;
    inset: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    display: flex;
    flex-direction: column;
    scrollbar-width: thin;
}
.fb-page { flex: 1 0 auto; }

/* Spine shading on the resting pages. */
.fb-face::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
}
.fb-side-right::before { background: linear-gradient(90deg, rgba(90, 55, 25, .2), rgba(90, 55, 25, .05) 5%, transparent 10%); }
.fb-side-left::before { background: linear-gradient(270deg, rgba(90, 55, 25, .2), rgba(90, 55, 25, .05) 5%, transparent 10%); }
.fb[data-mode="vertical"] .fb-side-right::before { background: linear-gradient(180deg, rgba(90, 55, 25, .2), rgba(90, 55, 25, .05) 5%, transparent 10%); }
.fb[data-mode="vertical"] .fb-side-left::before { background: linear-gradient(0deg, rgba(90, 55, 25, .2), rgba(90, 55, 25, .05) 5%, transparent 10%); }

/* A soft shade sweeping over a page while it turns. */
.fb-face::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 3;
    opacity: 0;
    pointer-events: none;
}
.fb-turning .fb-front::after { background: linear-gradient(270deg, rgba(90, 55, 25, 0), rgba(90, 55, 25, .18)); animation: fb-shade var(--fb-dur) ease-in-out; }
.fb-turning .fb-back::after { background: linear-gradient(90deg, rgba(90, 55, 25, 0), rgba(90, 55, 25, .18)); animation: fb-shade var(--fb-dur) ease-in-out; }
.fb[data-mode="vertical"] .fb-turning .fb-front::after { background: linear-gradient(0deg, rgba(90, 55, 25, 0), rgba(90, 55, 25, .18)); }
.fb[data-mode="vertical"] .fb-turning .fb-back::after { background: linear-gradient(180deg, rgba(90, 55, 25, 0), rgba(90, 55, 25, .18)); }
@keyframes fb-shade { 50% { opacity: 1; } }


/* ---- page blocks under the leaves (thickness set by flipbook.js) ---- */
.fb-edge {
    position: absolute;
    top: 0;
    width: 50%;
    height: 100%;
    background: #fffaf0;
}
.fb-edge-left { left: 0; border-radius: 18px 4px 4px 18px; }
.fb-edge-right { left: 50%; border-radius: 4px 18px 18px 4px; }
.fb[data-mode="vertical"] .fb-edge { left: 0; width: 100%; height: 50%; }
.fb[data-mode="vertical"] .fb-edge-left { top: 0; border-radius: 18px 18px 4px 4px; }
.fb[data-mode="vertical"] .fb-edge-right { top: 50%; border-radius: 4px 4px 18px 18px; }

/* ---- "more text below" (flipbook.js toggles .has-more) ---- */
.fb-scroll.has-more::after {
    content: "↓";
    position: sticky;
    bottom: 0;
    flex: none;
    display: block;
    height: 56px;
    margin-top: -56px;
    padding-top: 20px;
    text-align: center;
    font: 800 30px/1 system-ui, sans-serif;
    color: var(--fb-accent, #c95578);
    background: linear-gradient(rgba(255, 250, 240, 0), rgba(255, 250, 240, .96) 55%);
    pointer-events: none;
    animation: fb-more 1.4s ease-in-out infinite;
}
@keyframes fb-more { 50% { padding-top: 12px; } }

@media (prefers-reduced-motion: reduce) {
    .fb-scroll.has-more::after { animation: none; }
    .fb-enter .fb-book { animation: none; }
}