/* =============================================================================
   BOOK LANDING PAGE
   Closed book on watercolor desk, invitation code entry, opening animation
   ============================================================================= */

/* Minimal layout for landing page */
.book-layout {
    min-height: 100vh;
    overflow: hidden;
}

/* Full-viewport desk scene */
.book-landing-page {
    position: fixed;
    inset: 0;
    background-image: url('/images/backgrounds/landing-page-bg.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Scene container — holds the book, handles zoom animation */
.book-landing-scene {
    position: relative;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

/* ─── 3D Book Structure ─── */
.book-closed {
    position: relative;
    width: min(500px, 92vw);
    height: min(650px, 80vh);
    perspective: 1200px;
    transform-style: preserve-3d;
}

/* Book cover — the front face that rotates open */
.book-cover {
    position: absolute;
    inset: 0;
    background: linear-gradient(145deg,
        var(--book-cover-leather) 0%,
        var(--book-cover-dark) 100%);
    border-radius: 4px 12px 12px 4px;
    transform-origin: left center;
    transform-style: preserve-3d;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    z-index: 3;
    transition: transform 1.2s cubic-bezier(0.645, 0.045, 0.355, 1);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 30px;
    box-shadow:
        4px 4px 15px rgba(0, 0, 0, 0.3),
        inset 0 0 40px rgba(0, 0, 0, 0.15);
    overflow: hidden;
}

/* Paper texture on cover */
.book-cover::after {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--env-paper-grain);
    opacity: 0.06;
    pointer-events: none;
    border-radius: inherit;
}

/* Gold frame on cover */
.book-cover-frame {
    position: absolute;
    inset: 16px;
    border: 2px solid var(--book-gold-leaf);
    border-radius: 2px;
    opacity: 0.35;
    pointer-events: none;
}

.book-cover-frame::after {
    content: '';
    position: absolute;
    inset: 4px;
    border: 1px solid var(--book-gold-detail);
    border-radius: 2px;
    opacity: 0.25;
}

/* Ornamental corners on cover */
.book-cover-corner {
    position: absolute;
    width: clamp(30px, 4vw, 45px);
    height: clamp(30px, 4vw, 45px);
    color: var(--book-gold-leaf);
    opacity: 0.7;
    z-index: 1;
}

.book-cover-corner--tl { top: 10px; left: 10px; }
.book-cover-corner--tr { top: 10px; right: 10px; transform: scaleX(-1); }
.book-cover-corner--bl { bottom: 10px; left: 10px; transform: scaleY(-1); }
.book-cover-corner--br { bottom: 10px; right: 10px; transform: scale(-1); }

/* Cover content — frosted glass panel for readability over any background */
.book-cover-content {
    text-align: center;
    z-index: 2;
    position: relative;
    padding: 20px 28px;
    border-radius: 12px;
    background: rgba(46, 24, 0, 0.5);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 1px solid rgba(212, 175, 55, 0.12);
}

.book-cover-title {
    font-family: var(--font-script);
    color: var(--book-gold-leaf);
    font-size: clamp(1.8rem, 5vw, 2.6rem);
    line-height: 1.4;
    margin: 0;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5), 0 0 12px rgba(0, 0, 0, 0.25);
    font-weight: 400;
}

.book-cover-subtitle {
    font-family: var(--font-heading);
    color: var(--book-gold-detail);
    font-size: clamp(0.8rem, 2vw, 1rem);
    letter-spacing: 0.2em;
    text-transform: uppercase;
    margin: 12px 0 0;
    opacity: 0.85;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

/* Flourish dividers on cover */
.book-cover-flourish {
    color: var(--book-gold-detail);
    opacity: 0.4;
    margin: 8px 0;
}

.book-cover-flourish svg {
    width: 120px;
    height: 16px;
}

/* Personalized welcome from /invite/{guid} URL */
.book-cover-personalized {
    text-align: center;
    z-index: 2;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 12px;
    animation: fadeIn 0.8s ease-out;
}

.book-cover-personalized__label {
    font-family: var(--font-heading, 'Playfair Display', serif);
    font-size: 0.8rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--book-gold-leaf, #D4AF37);
    opacity: 0.8;
}

.book-cover-personalized__name {
    font-family: var(--font-script, 'Great Vibes', cursive);
    font-size: 2rem;
    color: var(--book-gold-leaf, #D4AF37);
    line-height: 1.3;
}

/* Access code form on cover */
.book-cover-form {
    margin-top: 20px;
    text-align: center;
    z-index: 2;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 16px 24px;
    border-radius: 12px;
    background: rgba(46, 24, 0, 0.45);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 1px solid rgba(212, 175, 55, 0.1);
}

/* Welcome-back panel for authenticated guests (replaces access code form) */
.book-cover-welcome {
    margin-top: 20px;
    text-align: center;
    z-index: 2;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 16px 24px;
    border-radius: 12px;
    background: rgba(46, 24, 0, 0.45);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 1px solid rgba(212, 175, 55, 0.1);
    animation: coverWelcomeFadeIn 0.6s ease-out both;
}

.book-cover-welcome__greeting {
    font-family: var(--font-heading);
    color: var(--book-gold-detail, rgba(212, 175, 55, 0.7));
    font-size: 0.85rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    margin: 0 0 4px;
    opacity: 0.85;
}

.book-cover-welcome__name {
    font-family: var(--font-script);
    color: var(--book-gold-leaf);
    font-size: clamp(1.4rem, 4vw, 2rem);
    margin: 0 0 16px;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
}

.book-cover-setdown {
    margin-top: 12px;
    background: none;
    border: none;
    color: var(--book-gold-detail, rgba(212, 175, 55, 0.7));
    font-family: var(--font-body);
    font-size: 0.75rem;
    cursor: pointer;
    opacity: 0.65;
    transition: opacity 0.3s ease, border-bottom-color 0.3s ease;
    text-decoration: none;
    border-bottom: 1px solid transparent;
    padding: 4px 8px;
}

.book-cover-setdown:hover {
    opacity: 1;
    border-bottom-color: rgba(212, 175, 55, 0.3);
}

@keyframes coverWelcomeFadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

.book-cover-input {
    background: rgba(0, 0, 0, 0.2);
    border: none;
    border-bottom: 1.5px solid var(--book-gold-detail);
    color: var(--book-gold-leaf);
    font-family: var(--font-body);
    font-size: 0.95rem;
    text-align: center;
    padding: 10px 16px;
    width: min(280px, 70vw);
    border-radius: 6px 6px 0 0;
    outline: none;
    letter-spacing: 0.1em;
    transition: border-color 0.3s ease;
}

.book-cover-input::placeholder {
    color: rgba(212, 175, 55, 0.55);
    font-style: italic;
}

.book-cover-input:focus {
    border-bottom-color: var(--book-gold-leaf);
}

.book-cover-error {
    color: #e8a0a0;
    font-family: var(--font-body);
    font-size: 0.8rem;
    margin: 8px 0 0;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.book-cover-submit {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 12px;
    padding: 10px 28px;
    border: 1.5px solid var(--book-gold-leaf);
    border-radius: 30px;
    background: rgba(212, 175, 55, 0.15);
    color: var(--book-gold-leaf);
    font-family: var(--font-heading);
    font-size: 0.85rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.3s ease;
    opacity: 1;
    transform: translateY(0);
}

.book-cover-submit:hover:not(:disabled) {
    background: rgba(212, 175, 55, 0.3);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(212, 175, 55, 0.2);
}

.book-cover-submit:disabled {
    opacity: 0.5;
    cursor: default;
}

.book-cover-submit--hidden {
    opacity: 0;
    pointer-events: none;
    transform: translateY(8px);
}

.book-cover-spinner {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid rgba(212, 175, 55, 0.3);
    border-top-color: var(--book-gold-leaf);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* Guest name on cover */
.book-cover-name {
    font-family: var(--font-script);
    color: var(--book-gold-leaf);
    font-size: clamp(1.4rem, 4vw, 2rem);
    margin-top: 16px;
    opacity: 0;
    z-index: 2;
    position: relative;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
}

.book-cover-name--visible {
    animation: book-ink-write 0.6s ease-out forwards;
}


/* First page (sky background, visible when cover opens) */
.book-first-page {
    position: absolute;
    inset: 0;
    border-radius: 2px 12px 12px 2px;
    overflow: hidden;
    z-index: 2;
}

.book-first-page-bg {
    position: absolute;
    inset: 0;
    background-image: url('/images/backgrounds/login-bg.jpg');
    background-size: cover;
    background-position: center;
}

/* Back cover */
.book-back-cover {
    position: absolute;
    inset: 0;
    background: linear-gradient(145deg,
        color-mix(in srgb, var(--book-cover-leather) 90%, black) 0%,
        var(--book-cover-dark) 100%);
    border-radius: 4px 12px 12px 4px;
    z-index: 1;
    box-shadow: 4px 6px 20px rgba(0, 0, 0, 0.4);
}

/* Spine detail */
.book-spine {
    position: absolute;
    left: -6px;
    top: 2px;
    bottom: 2px;
    width: 12px;
    background: linear-gradient(to right,
        var(--book-cover-dark),
        var(--book-cover-leather) 40%,
        var(--book-cover-leather) 60%,
        var(--book-cover-dark));
    border-radius: 4px 0 0 4px;
    z-index: 4;
    box-shadow: -2px 0 8px rgba(0, 0, 0, 0.3);
}

.book-spine::before,
.book-spine::after {
    content: '';
    position: absolute;
    left: 2px;
    right: 2px;
    height: 1px;
    background: var(--book-gold-detail);
    opacity: 0.3;
}

.book-spine::before { top: 20px; }
.book-spine::after { bottom: 20px; }

/* ─── Cover Edge Thickness (Phase 6A) — visible 3D edges on closed book ─── */
.book-cover::before {
    content: '';
    position: absolute;
    right: -4px;
    top: 2px;
    bottom: 2px;
    width: 4px;
    background: linear-gradient(to right,
        color-mix(in srgb, var(--book-cover-leather) 80%, black),
        color-mix(in srgb, var(--book-cover-leather) 60%, black));
    transform-origin: left center;
    transform: rotateY(90deg);
    border-radius: 0 2px 2px 0;
}

.book-closed::after {
    content: '';
    position: absolute;
    left: 2px;
    right: 2px;
    bottom: -4px;
    height: 4px;
    background: linear-gradient(to bottom,
        color-mix(in srgb, var(--book-cover-leather) 80%, black),
        color-mix(in srgb, var(--book-cover-leather) 55%, black));
    transform-origin: top center;
    transform: rotateX(-90deg);
    border-radius: 0 0 2px 2px;
}

/* ─── Visible Page Stack Under Cover (Phase 6B) ─── */
.book-first-page::before {
    content: '';
    position: absolute;
    right: 0;
    top: 4px;
    bottom: 4px;
    width: 5px;
    background: repeating-linear-gradient(to left,
        #e8e0d0 0px,
        #e8e0d0 1px,
        #f5f0e8 1px,
        #f5f0e8 2px);
    z-index: 3;
    border-radius: 0 2px 2px 0;
    box-shadow: 1px 0 2px rgba(0, 0, 0, 0.1);
}


/* ─── Book Landing Animations ─── */

/* Ink write animation for guest name */
@keyframes book-ink-write {
    0%   { clip-path: inset(0 100% 0 0); opacity: 0.4; }
    15%  { opacity: 1; }
    100% { clip-path: inset(0 0% 0 0); opacity: 1; }
}

/* Cover opens like a real book */
.book--opening .book-cover {
    transform: rotateY(-160deg);
}


/* ═══════════════════════════════════════════════════════════════
   LANDING PAGE — CANDLE FLAME & TEA STEAM ANIMATIONS
   ═══════════════════════════════════════════════════════════════ */

/* --- Candle Flames --- */
/* Two candles on the desk: shorter dripping candle + taller white candle */
.landing-candle-flame {
    position: absolute;
    z-index: 5;
    pointer-events: none;
    transform: translate(-50%, -100%);
}

/* Shorter dripping candle (left, on ornate saucer) */
.landing-candle-flame--1 {
    top: 59%;
    left: 63%;
}

/* Taller white candle (right, on candlestick holder) — slightly smaller flame, offset timing */
.landing-candle-flame--2 {
    top: 54%;
    left: 65.5%;
}

.landing-candle-flame--2 .flame-outer {
    width: 14px;
    height: 28px;
    animation-duration: 3.5s;
    animation-delay: 0.7s;
}

.landing-candle-flame--2 .flame-inner {
    width: 8px;
    height: 18px;
    animation-duration: 2.8s;
    animation-delay: 0.4s;
}

.landing-candle-flame--2 .flame-glow {
    width: 55px;
    height: 55px;
    animation-delay: 1s;
}

.flame-outer {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 18px;
    height: 36px;
    background: radial-gradient(ellipse at 50% 85%,
        rgba(255, 220, 70, 1) 0%,
        rgba(255, 170, 30, 0.8) 35%,
        rgba(255, 110, 0, 0.4) 65%,
        transparent 100%);
    border-radius: 50% 50% 30% 30%;
    filter: blur(1px);
    animation: flameOuter 3s ease-in-out infinite alternate;
}

.flame-inner {
    position: absolute;
    bottom: 3px;
    left: 50%;
    transform: translateX(-50%);
    width: 10px;
    height: 24px;
    background: radial-gradient(ellipse at 50% 80%,
        #fffbe8 0%,
        #ffe680 25%,
        #ffa500 55%,
        transparent 100%);
    border-radius: 50% 50% 35% 35%;
    filter: blur(0.5px);
    animation: flameInner 2.5s ease-in-out infinite alternate-reverse;
}

.flame-glow {
    position: absolute;
    bottom: -12px;
    left: 50%;
    transform: translateX(-50%);
    width: 70px;
    height: 70px;
    background: radial-gradient(circle,
        rgba(255, 190, 60, 0.2) 0%,
        rgba(255, 160, 40, 0.1) 40%,
        transparent 65%);
    border-radius: 50%;
    animation: flameGlow 4s ease-in-out infinite alternate;
}

@keyframes flameOuter {
    0%   { transform: translateX(-50%) scaleY(1) scaleX(1) skewX(0deg); opacity: 0.85; }
    20%  { transform: translateX(-50%) scaleY(1.08) scaleX(0.92) skewX(2deg); opacity: 0.9; }
    40%  { transform: translateX(-50%) scaleY(0.95) scaleX(1.04) skewX(-1.5deg); opacity: 0.8; }
    60%  { transform: translateX(-50%) scaleY(1.05) scaleX(0.96) skewX(3deg); opacity: 0.88; }
    80%  { transform: translateX(-50%) scaleY(0.98) scaleX(1.02) skewX(-0.5deg); opacity: 0.82; }
    100% { transform: translateX(-50%) scaleY(1.02) scaleX(0.98) skewX(-2deg); opacity: 0.87; }
}

@keyframes flameInner {
    0%   { transform: translateX(-50%) scaleY(1) skewX(0deg); opacity: 0.9; }
    25%  { transform: translateX(-50%) scaleY(1.12) skewX(-2deg); opacity: 1; }
    50%  { transform: translateX(-50%) scaleY(0.92) skewX(1.5deg); opacity: 0.85; }
    75%  { transform: translateX(-50%) scaleY(1.06) skewX(-1deg); opacity: 0.95; }
    100% { transform: translateX(-50%) scaleY(0.97) skewX(2.5deg); opacity: 0.88; }
}

@keyframes flameGlow {
    0%   { opacity: 0.5; transform: translateX(-50%) scale(1); }
    33%  { opacity: 0.7; transform: translateX(-50%) scale(1.08); }
    66%  { opacity: 0.45; transform: translateX(-50%) scale(0.95); }
    100% { opacity: 0.6; transform: translateX(-50%) scale(1.05); }
}

/* --- Tea Steam --- */
/* Positioned above the ornate teacup to the right of the candle */
.landing-tea-steam {
    position: absolute;
    top: 61%;
    left: 72%;
    z-index: 5;
    pointer-events: none;
    transform: translateX(-50%);
}

.steam-wisp {
    position: absolute;
    bottom: 0;
    width: 24px;
    height: 70px;
    background: rgba(240, 235, 225, 0.35);
    border-radius: 50%;
    filter: blur(5px);
    animation: steamRise 5s ease-out infinite;
}

.steam-wisp--1 {
    left: 0;
}

.steam-wisp--2 {
    left: 14px;
    width: 20px;
    height: 60px;
    animation-delay: 1.8s;
    animation-duration: 5.5s;
}

.steam-wisp--3 {
    left: -6px;
    width: 16px;
    height: 50px;
    animation-delay: 3.2s;
    animation-duration: 4.5s;
}

@keyframes steamRise {
    0%   { opacity: 0; transform: translateY(0) scaleX(1) rotate(0deg); }
    8%   { opacity: 0.5; }
    30%  { opacity: 0.35; transform: translateY(-35px) scaleX(1.3) rotate(3deg); }
    60%  { opacity: 0.15; transform: translateY(-70px) scaleX(1.6) rotate(-2deg); }
    100% { opacity: 0; transform: translateY(-110px) scaleX(2.2) rotate(5deg); }
}

/* Responsive adjustments for landing animations */
@media (max-width: 768px) {
    .landing-candle-flame,
    .landing-tea-steam {
        display: none;
    }
}


/* ─── Book Responsive ─── */

/* Mobile (375px–767px) */
@media (max-width: 768px) {
    .book-closed {
        width: min(400px, 92vw);
        height: min(550px, 78vh);
    }

    .book-cover {
        padding: 30px 20px;
    }

    .book-cover-frame {
        inset: 10px;
    }

    /* Phase 7: Thin visible spine at binding edge on mobile */
    .book-spine-3d {
        display: block;
        --book-spine-3d-width: 6px;
        left: 0;
        transform: translateX(-100%); /* Sits just left of the viewport edge */
        z-index: 15;
    }

    /* Phase 7: Reduce page-stack shadows from 7 to 4 layers */
    .book-page:not(.book-page--turned):not(.book-page--turning) > .book-page-front {
        box-shadow:
            inset -2px 0 0 #d4cfc8,
            inset -3px 0 0 #eae5de,
            inset -4px 0 0 #f5f0e6,
            inset -5px 0 0 #d4cfc8;
    }

    .book-page.book-page--turned:not(.book-page--turning) > .book-page-back {
        box-shadow:
            inset 2px 0 0 #d4cfc8,
            inset 3px 0 0 #eae5de,
            inset 4px 0 0 #f5f0e6;
    }

    /* Phase 7: Enhanced gutter shadow for V-angle depth illusion on mobile */
    .book-viewport::after {
        background: linear-gradient(to right,
            rgba(0, 0, 0, 0.18) 0%,
            rgba(0, 0, 0, 0.12) 1.5%,
            rgba(255, 255, 255, 0.03) 2%,
            rgba(0, 0, 0, 0.06) 4%,
            transparent 12%,
            transparent 100%);
    }

    /* Binding depth shadow on mobile */
    .book-viewport {
        box-shadow: inset 4px 0 10px -3px rgba(0, 0, 0, 0.10);
    }

    /* Phase 7: Ribbons — shrink, hide labels */
    .book-nav-ribbons {
        --ribbon-width: 16px;
        --ribbon-protrude: clamp(24px, 4vh, 36px);
        --ribbon-protrude-active: clamp(32px, 5vh, 45px);
        --ribbon-protrude-hover: clamp(28px, 4.5vh, 40px);
        --ribbon-gap: 3px;
    }

    .book-ribbon-label {
        display: none;
    }

    /* Phase 7: Cover thickness — 2px instead of 4px */
    .book-cover::before {
        width: 2px;
        right: -2px;
    }

    .book-closed::after {
        height: 2px;
        bottom: -2px;
    }

    .book-first-page::before {
        width: 3px;
    }

    /* Phase 7: Arrows inside bottom corners */
    .book-nav-arrow--prev { left: 4px; }
    .book-nav-arrow--next { right: 4px; }
    .book-nav-arrow { bottom: 8px; }
}

/* Small phones (480px) */
@media (max-width: 480px) {
    .book-closed {
        width: min(340px, 94vw);
        height: min(480px, 76vh);
    }

    .book-cover {
        padding: 24px 16px;
    }

    .book-cover-frame {
        inset: 8px;
    }

    .book-nav-arrow {
        bottom: 6px;
    }

    .book-nav-arrow--prev { left: 4px; }
    .book-nav-arrow--next { right: 4px; }

    .book-nav-indicator {
        bottom: 6px;
    }

    /* Ribbons: even smaller on tiny phones */
    .book-nav-ribbons {
        --ribbon-width: 14px;
        --ribbon-gap: 2px;
        --ribbon-tail-height: 6px;
        --ribbon-fold-height: 5px;
    }
}

/* Tablet (768px–1439px) */
@media (min-width: 769px) and (max-width: 1199px) {
    /* Show spine at binding edge */
    .book-spine-3d {
        --book-spine-3d-width: clamp(8px, 1vw, 16px);
        left: 0;
        transform: translateX(-100%); /* Sits just left of the viewport */
    }

    /* Ribbons: visible but narrower, labels on hover only (default behavior) */
    .book-nav-ribbons {
        --ribbon-width: clamp(18px, 2.5vw, 30px);
    }

    /* Cover with 3px thickness */
    .book-cover::before {
        width: 3px;
        right: -3px;
    }

    .book-closed::after {
        height: 3px;
        bottom: -3px;
    }

    /* Enhanced gutter shadow for V-angle depth illusion on tablet */
    .book-viewport::after {
        background: linear-gradient(to right,
            rgba(0, 0, 0, 0.14) 0%,
            rgba(0, 0, 0, 0.08) 2%,
            rgba(0, 0, 0, 0.03) 5%,
            transparent 10%,
            transparent 100%);
    }

    /* Binding depth shadow on tablet */
    .book-viewport {
        box-shadow: inset 4px 0 10px -3px rgba(0, 0, 0, 0.10);
    }
}

/* Desktop (1440px+) */
@media (min-width: 1200px) {
    /* Full spine, full ribbons, full cover depth */
    .book-spine-3d {
        --book-spine-3d-width: clamp(18px, 2.2vw, 36px);
    }
}

/* Ultra-Wide (2560px+) */
@media (min-width: 2560px) {
    .book-spine-3d {
        --book-spine-3d-width: clamp(20px, 2vw, 36px);
    }

    .book-nav-ribbons {
        --ribbon-width: clamp(30px, 3.5vw, 48px);
        --ribbon-protrude: clamp(45px, 6vh, 70px);
        --ribbon-protrude-active: clamp(60px, 8vh, 90px);
    }
}

/* ═══════════════════════════════════════════════════════════════
   VIEWPORT-SCALED KEYFRAME BREAKPOINTS
   Shadow/mote/edge values can't reliably use var() across browsers,
   so we redefine them at 1440px, 1920px, and 2560px with scaled values.
   translateZ removed from fold keyframes — pure rotateY provides depth.
   ═══════════════════════════════════════════════════════════════ */

/* ─── 1440px+ (Laptop / Small Desktop) — 1.5x depth ─── */
@media (min-width: 1200px) {

    /* pageFoldForward / pageFoldBackward: removed — base keyframes in book-system.css
       are correct at all viewport sizes. These overrides previously reintroduced
       rotateX/skewY (spine detachment), wrong translateZ order (local-space Z drift),
       backward tilt at 3% (far-edge clips behind stack), and 4deg overshoot at 92%
       (clips through turned pages). See B7 fix notes in book-system.css. */

    @keyframes underPageShadow {
        0%   { box-shadow: inset 0 0 0 0 rgba(0,0,0,0); }
        10%  { box-shadow: inset 75px 60px 75px -30px rgba(0,0,0,0.06); }
        25%  { box-shadow: inset 180px 75px 150px -38px rgba(0,0,0,0.14); }
        40%  { box-shadow: inset 270px 45px 195px -53px rgba(0,0,0,0.2); }
        55%  { box-shadow: inset 315px 23px 210px -60px rgba(0,0,0,0.18); }
        72%  { box-shadow: inset 195px 12px 135px -45px rgba(0,0,0,0.1); }
        90%  { box-shadow: inset 53px 0 53px -15px rgba(0,0,0,0.03); }
        100% { box-shadow: inset 0 0 0 0 rgba(0,0,0,0); }
    }

    /* turnDropShadow removed — see base keyframes comment */
    /*
    @keyframes turnDropShadow {
        0%   { filter: drop-shadow(0 0 0 rgba(0,0,0,0)) brightness(1); }
        20%  { filter: drop-shadow(-18px 9px 27px rgba(0,0,0,0.2)) brightness(1); }
        42%  { filter: drop-shadow(-27px 15px 42px rgba(0,0,0,0.28)) brightness(1.02); }
        45%  { filter: drop-shadow(-27px 15px 42px rgba(0,0,0,0.28)) brightness(1.03); }
        52%  { filter: drop-shadow(-24px 13px 36px rgba(0,0,0,0.24)) brightness(1); }
        65%  { filter: drop-shadow(-21px 11px 30px rgba(0,0,0,0.18)) brightness(1); }
        85%  { filter: drop-shadow(-6px 3px 12px rgba(0,0,0,0.06)) brightness(1); }
        100% { filter: drop-shadow(0 0 0 rgba(0,0,0,0)) brightness(1); }
    }
    */

    @keyframes moteDrift {
        0%   { opacity: 0; transform: translateY(0) translateX(0) scale(0.3); }
        10%  { opacity: 0.8; transform: translateY(-15px) translateX(3px) scale(1); }
        30%  { opacity: 0.9; transform: translateY(-60px) translateX(-8px) scale(1.1); }
        60%  { opacity: 0.6; transform: translateY(-120px) translateX(12px) scale(0.9); }
        100% { opacity: 0; transform: translateY(-210px) translateX(-5px) scale(0.4); }
    }

    @keyframes pageEdgeShow {
        0%   { opacity: 0; width: 3px; }
        15%  { opacity: 0.6; width: 5px; }
        40%  { opacity: 1; width: 6px; }
        60%  { opacity: 1; width: 6px; }
        85%  { opacity: 0.4; width: 5px; }
        100% { opacity: 0; width: 3px; }
    }
}

/* ─── 1920px+ (Full HD Desktop) — 2x depth ─── */
@media (min-width: 1920px) {

    /* pageFoldForward / pageFoldBackward: removed — see 1440px comment above. */

    @keyframes underPageShadow {
        0%   { box-shadow: inset 0 0 0 0 rgba(0,0,0,0); }
        10%  { box-shadow: inset 100px 80px 100px -40px rgba(0,0,0,0.06); }
        25%  { box-shadow: inset 240px 100px 200px -50px rgba(0,0,0,0.14); }
        40%  { box-shadow: inset 360px 60px 260px -70px rgba(0,0,0,0.2); }
        55%  { box-shadow: inset 420px 30px 280px -80px rgba(0,0,0,0.18); }
        72%  { box-shadow: inset 260px 16px 180px -60px rgba(0,0,0,0.1); }
        90%  { box-shadow: inset 70px 0 70px -20px rgba(0,0,0,0.03); }
        100% { box-shadow: inset 0 0 0 0 rgba(0,0,0,0); }
    }

    /* turnDropShadow removed — see base keyframes comment */
    /*
    @keyframes turnDropShadow {
        0%   { filter: drop-shadow(0 0 0 rgba(0,0,0,0)) brightness(1); }
        20%  { filter: drop-shadow(-24px 12px 36px rgba(0,0,0,0.2)) brightness(1); }
        42%  { filter: drop-shadow(-36px 20px 56px rgba(0,0,0,0.28)) brightness(1.02); }
        45%  { filter: drop-shadow(-36px 20px 56px rgba(0,0,0,0.28)) brightness(1.03); }
        52%  { filter: drop-shadow(-30px 16px 46px rgba(0,0,0,0.24)) brightness(1); }
        65%  { filter: drop-shadow(-28px 14px 40px rgba(0,0,0,0.18)) brightness(1); }
        85%  { filter: drop-shadow(-8px 4px 16px rgba(0,0,0,0.06)) brightness(1); }
        100% { filter: drop-shadow(0 0 0 rgba(0,0,0,0)) brightness(1); }
    }
    */

    @keyframes moteDrift {
        0%   { opacity: 0; transform: translateY(0) translateX(0) scale(0.3); }
        10%  { opacity: 0.8; transform: translateY(-20px) translateX(4px) scale(1); }
        30%  { opacity: 0.9; transform: translateY(-80px) translateX(-10px) scale(1.1); }
        60%  { opacity: 0.6; transform: translateY(-160px) translateX(16px) scale(0.9); }
        100% { opacity: 0; transform: translateY(-280px) translateX(-6px) scale(0.4); }
    }

    @keyframes pageEdgeShow {
        0%   { opacity: 0; width: 4px; }
        15%  { opacity: 0.6; width: 6px; }
        40%  { opacity: 1; width: 8px; }
        60%  { opacity: 1; width: 8px; }
        85%  { opacity: 0.4; width: 6px; }
        100% { opacity: 0; width: 4px; }
    }
}

/* ─── 2560px+ (2K / Ultra-Wide) — 2.5x depth ─── */
@media (min-width: 2560px) {

    /* pageFoldForward / pageFoldBackward: removed — see 1440px comment above. */

    @keyframes underPageShadow {
        0%   { box-shadow: inset 0 0 0 0 rgba(0,0,0,0); }
        10%  { box-shadow: inset 125px 100px 125px -50px rgba(0,0,0,0.06); }
        25%  { box-shadow: inset 300px 125px 250px -63px rgba(0,0,0,0.14); }
        40%  { box-shadow: inset 450px 75px 325px -88px rgba(0,0,0,0.2); }
        55%  { box-shadow: inset 525px 38px 350px -100px rgba(0,0,0,0.18); }
        72%  { box-shadow: inset 325px 20px 225px -75px rgba(0,0,0,0.1); }
        90%  { box-shadow: inset 88px 0 88px -25px rgba(0,0,0,0.03); }
        100% { box-shadow: inset 0 0 0 0 rgba(0,0,0,0); }
    }

    /* turnDropShadow removed — see base keyframes comment */
    /*
    @keyframes turnDropShadow {
        0%   { filter: drop-shadow(0 0 0 rgba(0,0,0,0)) brightness(1); }
        20%  { filter: drop-shadow(-30px 15px 45px rgba(0,0,0,0.2)) brightness(1); }
        42%  { filter: drop-shadow(-45px 25px 70px rgba(0,0,0,0.28)) brightness(1.02); }
        45%  { filter: drop-shadow(-45px 25px 70px rgba(0,0,0,0.28)) brightness(1.03); }
        52%  { filter: drop-shadow(-38px 20px 58px rgba(0,0,0,0.24)) brightness(1); }
        65%  { filter: drop-shadow(-35px 18px 50px rgba(0,0,0,0.18)) brightness(1); }
        85%  { filter: drop-shadow(-10px 5px 20px rgba(0,0,0,0.06)) brightness(1); }
        100% { filter: drop-shadow(0 0 0 rgba(0,0,0,0)) brightness(1); }
    }
    */

    @keyframes moteDrift {
        0%   { opacity: 0; transform: translateY(0) translateX(0) scale(0.3); }
        10%  { opacity: 0.8; transform: translateY(-25px) translateX(5px) scale(1); }
        30%  { opacity: 0.9; transform: translateY(-100px) translateX(-13px) scale(1.1); }
        60%  { opacity: 0.6; transform: translateY(-200px) translateX(20px) scale(0.9); }
        100% { opacity: 0; transform: translateY(-350px) translateX(-8px) scale(0.4); }
    }

    @keyframes pageEdgeShow {
        0%   { opacity: 0; width: 5px; }
        15%  { opacity: 0.6; width: 8px; }
        40%  { opacity: 1; width: 10px; }
        60%  { opacity: 1; width: 10px; }
        85%  { opacity: 0.4; width: 8px; }
        100% { opacity: 0; width: 5px; }
    }
}

/* ─── Reduced Motion ─── */
@media (prefers-reduced-motion: reduce) {
    .book-cover-welcome {
        animation-duration: 0.01ms !important;
    }
}