/* ============================================================
   BOOK READER - Illuminated Manuscript Theme
   Dragon's Eggs and Spirit Stones by Deborah Burks
   ============================================================ */

:root {
    --parchment-base: #2a2218;
    --parchment-warm: #332a1e;
    --parchment-edge: #1e1812;
    --parchment-stain: rgba(139, 69, 19, 0.06);
    --book-spine-width: 16px;
    --book-page-radius: 3px;
    --book-border-gold: rgba(201, 168, 76, 0.25);
    --candle-glow: rgba(212, 136, 58, 0.035);
    --candle-warm: rgba(201, 168, 76, 0.025);
    --firelight-flicker: rgba(196, 98, 42, 0.02);
}

@media (prefers-color-scheme: light) {
    :root {
        --parchment-base: #f5efe4;
        --parchment-warm: #ede4d4;
        --parchment-edge: #ddd4c4;
        --parchment-stain: rgba(139, 69, 19, 0.04);
        --candle-glow: rgba(212, 136, 58, 0.05);
        --candle-warm: rgba(201, 168, 76, 0.04);
        --firelight-flicker: rgba(196, 98, 42, 0.03);
    }
}

/* ---- Background atmosphere ---- */

body.book-view {
    background:
        radial-gradient(ellipse 100% 80% at 50% 50%, var(--bg-deep), #0a0806);
    background-attachment: fixed;
    overflow: hidden;
    height: 100vh;
}

body.book-view.scroll-mode {
    overflow: auto;
    height: auto;
}

body.book-view::after {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -2;
    pointer-events: none;
    background:
        radial-gradient(circle 2px at 15% 25%, rgba(201, 168, 76, 0.12), transparent 3px),
        radial-gradient(circle 1.5px at 55% 65%, rgba(212, 136, 58, 0.08), transparent 2px),
        radial-gradient(circle 1px at 78% 18%, rgba(201, 168, 76, 0.1), transparent 2px),
        radial-gradient(circle 1.5px at 32% 82%, rgba(232, 200, 150, 0.07), transparent 2px),
        radial-gradient(circle 1px at 88% 55%, rgba(201, 168, 76, 0.06), transparent 2px);
    animation: ambient-drift 25s ease-in-out infinite alternate;
}

@keyframes ambient-drift {
    0% { transform: translateY(0) translateX(0); }
    33% { transform: translateY(-4px) translateX(3px); }
    66% { transform: translateY(2px) translateX(-3px); }
    100% { transform: translateY(-2px) translateX(2px); }
}

/* ---- Book spread container ---- */

.book-spread {
    position: relative;
    max-width: 1200px;
    margin: 1.5rem auto 2rem;
    padding: 0 1rem;
}

/* ---- Book page (the parchment surface) ---- */

.book-page {
    position: relative;
    border-radius: var(--book-page-radius);
    background:
        radial-gradient(ellipse 35% 25% at 20% 15%, var(--parchment-stain), transparent),
        radial-gradient(ellipse 25% 30% at 75% 80%, var(--parchment-stain), transparent),
        radial-gradient(ellipse 20% 20% at 85% 30%, rgba(201, 168, 76, 0.02), transparent),
        repeating-linear-gradient(0deg,
            transparent,
            transparent 3px,
            rgba(0, 0, 0, 0.006) 3px,
            rgba(0, 0, 0, 0.006) 5px),
        linear-gradient(168deg, var(--parchment-warm) 0%, var(--parchment-base) 45%, var(--parchment-edge) 100%);
    box-shadow:
        inset 0 0 40px rgba(0, 0, 0, 0.12),
        inset 3px 0 12px rgba(0, 0, 0, 0.08),
        0 2px 4px rgba(0, 0, 0, 0.25),
        0 8px 20px rgba(0, 0, 0, 0.18),
        0 20px 40px rgba(0, 0, 0, 0.12);
    border: 1px solid rgba(201, 168, 76, 0.15);
    height: calc(100vh - 100px);
    overflow: hidden;
}

body.book-view.scroll-mode .book-page {
    height: auto;
    overflow: visible;
}

/* Paper grain texture overlay */
.book-page::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    opacity: 0.25;
    mix-blend-mode: overlay;
    pointer-events: none;
    z-index: 1;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Page edges (stacked paper effect on right) */
.book-page::after {
    content: '';
    position: absolute;
    top: 6px;
    right: -5px;
    bottom: 6px;
    width: 5px;
    background: repeating-linear-gradient(to bottom,
        var(--parchment-edge) 0px,
        var(--parchment-base) 1px,
        var(--parchment-edge) 2px);
    border-radius: 0 2px 2px 0;
    box-shadow: 2px 0 4px rgba(0, 0, 0, 0.2);
    opacity: 0.7;
}

/* ---- Chapter content wrapper ---- */

.book-view .chapter-content {
    position: relative;
    padding: 3rem 2.5rem 2rem;
    margin: 0;
    max-width: none;
    z-index: 2;
}

/* ---- Ambient firelight ---- */

.book-view .book-page > .chapter-content {
    background:
        radial-gradient(ellipse 50% 40% at 25% 20%, var(--candle-glow), transparent),
        radial-gradient(ellipse 40% 50% at 75% 75%, var(--candle-warm), transparent),
        radial-gradient(ellipse 80% 25% at 50% 100%, var(--firelight-flicker), transparent);
    animation: firelight-breathe 10s ease-in-out infinite alternate;
}

@keyframes firelight-breathe {
    0% { opacity: 0.92; }
    50% { opacity: 1; }
    100% { opacity: 0.95; }
}

/* ---- Chapter heading ---- */

.book-view .chapter-heading {
    position: relative;
    z-index: 2;
    margin-bottom: 2rem;
    padding-bottom: 1.5rem;
}

.book-view .chapter-heading::before {
    content: '';
    display: block;
    width: 120px;
    height: 20px;
    margin: 0 auto 1.2rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 20'%3E%3Cdefs%3E%3ClinearGradient id='fade-l' x1='0' x2='1'%3E%3Cstop offset='0' stop-color='%23c9a84c' stop-opacity='0'/%3E%3Cstop offset='1' stop-color='%23c9a84c' stop-opacity='0.5'/%3E%3C/linearGradient%3E%3ClinearGradient id='fade-r' x1='0' x2='1'%3E%3Cstop offset='0' stop-color='%23c9a84c' stop-opacity='0.5'/%3E%3Cstop offset='1' stop-color='%23c9a84c' stop-opacity='0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cline x1='5' y1='10' x2='45' y2='10' stroke='url(%23fade-l)' stroke-width='0.7'/%3E%3Cline x1='75' y1='10' x2='115' y2='10' stroke='url(%23fade-r)' stroke-width='0.7'/%3E%3Crect x='55' y='5' width='10' height='10' transform='rotate(45 60 10)' fill='none' stroke='%23c9a84c' stroke-width='0.8' opacity='0.6'/%3E%3Crect x='57' y='7' width='6' height='6' transform='rotate(45 60 10)' fill='none' stroke='%23c9a84c' stroke-width='0.5' opacity='0.4'/%3E%3Ccircle cx='60' cy='10' r='1.5' fill='%23c9a84c' opacity='0.5'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0.7;
}

/* ---- Illuminated drop cap ---- */

.book-view .chapter-text p:first-child::first-letter,
.flip-page-content p:first-child::first-letter {
    font-family: 'Cinzel', 'Palatino Linotype', serif;
    font-size: 3.6em;
    float: left;
    line-height: 0.72;
    padding: 0.08em 0.12em 0.04em 0.04em;
    margin-right: 0.06em;
    color: var(--accent-gold);
    text-shadow:
        0 0 12px rgba(201, 168, 76, 0.25),
        0 2px 4px rgba(0, 0, 0, 0.3);
    background: linear-gradient(135deg, rgba(139, 69, 19, 0.12), rgba(201, 168, 76, 0.06));
    border: 1px solid rgba(201, 168, 76, 0.18);
    border-radius: 2px;
}

/* ---- Enhanced scene breaks ---- */

.book-view .scene-break,
.flip-page-content .scene-break {
    border: none;
    text-align: center;
    margin: 2.5rem auto;
    height: 24px;
    max-width: 240px;
    position: relative;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 24'%3E%3Cdefs%3E%3ClinearGradient id='sl' x1='0' x2='1'%3E%3Cstop offset='0' stop-color='%238b4513' stop-opacity='0'/%3E%3Cstop offset='1' stop-color='%238b4513' stop-opacity='0.6'/%3E%3C/linearGradient%3E%3ClinearGradient id='sr' x1='0' x2='1'%3E%3Cstop offset='0' stop-color='%238b4513' stop-opacity='0.6'/%3E%3Cstop offset='1' stop-color='%238b4513' stop-opacity='0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cline x1='10' y1='12' x2='90' y2='12' stroke='url(%23sl)' stroke-width='0.6'/%3E%3Cline x1='150' y1='12' x2='230' y2='12' stroke='url(%23sr)' stroke-width='0.6'/%3E%3Cpath d='M108,12 L120,4 L132,12 L120,20 Z' fill='none' stroke='%23c9a84c' stroke-width='0.8' opacity='0.5'/%3E%3Cpath d='M112,12 L120,7 L128,12 L120,17 Z' fill='none' stroke='%23c9a84c' stroke-width='0.6' opacity='0.4'/%3E%3Ccircle cx='120' cy='12' r='2' fill='%23c9a84c' opacity='0.4'/%3E%3Ccircle cx='95' cy='12' r='1.5' fill='%23c9a84c' opacity='0.3'/%3E%3Ccircle cx='145' cy='12' r='1.5' fill='%23c9a84c' opacity='0.3'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.book-view .scene-break::before,
.book-view .scene-break::after,
.flip-page-content .scene-break::before,
.flip-page-content .scene-break::after {
    content: none;
}

/* ============================================================
   StPageFlip - Flipbook Page Styles
   ============================================================ */

#flipbook-container {
    position: relative;
    z-index: 2;
}

.flip-page {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(ellipse 35% 25% at 20% 15%, var(--parchment-stain), transparent),
        radial-gradient(ellipse 25% 30% at 75% 80%, var(--parchment-stain), transparent),
        linear-gradient(168deg, var(--parchment-warm) 0%, var(--parchment-base) 45%, var(--parchment-edge) 100%);
    padding: 0;
    box-sizing: border-box;
    color: var(--text-primary, #d4c5a9);
}

.flip-page-content {
    pointer-events: none;
}

.flip-page-content p {
    break-inside: avoid-column;
    text-indent: 1.5em;
    margin-bottom: 1em;
}

.flip-page-content p:first-child {
    text-indent: 0;
}

.flip-page-content .scene-break {
    break-before: column;
    break-inside: avoid;
}

/* Gold inner border on each flipbook page */
.flip-page::before {
    content: '';
    position: absolute;
    inset: 8px;
    border: 1px solid var(--book-border-gold);
    border-radius: 2px;
    pointer-events: none;
    z-index: 1;
    background:
        linear-gradient(135deg, rgba(201, 168, 76, 0.1) 0%, transparent 2.5%),
        linear-gradient(225deg, rgba(201, 168, 76, 0.1) 0%, transparent 2.5%),
        linear-gradient(315deg, rgba(201, 168, 76, 0.1) 0%, transparent 2.5%),
        linear-gradient(45deg, rgba(201, 168, 76, 0.1) 0%, transparent 2.5%);
}

/* Page number */
.flip-page-number {
    position: absolute;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    font-family: 'Cinzel', serif;
    font-size: 0.7rem;
    color: var(--text-secondary, #8a7e6b);
    opacity: 0.5;
    letter-spacing: 0.08em;
    z-index: 5;
    pointer-events: none;
}

/* StPageFlip container overrides */
.stf__parent {
    margin: 0 auto;
}

/* Warm-toned shadow overrides */
.stf__outerShadow,
.stf__innerShadow {
    opacity: 0.7;
}

/* ---- Mode toggle button ---- */

#mode-toggle {
    background: none;
    border: 1px solid var(--border);
    color: var(--text-secondary);
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.8rem;
    font-family: 'Cinzel', serif;
    transition: color 0.2s, border-color 0.2s;
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

#mode-toggle:hover {
    color: var(--accent-gold);
    border-color: var(--accent-gold);
}

#mode-toggle svg {
    width: 16px;
    height: 16px;
}

/* ---- Accessibility: live region ---- */

.page-announce {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
}

/* ---- Responsive ---- */

@media (max-width: 1023px) {
    .book-spread {
        max-width: 700px;
        margin: 1rem auto;
        padding: 0 0.5rem;
    }

    .book-page::after {
        width: 3px;
        right: -3px;
    }

    .book-view .chapter-content {
        padding: 2.5rem 1.8rem 1.5rem;
    }

    .flip-page {
        padding: 1.5rem 1.8rem;
    }
}

@media (max-width: 767px) {
    body.book-view {
        overflow: auto;
        height: auto;
    }

    .book-page {
        height: auto;
        overflow: visible;
        border-radius: 0;
        box-shadow:
            inset 0 0 20px rgba(0, 0, 0, 0.08),
            0 2px 8px rgba(0, 0, 0, 0.15);
    }

    .book-page::after {
        display: none;
    }

    .book-view .chapter-content {
        padding: 2rem 1.2rem 1.2rem;
    }

    .book-view .chapter-heading::before {
        width: 80px;
    }

    .book-view .chapter-text p:first-child::first-letter {
        font-size: 2.8em;
    }

    body.book-view::after {
        display: none;
    }

    #flipbook-container {
        display: none !important;
    }
}

/* ---- Reduced motion ---- */

@media (prefers-reduced-motion: reduce) {
    body.book-view::after {
        animation: none;
    }

    .book-view .book-page > .chapter-content {
        animation: none;
        opacity: 1;
    }
}

/* ---- Scroll mode overrides ---- */

body.book-view.scroll-mode .book-page {
    height: auto;
    overflow: visible;
}

body.book-view.scroll-mode .book-page::after {
    display: none;
}

body.book-view.scroll-mode #flipbook-container {
    display: none !important;
}

body.book-view.scroll-mode .chapter-text {
    display: block !important;
}

body.book-view.scroll-mode .chapter-heading {
    display: block !important;
}

body.book-view.scroll-mode {
    overflow: auto;
    height: auto;
}

/* ---- Prose pages (dedication, about) ---- */

body.book-view:has(.prose-page) {
    overflow-y: auto;
    height: auto;
}

body.book-view:has(.prose-page) .book-page {
    height: auto;
    overflow: visible;
    min-height: calc(100vh - 100px);
}

body.book-view .prose-page {
    position: relative;
    z-index: 2;
    padding: 3rem 2.5rem 2rem;
}

body.book-view .prose-page h1 {
    position: relative;
    z-index: 2;
}

body.book-view .prose-page p {
    position: relative;
    z-index: 2;
}

body.book-view .prose-page .prose-nav {
    position: relative;
    z-index: 2;
}

body.book-view .prose-page .scene-break {
    position: relative;
    z-index: 2;
}