/* css/demo.css - the "watch a book being made" demonstration stage.
 *
 * The rest of the site is bright daytime pastel; this page deliberately dims
 * the lights: a bedtime-story theater in deep violet-plum with warm
 * lamp-cream text and gold accents. The book reader below is a direct port
 * of the shared-book viewer (shared.html) so the demo turns pages exactly
 * the way a shared gift does. If the fold machinery changes there, mirror
 * it here (candidates for extraction into one module someday).
 */

:root {
    --stage-deep: #221c3a;
    --stage-mid: #2e2452;
    --stage-night: #1e2749;
    --lamp-cream: #fff7e8;
    --lamp-dim: #d9d2ea;
    --star-gold: #fde68a;
    --star-amber: #fbd38d;
    --spark-violet: #c4b5fd;
    --wing-pink: #fbcfe8;
    --meadow-green: #34d399;
    --frame-white: #fffdf8;
    --shadow-deep: rgba(10, 8, 24, 0.55);
    --paper: #FDFBF5;
}

* {
    box-sizing: border-box;
}

/* An author display rule (flex/grid) would otherwise defeat the hidden
   attribute, which is how the acts are switched. */
[hidden] {
    display: none !important;
}

html,
body {
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    max-width: 100vw;
}

body {
    font-family: 'Nunito', sans-serif;
    background:
        radial-gradient(120% 90% at 50% 0%, var(--stage-mid) 0%, var(--stage-deep) 55%, var(--stage-night) 100%);
    background-attachment: fixed;
    color: var(--lamp-cream);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    font-size: 1.125rem;
    line-height: 1.6;
}

h1,
h2 {
    font-family: 'Lora', serif;
    text-wrap: balance;
    margin: 0;
}

p {
    text-wrap: pretty;
}

.magic-word {
    font-family: 'Pacifico', cursive;
    font-weight: 400;
    color: var(--star-gold);
    padding: 0 0.08em;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.skip-link {
    position: absolute;
    left: -999px;
    top: 0.75rem;
    z-index: 50;
    background: var(--star-gold);
    color: var(--stage-deep);
    padding: 0.6rem 1.2rem;
    border-radius: 999px;
    font-weight: 700;
    text-decoration: none;
}

.skip-link:focus {
    left: 0.75rem;
}

/* ---------- header / footer ---------- */

.demo-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.1rem 1.5rem;
}

.demo-header__brand {
    font-family: 'Pacifico', cursive;
    font-size: 1.45rem;
    color: var(--lamp-cream);
    text-decoration: none;
    text-shadow: 0 2px 12px rgba(196, 181, 253, 0.35);
}

.demo-header__brand:hover {
    color: var(--star-gold);
}

.demo-footer {
    padding: 2rem 1.5rem 2.5rem;
    text-align: center;
    font-family: 'Inter', sans-serif;
    font-size: 0.85rem;
    color: var(--lamp-dim);
}

.demo-footer nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.4rem;
    margin-bottom: 0.8rem;
}

.demo-footer a {
    color: var(--lamp-dim);
    text-decoration: none;
}

.demo-footer a:hover {
    color: var(--star-gold);
    text-decoration: underline;
}

/* ---------- the stage ---------- */

.stage {
    flex: 1;
    width: 100%;
    max-width: 1080px;
    margin: 0 auto;
    padding: 0.5rem 1.25rem 3rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}

.act-chips {
    display: flex;
    gap: 0.4rem;
    list-style: none;
    padding: 0;
    margin: 0 0 1.6rem;
    flex-wrap: wrap;
    justify-content: center;
}

.act-chip {
    font-family: 'Inter', sans-serif;
    font-size: 0.78rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 0.35rem 0.85rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 247, 232, 0.18);
    color: rgba(217, 210, 234, 0.55);
    background: transparent;
    transition: all 0.35s ease;
    cursor: default;
}

.act-chip.is-current {
    border-color: var(--star-gold);
    color: var(--star-gold);
    background: rgba(253, 230, 138, 0.1);
}

.act-chip.is-done {
    color: var(--meadow-green);
    border-color: rgba(52, 211, 153, 0.4);
    cursor: pointer;
}

.act-chip.is-done::before {
    content: '\2713\00a0';
}

.act-chip.is-done:hover {
    color: var(--star-gold);
    border-color: var(--star-gold);
}

.act-chip:focus-visible {
    outline: 3px solid var(--spark-violet);
    outline-offset: 2px;
}

.back-link {
    position: absolute;
    left: 1.25rem;
    top: 3.4rem;
    background: none;
    border: none;
    font-family: 'Inter', sans-serif;
    font-size: 0.9rem;
    color: var(--lamp-dim);
    cursor: pointer;
    padding: 0.3rem 0.5rem;
}

.back-link:hover {
    color: var(--star-gold);
}

.back-link:focus-visible {
    outline: 3px solid var(--spark-violet);
    outline-offset: 2px;
}

/* acts enter with a gentle rise-and-settle */

.act {
    display: none;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 100%;
}

.act.is-active {
    display: flex;
    animation: act-enter 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes act-enter {
    from {
        opacity: 0;
        transform: translateY(18px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.act-title {
    font-size: clamp(1.7rem, 3.5vw, 2.4rem);
    font-weight: 600;
    margin-bottom: 1rem;
    /* Even out wrapped title lines on phones ("Watch a book / being made"
       instead of "Watch a / book being made"); no-op where unsupported */
    text-wrap: balance;
}

.act-lead {
    font-size: clamp(1.05rem, 2vw, 1.25rem);
    color: var(--lamp-dim);
    max-width: 38rem;
    margin: 0.2rem auto 1.6rem;
    /* Avoid a lone word stranded on the last line */
    text-wrap: pretty;
}

/* ---------- buttons ---------- */

.stage-button {
    display: inline-block;
    font-family: 'Nunito', sans-serif;
    font-size: 1.2rem;
    font-weight: 800;
    color: #3b2f14;
    background: linear-gradient(135deg, var(--star-gold) 0%, var(--star-amber) 60%, var(--wing-pink) 130%);
    border: none;
    border-radius: 999px;
    padding: 1rem 2.4rem;
    cursor: pointer;
    text-decoration: none;
    box-shadow: 0 8px 26px rgba(253, 230, 138, 0.28), 0 2px 6px var(--shadow-deep);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.stage-button:hover {
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 12px 32px rgba(253, 230, 138, 0.4), 0 3px 8px var(--shadow-deep);
}

.stage-button:active {
    transform: translateY(0) scale(0.99);
}

.stage-button--ghost {
    background: transparent;
    color: var(--lamp-cream);
    border: 2px solid rgba(255, 247, 232, 0.4);
    box-shadow: none;
    font-weight: 700;
    margin-top: 0.9rem;
}

.stage-button--ghost:hover {
    border-color: var(--star-gold);
    color: var(--star-gold);
    box-shadow: none;
}

.stage-button:focus-visible,
.quiet-link:focus-visible,
.nav-btn:focus-visible,
.demo-footer a:focus-visible,
.demo-header__brand:focus-visible,
.package-card:focus-visible {
    outline: 3px solid var(--spark-violet);
    outline-offset: 3px;
}

.quiet-note {
    font-family: 'Inter', sans-serif;
    font-size: 0.9rem;
    color: rgba(217, 210, 234, 0.75);
    margin-top: 1rem;
    text-wrap: pretty;
}

.quiet-link {
    background: none;
    border: none;
    font-family: 'Inter', sans-serif;
    font-size: 0.9rem;
    color: var(--lamp-dim);
    text-decoration: underline;
    cursor: pointer;
    margin-top: 1.2rem;
    display: inline-block;
}

.quiet-link:hover {
    color: var(--star-gold);
}

/* ---------- act 1: curtain ---------- */

.act--curtain {
    padding-top: clamp(2rem, 9vh, 6rem);
}

.curtain-title {
    font-size: clamp(2.3rem, 5.5vw, 3.8rem);
    font-weight: 600;
    margin-bottom: 1.2rem;
    text-wrap: balance;
}

.curtain-title .magic-word {
    display: inline-block;
    font-size: 0.95em;
}

/* The gold script span is an unbreakable inline-block, so on phones the
   title would rag as "Watch a / book being made". Keeping the plain half
   whole makes it break cleanly: "Watch a book / being made". */
.keep-together {
    white-space: nowrap;
}

.curtain-lead {
    font-size: clamp(1.1rem, 2.2vw, 1.35rem);
    color: var(--lamp-dim);
    max-width: 36rem;
    margin: 0 auto 2.2rem;
    text-wrap: pretty;
}

/* ---------- act 2: photo ---------- */

.polaroid-row {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 0;
    margin: 0.4rem auto 1.6rem;
}

.polaroid {
    background: var(--frame-white);
    padding: 0.9rem 0.9rem 1.1rem;
    border-radius: 6px;
    box-shadow: 0 18px 44px var(--shadow-deep);
    transform: rotate(-2.5deg);
    max-width: min(280px, 60vw);
}

.polaroid--second {
    transform: rotate(3deg) translateY(14px);
    margin-left: -1.2rem;
    max-width: min(225px, 44vw);
    z-index: -1;
}

.polaroid img {
    display: block;
    width: 100%;
    max-height: 38vh;
    object-fit: cover;
    border-radius: 3px;
}

.polaroid__caption {
    font-family: 'Pacifico', cursive;
    color: #6b5d7a;
    font-size: 1.05rem;
    margin-top: 0.7rem;
}

/* ---------- act 3: cover reveal ---------- */

.cover-theater {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.cover-conjuring {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 1.5rem;
}

.conjure-photo {
    width: min(200px, 52vw);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 14px 36px var(--shadow-deep);
    animation: conjure-float 2.6s ease-in-out infinite alternate;
}

.conjure-photo img {
    display: block;
    width: 100%;
}

@keyframes conjure-float {
    from {
        transform: translateY(0) rotate(-1.5deg);
    }
    to {
        transform: translateY(-10px) rotate(1.5deg);
    }
}

.magic-thread {
    display: flex;
    gap: 0.65rem;
    margin: 1.6rem 0 1.2rem;
    justify-content: center;
}

.thread-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--star-gold);
    box-shadow: 0 0 12px 3px rgba(253, 230, 138, 0.55);
    animation: thread-twinkle 1.4s ease-in-out infinite;
}

.thread-dot:nth-child(2) { animation-delay: 0.18s; }
.thread-dot:nth-child(3) { animation-delay: 0.36s; }
.thread-dot:nth-child(4) { animation-delay: 0.54s; }
.thread-dot:nth-child(5) { animation-delay: 0.72s; }

@keyframes thread-twinkle {
    0%, 100% {
        transform: scale(0.7);
        opacity: 0.45;
    }
    50% {
        transform: scale(1.25);
        opacity: 1;
    }
}

.conjure-status {
    font-size: 1.15rem;
    color: var(--lamp-cream);
    min-height: 1.8em;
    margin: 0;
}

.cover-reveal {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.cover-reveal img {
    width: min(320px, 74vw);
    max-height: 52vh;
    object-fit: contain;
    border-radius: 10px;
    box-shadow:
        0 0 0 6px rgba(255, 253, 248, 0.06),
        0 0 60px 8px rgba(253, 230, 138, 0.22),
        0 24px 60px var(--shadow-deep);
    animation: cover-bloom 1.1s cubic-bezier(0.22, 1, 0.36, 1);
    margin-bottom: 1.4rem;
}

@keyframes cover-bloom {
    from {
        opacity: 0;
        transform: scale(0.88);
        filter: brightness(1.6) saturate(0.6);
    }
    to {
        opacity: 1;
        transform: scale(1);
        filter: brightness(1) saturate(1);
    }
}

/* ---------- acts 4 and 6: the book reader ----------
   Ported from shared.html (the shared-book viewer) so the demo turns pages
   exactly the way a shared gift does: a temporary overlay leaf folds across
   the spine in 3D while the real spread updates underneath. */

.reader {
    width: 100%;
    max-width: 880px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.spread-wrap {
    flex: 1;
    position: relative;
}

.nav-btn {
    flex: 0 0 auto;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    background: rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.85);
    font-size: 24px;
    line-height: 1;
    transition: background 0.15s ease, transform 0.15s ease;
    /* Above the book: the cover and The End glide over an arrow's spot,
       and the arrow must stay clickable */
    position: relative;
    z-index: 45;
}

.nav-btn:hover {
    background: rgba(255, 255, 255, 0.22);
    transform: scale(1.05);
}

.nav-btn:disabled {
    opacity: 0.3;
    cursor: default;
    transform: none;
}

.spread {
    width: 100%;
    display: flex;
    background: var(--paper);
    border-radius: 14px;
    overflow: hidden;
    aspect-ratio: 3 / 2;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
}

/* The cover is a closed book: just the cover art floating on the night,
   no phantom white page beside it. Turning it OPENS the book. The End
   mirrors it: a final left-hand page with the book's edge beyond it. */
.spread.cover-mode,
.spread.end-mode {
    background: transparent;
    box-shadow: none;
    overflow: visible;
}

/* While a fold lifts off an empty half (opening the cover, leaving The
   End), the book's cream backing must not paint the un-landed side as a
   big white page; each visible half carries its own paper until the fold
   completes */
.spread.folding-from-empty {
    background: transparent;
    box-shadow: none;
}

.spread.folding-from-empty .leaf:first-child {
    border-radius: 14px 0 0 14px;
    overflow: hidden;
}

.spread.folding-from-empty .leaf:last-child {
    border-radius: 0 14px 14px 0;
    overflow: hidden;
}

.spread.folding-from-empty .leaf-words {
    background: linear-gradient(to bottom, #FDFBF7, #F7F4EF);
}

.spread.folding-from-empty .leaf-image {
    background: var(--paper);
}

/* The closed book sits centered; opening it glides the book into its open
   position while the cover folds, like a real book on a table. Desktop
   spreads only. */
@media (min-width: 641px) {
    .spread-wrap {
        transition: transform 0.9s cubic-bezier(0.42, 0.05, 0.3, 1);
    }

    .spread-wrap.at-cover {
        transform: translateX(-25%);
    }

    .spread-wrap.at-end {
        transform: translateX(25%);
    }

    @media (prefers-reduced-motion: reduce) {
        .spread-wrap {
            transition: none;
        }
    }
}

.leaf-empty {
    visibility: hidden;
}

.cover-mode .leaf-image {
    border-right: none;
}

.cover-mode .leaf-image img,
.paper-page {
    border-radius: 14px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
}

.paper-page {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 18px;
    background: linear-gradient(to bottom, #FDFBF7, #F7F4EF);
    padding: 8%;
    text-align: center;
}

.paper-page .flourish {
    color: #D4AF37;
    opacity: 0.6;
    font-size: 20px;
}

.end-script {
    font-family: 'Lora', serif;
    font-style: italic;
    font-weight: 600;
    font-size: clamp(30px, 4.5vw, 46px);
    color: #C5A059;
    letter-spacing: 0.04em;
}

.end-byline {
    font-family: 'Lora', serif;
    font-style: italic;
    color: #6B7280;
    font-size: 14.5px;
}

.spread .leaf {
    width: 50%;
    height: 100%;
    position: relative;
}

.leaf-image {
    border-right: 1px solid #e7e2d8;
}

.leaf-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.leaf-words {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5%;
}

.leaf-words .words {
    font-family: 'Lora', serif;
    color: #2D3748;
    font-size: clamp(13px, 1.6vw, 17px);
    line-height: 1.85;
    max-width: 92%;
}

/* Gold drop cap on the first story page, same as the book itself */
.drop-cap::first-letter {
    font-size: 3.2em;
    float: left;
    line-height: 0.8;
    margin-right: 0.12em;
    margin-top: 0.05em;
    color: #C5A059;
    font-family: 'Georgia', serif;
    font-weight: 700;
}

/* The locked page: where the free preview ends and the real site asks */
.locked-title {
    font-family: 'Lora', serif;
    font-size: 21px;
    color: #C5A059;
    letter-spacing: 0.04em;
}

.locked-text {
    font-family: 'Lora', serif;
    font-size: 15.5px;
    line-height: 1.8;
    color: #3E3B36;
    max-width: 40ch;
}

.locked-btn {
    font-family: 'Nunito', sans-serif;
    font-size: 1.02rem;
    font-weight: 800;
    color: #3b2f14;
    background: linear-gradient(135deg, var(--star-gold) 0%, var(--star-amber) 100%);
    border: none;
    border-radius: 999px;
    padding: 0.8rem 1.7rem;
    cursor: pointer;
    box-shadow: 0 6px 18px rgba(197, 160, 89, 0.45);
    transition: transform 0.15s ease;
}

.locked-btn:hover {
    transform: translateY(-2px);
}

.locked-btn:focus-visible {
    outline: 3px solid rgba(197, 160, 89, 0.7);
    outline-offset: 2px;
}

.reader-meta {
    margin-top: 12px;
    text-align: center;
    color: rgba(255, 255, 255, 0.6);
    font-family: 'Lora', serif;
    font-size: 14px;
}

/* Read-aloud pill and Keep going share one row so the act's forward
   button stays above the fold; on narrow phones they wrap and stack. */
.book-actions {
    margin-top: 14px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

#demo-narration-mount {
    display: flex;
    justify-content: center;
}

.dots {
    margin-top: 8px;
    display: flex;
    gap: 7px;
    justify-content: center;
    flex-wrap: wrap;
}

.dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.28);
    border: none;
    padding: 0;
    cursor: pointer;
    transition: transform 0.15s ease, background 0.15s ease;
}

.dot.on {
    background: #fbbf24;
    transform: scale(1.25);
}

.dot:focus-visible {
    outline: 2px solid rgba(251, 191, 36, 0.7);
    outline-offset: 2px;
}

/* ---------- the 3D leaf page turn (shared.html port) ---------- */

.page-turn-overlay {
    position: absolute;
    inset: 0;
    perspective: 2400px;
    pointer-events: none;
    z-index: 40;
}

.page-turn-piece {
    position: absolute;
    margin: 0;
    overflow: hidden;
}

.page-turn-leaf {
    position: absolute;
    transform-style: preserve-3d;
    will-change: transform;
}

.page-turn-leaf.turn-forward {
    animation: leafTurnFwd 0.9s cubic-bezier(0.42, 0.05, 0.3, 1) forwards;
}

.page-turn-leaf.turn-backward {
    animation: leafTurnBwd 0.9s cubic-bezier(0.42, 0.05, 0.3, 1) forwards;
}

@keyframes leafTurnFwd {
    to { transform: rotateY(-180deg); }
}

@keyframes leafTurnBwd {
    to { transform: rotateY(180deg); }
}

.page-turn-face {
    position: absolute;
    inset: 0;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    overflow: hidden;
    background: var(--paper);
}

.page-turn-face--back {
    transform: rotateY(180deg);
}

.page-turn-shade {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0;
    z-index: 6;
}

.turn-forward .page-turn-face--front .page-turn-shade,
.turn-backward .page-turn-face--front .page-turn-shade {
    animation: leafShade 0.9s ease-in-out forwards;
}

.turn-forward .page-turn-face--back .page-turn-shade,
.turn-backward .page-turn-face--back .page-turn-shade {
    animation: leafShadeBack 0.9s ease-in-out forwards;
}

.turn-forward .page-turn-shade {
    background: linear-gradient(to left, rgba(60, 40, 20, 0.30), rgba(60, 40, 20, 0.02) 65%);
}

.turn-backward .page-turn-shade {
    background: linear-gradient(to right, rgba(60, 40, 20, 0.30), rgba(60, 40, 20, 0.02) 65%);
}

@keyframes leafShade {
    0% { opacity: 0; }
    45% { opacity: 1; }
    55% { opacity: 0; }
    100% { opacity: 0; }
}

@keyframes leafShadeBack {
    0% { opacity: 0; }
    45% { opacity: 0; }
    55% { opacity: 1; }
    100% { opacity: 0; }
}

.page-turn-cast {
    position: absolute;
    pointer-events: none;
    opacity: 0;
    z-index: 4;
    animation: leafCast 0.9s ease-in-out forwards;
}

.page-turn-cast--forward {
    background: linear-gradient(to left, rgba(0, 0, 0, 0.22), rgba(0, 0, 0, 0) 70%);
}

.page-turn-cast--backward {
    background: linear-gradient(to right, rgba(0, 0, 0, 0.22), rgba(0, 0, 0, 0) 70%);
}

@keyframes leafCast {
    0% { opacity: 0; }
    40% { opacity: 0.9; }
    75% { opacity: 0.5; }
    100% { opacity: 0; }
}

/* ---------- act 5: the unlock decision ---------- */

.package-cards {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
    width: 100%;
    max-width: 880px;
}

.package-card {
    flex: 1 1 240px;
    max-width: 270px;
    background: rgba(255, 247, 232, 0.06);
    border: 1.5px solid rgba(255, 247, 232, 0.22);
    border-radius: 18px;
    padding: 1.5rem 1.3rem 1.4rem;
    cursor: pointer;
    text-align: center;
    color: var(--lamp-cream);
    font-family: 'Nunito', sans-serif;
    transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}

.package-card:hover {
    transform: translateY(-4px);
    border-color: var(--star-gold);
    background: rgba(253, 230, 138, 0.08);
}

.package-card--featured {
    border-color: rgba(253, 230, 138, 0.65);
    background: rgba(253, 230, 138, 0.07);
}

.package-card__flag {
    display: inline-block;
    font-family: 'Inter', sans-serif;
    font-size: 0.7rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--star-gold);
    border: 1px solid rgba(253, 230, 138, 0.5);
    border-radius: 999px;
    padding: 0.15rem 0.6rem;
    margin-bottom: 0.6rem;
}

.package-card__name {
    font-family: 'Lora', serif;
    font-size: 1.15rem;
    font-weight: 600;
    margin: 0 0 0.35rem;
}

.package-card__price {
    font-size: 1.7rem;
    font-weight: 800;
    color: var(--star-gold);
    margin: 0 0 0.5rem;
}

.package-card__desc {
    font-size: 0.92rem;
    color: var(--lamp-dim);
    line-height: 1.5;
    margin: 0;
}

.package-card__points {
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 0.92rem;
    color: var(--lamp-dim);
    line-height: 1.7;
    text-align: center;
}

.package-card__points li::before {
    content: '\2713\00a0\00a0';
    color: var(--meadow-green);
}

.unlock-theater {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 1.2rem;
}

/* ---------- act 7: do-over ---------- */

.doover-frame {
    position: relative;
    max-width: min(420px, 82vw);
    margin: 0 auto 1.5rem;
}

.doover-frame img {
    display: block;
    width: 100%;
    max-height: 46vh;
    object-fit: cover;
    border-radius: 12px;
    box-shadow:
        0 0 40px 4px rgba(196, 181, 253, 0.2),
        0 20px 50px var(--shadow-deep);
}

.doover-frame img.is-redrawing {
    animation: redraw-shimmer 0.6s ease;
}

@keyframes redraw-shimmer {
    from {
        opacity: 0.15;
        filter: brightness(1.7) saturate(0.4);
    }
    to {
        opacity: 1;
        filter: brightness(1) saturate(1);
    }
}

.doover-label {
    font-family: 'Pacifico', cursive;
    color: var(--spark-violet);
    font-size: 1.15rem;
    margin: 0.8rem 0 0;
    min-height: 1.6em;
}

.stage-button--doover {
    margin-bottom: 0.2rem;
}

.stage-button--doover.is-working {
    pointer-events: none;
    opacity: 0.75;
}

/* ---------- noscript ---------- */

.noscript-panel {
    background: var(--frame-white);
    color: #40384f;
    max-width: 34rem;
    margin: 1.5rem auto;
    padding: 1.4rem 1.8rem;
    border-radius: 12px;
    text-align: center;
    font-size: 1.05rem;
}

/* ---------- responsive ---------- */

/* Shorter laptop screens: shrink the book so the page label, dots, and the
   next step stay in reach without hunting below the fold. */
@media (max-height: 940px) and (min-width: 641px) {
    .reader {
        max-width: 780px;
    }
}

@media (max-height: 860px) and (min-width: 641px) {
    .reader {
        max-width: 640px;
    }

    .act-title {
        margin-bottom: 0.5rem;
    }

    .act-lead {
        margin-bottom: 1rem;
    }

    .act-chips {
        margin-bottom: 1rem;
    }

    .book-actions {
        margin-top: 10px;
    }
}

/* Narrow phones: five chips wrap to three lines at full size, which turns
   the step rail into a paragraph. Shrinking them holds it to two. */
@media (max-width: 430px) {
    .act-chips {
        gap: 0.3rem;
        margin-bottom: 1rem;
    }

    .act-chip {
        font-size: 0.68rem;
        letter-spacing: 0.02em;
        padding: 0.3rem 0.6rem;
    }

    /* Read to me and Keep going have to share one line here. Let them wrap
       and the forward button drops off the bottom of the screen. */
    .book-actions {
        gap: 8px;
    }

    .book-actions .stage-button {
        font-size: 1.02rem;
        padding: 0.8rem 1rem;
    }

    #demo-narration-mount .dm-nar-btn {
        font-size: 0.92rem;
        padding-left: 12px;
        padding-right: 12px;
    }
}

/* Short phones: the reader stacks, so the act runs tall and the button that
   moves the story on falls off the bottom. Tighten the type and cap the
   picture so the whole step stays in one screen. */
@media (max-height: 820px) and (max-width: 640px) {
    .act-title {
        font-size: 1.4rem;
        margin-bottom: 0.4rem;
    }

    .act-lead {
        font-size: 0.98rem;
        margin-bottom: 0.8rem;
    }

    .leaf-image img {
        max-height: 30vh;
    }

    .leaf-words {
        min-height: 96px;
        font-size: 0.95rem;
    }

    .reader-meta {
        margin-top: 6px;
    }

    .book-actions {
        margin-top: 8px;
    }
}

@media (max-width: 760px) {
    body {
        font-size: 1.05rem;
    }

    .stage {
        padding: 0.25rem 1rem 2.5rem;
    }

    .act-chips {
        margin-bottom: 1.2rem;
    }

    .back-link {
        position: static;
        align-self: flex-start;
        margin-bottom: 0.4rem;
    }
}

/* The reader stacks below 641px, exactly like the shared viewer: image on
   top, words below, no 3D turn. */
@media (max-width: 640px) {
    .reader {
        flex-direction: row;
        align-items: center;
    }

    .spread {
        flex-direction: column;
        aspect-ratio: auto;
        width: 100%;
    }

    .spread .leaf {
        width: 100%;
        height: auto;
    }

    .leaf-empty,
    .leaf-blank {
        display: none;
    }

    .leaf-image {
        border-right: none;
        border-bottom: 1px solid #e7e2d8;
    }

    .leaf-image img {
        aspect-ratio: 4 / 3;
        height: auto;
    }

    .leaf-words {
        min-height: 130px;
    }

    .paper-page {
        min-height: 220px;
    }

    .nav-btn {
        width: 46px;
        height: 46px;
    }

    /* Keep the read-aloud pill and Keep going on one line so the forward
       button stays above the fold on phones */
    .book-actions {
        gap: 10px;
    }

    .book-actions .stage-button {
        padding-left: 1.4rem;
        padding-right: 1.4rem;
    }

    #demo-narration-mount .dm-nar-btn {
        padding-left: 16px;
        padding-right: 16px;
    }
}

/* ---------- reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
    .act.is-active,
    .cover-reveal img,
    .doover-frame img.is-redrawing {
        animation: none;
    }

    .conjure-photo,
    .thread-dot {
        animation: none;
    }

    .page-turn-overlay {
        display: none;
    }

    .stage-button,
    .nav-btn,
    .act-chip,
    .dot,
    .package-card {
        transition: none;
    }
}