:root {
    color-scheme: dark;
    --paper: #f0dfba;
    --ink: #24170f;
}

* { box-sizing: border-box; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
html, body { width: 100%; min-height: 100%; margin: 0; }
body { overflow: hidden; background: #080503; font-family: Georgia, "Times New Roman", serif; }
button, a { -webkit-tap-highlight-color: transparent; }

.cottage-scene {
    position: relative;
    width: 100vw;
    height: 100svh;
    overflow: hidden;
    isolation: isolate;
    background: #100a06;
}

.scene-canvas {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

.cottage-background {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    user-select: none;
    pointer-events: none;
    transform: scale(1.015);
    animation: room-breathe 16s ease-in-out infinite alternate;
}

.window-light {
    position: absolute;
    z-index: 1;
    inset: -8%;
    pointer-events: none;
    opacity: .34;
    mix-blend-mode: screen;
    background:
        radial-gradient(ellipse at 18% 31%, rgba(255, 224, 157, .28), transparent 24%),
        linear-gradient(112deg, transparent 7%, rgba(255, 205, 112, .11) 22%, transparent 45%);
    filter: blur(9px);
    transform-origin: 20% 28%;
    animation: window-light-wander 11s ease-in-out infinite alternate;
}

.foliage-shadow {
    position: absolute;
    z-index: 2;
    inset: -10%;
    pointer-events: none;
    opacity: .18;
    mix-blend-mode: multiply;
    background:
        radial-gradient(ellipse at 7% 15%, rgba(23, 17, 9, .72) 0 3%, transparent 4%),
        radial-gradient(ellipse at 12% 22%, rgba(23, 17, 9, .62) 0 4%, transparent 5%),
        radial-gradient(ellipse at 19% 13%, rgba(23, 17, 9, .58) 0 3.5%, transparent 4.5%),
        radial-gradient(ellipse at 26% 21%, rgba(23, 17, 9, .46) 0 4%, transparent 5%),
        linear-gradient(108deg, transparent 4%, rgba(18, 12, 7, .17) 22%, transparent 38%);
    filter: blur(7px);
    transform-origin: 8% 10%;
    animation: foliage-sway 13s ease-in-out infinite alternate;
}

.scene-vignette {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
        radial-gradient(circle at 55% 50%, transparent 35%, rgba(16, 7, 2, .13) 75%, rgba(3, 1, 0, .52) 100%),
        linear-gradient(to bottom, rgba(0,0,0,.08), transparent 45%, rgba(0,0,0,.16));
}

.ambient-dust {
    position: absolute;
    inset: -15%;
    z-index: 2;
    opacity: .28;
    pointer-events: none;
    background-image:
        radial-gradient(circle, rgba(255,238,191,.85) 0 1px, transparent 1.7px),
        radial-gradient(circle, rgba(255,223,156,.55) 0 1.2px, transparent 2px),
        radial-gradient(circle, rgba(255,246,216,.4) 0 .8px, transparent 1.5px);
    background-size: 130px 160px, 190px 210px, 90px 120px;
    background-position: 10px 30px, 70px 20px, 40px 80px;
    filter: blur(.2px);
    animation: dust-float 26s linear infinite;
}


/* Living cottage details */
.candle-life {
    position: absolute;
    z-index: 3;
    left: 15.35%;
    top: 46.2%;
    width: clamp(34px, 3.6vw, 66px);
    aspect-ratio: 1;
    pointer-events: none;
}
.candle-aura {
    position: absolute;
    inset: -145%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,190,75,.23), rgba(255,147,30,.08) 36%, transparent 70%);
    filter: blur(13px);
    mix-blend-mode: screen;
    animation: candle-light-breathe 4.9s ease-in-out infinite;
}
.candle-flame {
    position: absolute;
    left: 42%;
    top: 2%;
    width: 18%;
    height: 43%;
    border-radius: 52% 48% 48% 52% / 72% 72% 28% 28%;
    background: radial-gradient(ellipse at 50% 72%, #fff7bd 0 18%, #ffd366 38%, rgba(255,134,25,.86) 67%, transparent 72%);
    filter: blur(.35px) drop-shadow(0 0 5px rgba(255,201,91,.95));
    transform-origin: 50% 100%;
    mix-blend-mode: screen;
    animation: candle-flicker 2.75s steps(1,end) infinite;
}

.flame-wisp {
    position: absolute;
    left: 47%;
    top: 11%;
    width: 8%;
    height: 20%;
    border-radius: 55% 45% 50% 50% / 75% 72% 28% 25%;
    background: radial-gradient(ellipse at 50% 72%, rgba(255,250,205,.96) 0 16%, rgba(255,203,89,.92) 36%, rgba(255,119,23,.70) 65%, transparent 72%);
    filter: blur(.25px) drop-shadow(0 0 4px rgba(255,189,76,.9));
    transform-origin: 50% 100%;
    mix-blend-mode: screen;
    opacity: 0;
}
.flame-wisp-one { animation: flame-dance-one 3.7s ease-in-out .25s infinite; }
.flame-wisp-two { animation: flame-dance-two 4.6s ease-in-out 1.35s infinite; }
.flame-wisp-three { animation: flame-dance-three 5.2s ease-in-out 2.15s infinite; }

.cup-steam {
    position: absolute;
    z-index: 3;
    left: 65.4%;
    top: 44.4%;
    width: clamp(82px, 10.5vw, 178px);
    height: clamp(125px, 19vh, 220px);
    pointer-events: none;
    overflow: visible;
    filter: blur(.2px);
}
.steam-wisp {
    position: absolute;
    bottom: 0;
    width: 18%;
    height: 78%;
    border-left: 2.5px solid rgba(248,235,211,.52);
    border-radius: 50%;
    opacity: 0;
    filter: blur(1.65px) drop-shadow(0 0 3px rgba(245,229,199,.18));
    transform-origin: 50% 100%;
}
.steam-wisp-one { left: 28%; animation: steam-rise 5.8s ease-in-out infinite; }
.steam-wisp-two { left: 48%; animation: steam-rise 6.6s ease-in-out 1.7s infinite reverse; }
.steam-wisp-three { left: 60%; animation: steam-rise 7.2s ease-in-out 3.4s infinite; }

.spirit-motes {
    position: absolute;
    z-index: 3;
    left: 5%;
    top: 23%;
    width: clamp(100px, 12vw, 190px);
    aspect-ratio: 1;
    opacity: 0;
    pointer-events: none;
    background-image:
      radial-gradient(circle at 18% 62%, rgba(255,242,191,.95) 0 1.4px, transparent 2px),
      radial-gradient(circle at 46% 20%, rgba(255,217,126,.8) 0 1px, transparent 1.8px),
      radial-gradient(circle at 75% 54%, rgba(255,250,223,.9) 0 1.2px, transparent 2px),
      radial-gradient(circle at 62% 82%, rgba(255,191,72,.75) 0 1px, transparent 1.8px),
      radial-gradient(circle at 30% 38%, rgba(255,239,178,.85) 0 1px, transparent 1.8px);
    filter: drop-shadow(0 0 5px rgba(255,190,66,.75));
}
.spirit-motes.is-forming { animation: motes-form 2.8s ease-out forwards; }

.cinematic-bars { position: fixed; inset: 0; z-index: 20; pointer-events: none; }
.cinematic-bar {
    position: absolute;
    left: 0;
    width: 100%;
    height: clamp(48px, 10.5vh, 118px);
    background: rgba(3,1,1,.985);
    box-shadow: 0 0 28px rgba(0,0,0,.72);
    transform: scaleY(0);
    transition: transform 1.18s cubic-bezier(.18,.72,.18,1);
}
.cinematic-bar-top { top: 0; transform-origin: top; }
.cinematic-bar-bottom { bottom: 0; transform-origin: bottom; }
.cinematic-bars.is-active .cinematic-bar { transform: scaleY(1); }

.journal-hotspot.is-anticipating .journal-glow {
    opacity: .95;
    animation: journal-anticipation 1.25s ease-in-out 2;
}

.whisper-spirit {
    position: absolute;
    z-index: 4;
    width: clamp(70px, 8vw, 135px);
    height: auto;
    left: 7%;
    top: 21%;
    opacity: 0;
    pointer-events: none;
    user-select: none;
    filter: drop-shadow(0 0 12px rgba(255,235,176,.82)) drop-shadow(0 0 28px rgba(255,177,53,.5));
    mix-blend-mode: screen;
    will-change: left, top, transform, opacity;
}
.whisper-spirit.is-traveling { animation: spirit-explore 6.35s cubic-bezier(.42,.04,.19,1) forwards; }
.whisper-spirit.is-transforming { animation: spirit-transform 1.6s cubic-bezier(.22,.75,.18,1) forwards; }
.whisper-spirit.is-hovering { left: 43.6%; top: 29%; opacity: 1; transform: scale(1.08); animation: spirit-hover 4.8s ease-in-out infinite; }

.journal-hotspot {
    position: absolute;
    z-index: 5;
    left: 49.3%;
    top: 47.4%;
    width: 28.5%;
    height: 31%;
    transform: rotate(2deg);
    border: 0;
    border-radius: 44% 40% 32% 40%;
    padding: 0;
    background: transparent;
    cursor: default;
}

.journal-glow {
    position: absolute;
    inset: 13% 7% 4%;
    border-radius: 50%;
    opacity: 0;
    background: radial-gradient(ellipse, rgba(255, 226, 153, .48), rgba(255, 173, 55, .10) 46%, transparent 72%);
    filter: blur(18px);
    transition: opacity 1.1s ease, transform 1.1s ease;
}

.journal-hint {
    position: absolute;
    left: 52%;
    bottom: -2.2rem;
    transform: translateX(-50%) rotate(-2deg);
    color: rgba(255,241,210,.88);
    font-size: clamp(.72rem, 1vw, .92rem);
    letter-spacing: .18em;
    text-transform: uppercase;
    text-shadow: 0 2px 8px #000;
    opacity: 0;
    transition: opacity .9s ease;
}

.journal-hotspot.is-ready { cursor: pointer; }
.journal-hotspot.is-ready .journal-glow { opacity: .72; animation: glow-pulse 3.5s ease-in-out infinite; }
.journal-hotspot.is-ready .journal-hint { opacity: .72; }
.journal-hotspot.is-ready:hover .journal-glow,
.journal-hotspot.is-ready:focus-visible .journal-glow { opacity: 1; transform: scale(1.08); }
.journal-hotspot:focus-visible { outline: 1px solid rgba(255,231,174,.65); outline-offset: 5px; }

.quiet-prompt {
    position: absolute;
    z-index: 6;
    left: 50%;
    bottom: 2.5%;
    width: max-content;
    max-width: 90vw;
    transform: translateX(-50%);
    margin: 0;
    color: rgba(255, 241, 211, .78);
    font-size: clamp(.72rem, 1.1vw, .94rem);
    letter-spacing: .16em;
    text-transform: uppercase;
    text-align: center;
    opacity: 0;
    text-shadow: 0 2px 10px #000;
    transition: opacity 1.3s ease;
}
.quiet-prompt.is-visible { opacity: .7; }

.arrival-curtain {
    position: absolute;
    inset: 0;
    z-index: 50;
    pointer-events: none;
    background: #030201;
    animation: curtain-rise 7.4s cubic-bezier(.72,0,.16,1) forwards;
}
body.returning-to-journal .arrival-curtain,
body.returning-to-journal .cinematic-bars { display: none; }

.journal-reader {
    position: fixed;
    inset: 0;
    z-index: 30;
    display: grid;
    place-items: center;
    visibility: hidden;
    opacity: 0;
    transition: opacity 1.25s ease, visibility 0s linear 1.25s;
}
.journal-reader.is-open {
    visibility: visible;
    opacity: 1;
    transition: opacity 1.25s ease;
}
.reader-backdrop {
    position: absolute;
    inset: 0;
    background: transparent;
    backdrop-filter: none;
}
.journal-stage {
    position: relative;
    z-index: 1;
    width: min(94vw, 1180px);
    max-height: 94svh;
    display: grid;
    justify-items: center;
    transform: translateY(5vh) scale(.72) rotate(-2deg);
    opacity: 0;
    transition: transform 1.4s cubic-bezier(.18,.8,.18,1), opacity 1s ease;
}
.journal-reader.is-open .journal-stage {
    transform: translateY(0) scale(1) rotate(0);
    opacity: 1;
}

.page-frame {
    position: relative;
    /* Keep the journal, its controls, and the close button inside short
       landscape viewports (Chromebooks/laptops) as well as wide desktops. */
    width: min(92vw, calc(133.333svh - 9.333rem), 1080px);
    aspect-ratio: 4 / 3;
    filter: none;
    transform-style: preserve-3d;
    perspective: 1300px;
}
.journal-backing {
    position: absolute;
    z-index: 0;
    inset: 7% 10%;
    display: none;
    overflow: hidden;
    border: 1px solid rgba(76, 47, 25, .62);
    border-radius: 4% 5% 5% 4% / 6% 5% 6% 5%;
    background:
        radial-gradient(circle at 48% 44%, rgba(226, 204, 154, .36), transparent 46%),
        repeating-linear-gradient(17deg, rgba(74, 46, 25, .025) 0 1px, transparent 1px 5px),
        linear-gradient(100deg, #80613a 0, #a88958 4%, #b89b68 48%, #a98958 96%, #745431 100%);
    box-shadow: inset 0 0 36px rgba(66, 38, 18, .34), 0 12px 28px rgba(0, 0, 0, .28);
    pointer-events: none;
}
.page-frame.page-late .journal-backing { display: none; }
.page-frame.page-six-living .journal-backing { inset: 7.9% 9.6% 8.7% 6.7%; }
.page-frame.page-seven-living .journal-backing { inset: 7.3% 14.5% 8% 13.7%; }
.page-frame.page-eight-living .journal-backing { inset: 6.7% 15.4% 6.7% 14.9%; }
.page-frame.page-nine-living .journal-backing { inset: 6.9% 10.8% 8.2% 9.6%; }
.journal-page {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 2px;
    user-select: none;
    transition: opacity .28s ease, transform .55s cubic-bezier(.55,.02,.3,1);
}

/* ==========================================================
   Sprint 2 — PAGE 1
   Memory: "I woke up."
   Living Memory: Dust
   ========================================================== */

.page-one-light {
    display: none;
}

.page-one-dust {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    opacity: 0;
    transition: opacity .75s ease;
    z-index: 2;
    border-radius: 2px;
    mix-blend-mode: screen;
}

.page-frame.page-one-living .page-one-dust {
    opacity: 1;
}

.page-frame.page-one-living .journal-page {
    animation: page-one-paper-settle 29s ease-in-out infinite;
}

.page-zone,
.choice-zone {
    z-index: 4;
}

/* ==========================================================
   Sprint 2 — PAGE 2
   Memory: "I found water. Is... it... singing?"
   Living Illustration: the stream ink remembers how it moved.
   ========================================================== */

.page-two-water-glow {
    display: none;
}

.page-two-water,
.page-three-tree,
.page-three-pollen,
.page-four-memory,
.page-five-memory,
.page-six-memory {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    opacity: 0;
    transition: opacity .28s ease;
    z-index: 2;
}

.page-two-water {
    mix-blend-mode: normal;
}

.page-frame.page-two-living .page-two-water,
.page-frame.page-three-living .page-three-tree,
.page-frame.page-three-living .page-three-pollen,
.page-frame.page-four-living .page-four-memory,
.page-frame.page-five-living .page-five-memory,
.page-frame.page-six-living .page-six-memory {
    opacity: 1;
}

/* ==========================================================
   PAGE 4 — "The trees... I think they know me."
   Roots recognize Sawa; leaves rest in her words.
   ========================================================== */

.page-four-memory {
    z-index: 3;
    mix-blend-mode: normal;
}

.page-frame.page-four-living .journal-page {
    animation: page-four-paper-breathe 18s ease-in-out infinite;
}

/* PAGE 5 — the cottage is quiet, but its fire is still tended. */
.page-five-memory {
    z-index: 3;
    mix-blend-mode: normal;
}

.page-six-memory {
    z-index: 3;
    mix-blend-mode: screen;
}

@keyframes page-four-paper-breathe {
    0%, 100% { filter: sepia(.025) brightness(1); }
    50% { filter: sepia(.065) brightness(1.025) saturate(1.035); }
}

.page-frame.page-two-living .journal-page {
    animation: page-two-paper-settle 31s ease-in-out infinite;
}

/* ==========================================================
   Sprint 2 — PAGE 3
   Memory: "The silence here is unlike anything I've ever known."
   Living Illustration: visible pollen suspended in remembered light.
   The light itself has no hard-edged overlay.
   ========================================================== */

.page-three-sunbeam {
    display: none;
}

.page-three-tree {
    z-index: 2;
    mix-blend-mode: normal;
}

.page-three-pollen {
    z-index: 3;
    mix-blend-mode: screen;
}

.page-frame.page-three-living .journal-page {
    animation: page-three-paper-settle 38s ease-in-out infinite,
               page-three-paper-warmth 8.5s ease-in-out infinite alternate;
}

@keyframes page-three-paper-warmth {
    0% { filter: sepia(.03) brightness(.99) saturate(1); }
    48% { filter: sepia(.10) brightness(1.055) saturate(1.06); }
    100% { filter: sepia(.045) brightness(1.015) saturate(1.02); }
}

@keyframes page-three-paper-settle {
    0%, 46%, 100% { transform: translate3d(0,0,0) rotate(0deg); }
    49% { transform: translate3d(.34px,-.18px,0) rotate(.018deg); }
    52% { transform: translate3d(0,0,0) rotate(0deg); }
    83% { transform: translate3d(0,0,0) rotate(0deg); }
    86% { transform: translate3d(-.28px,.16px,0) rotate(-.015deg); }
    89% { transform: translate3d(0,0,0) rotate(0deg); }
}

@keyframes page-two-paper-settle {
    0%, 38%, 100% { transform: translate3d(0,0,0) rotate(0deg); }
    41% { transform: translate3d(-.55px,.25px,0) rotate(-.03deg); }
    44% { transform: translate3d(0,0,0) rotate(0deg); }
    78% { transform: translate3d(0,0,0) rotate(0deg); }
    81% { transform: translate3d(.45px,-.25px,0) rotate(.026deg); }
    84% { transform: translate3d(0,0,0) rotate(0deg); }
}

@keyframes page-one-light-breathe {
    0% { opacity: .66; filter: brightness(.95) saturate(.92); transform: translate3d(-.25%, .15%, 0) scale(1.008); }
    34% { opacity: .94; filter: brightness(1.07) saturate(1.04); }
    67% { opacity: .74; filter: brightness(.99) saturate(.96); transform: translate3d(.3%, -.2%, 0) scale(1.015); }
    100% { opacity: 1; filter: brightness(1.10) saturate(1.02); transform: translate3d(.05%, -.35%, 0) scale(1.01); }
}
@keyframes page-one-paper-settle {
    0%, 31%, 100% { transform: translate3d(0,0,0) rotate(0deg); }
    34% { transform: translate3d(.7px,-.4px,0) rotate(.045deg); }
    37% { transform: translate3d(.2px,0,0) rotate(.012deg); }
    68% { transform: translate3d(0,0,0) rotate(0deg); }
    71% { transform: translate3d(-.6px,.35px,0) rotate(-.038deg); }
    75% { transform: translate3d(0,0,0) rotate(0deg); }
}
.page-frame.is-turning-forward .journal-page { opacity: 1; transform: perspective(1200px) rotateY(-10deg) translateX(-1%); transform-origin: left center; }
.page-frame.is-turning-back .journal-page { opacity: 1; transform: perspective(1200px) rotateY(10deg) translateX(1%); transform-origin: right center; }

.page-zone {
    position: absolute;
    z-index: 2;
    top: 5%;
    bottom: 5%;
    width: 23%;
    border: 0;
    background: transparent;
    cursor: pointer;
}
.page-zone-left { left: 0; }
.page-zone-right { right: 0; }
.page-zone:focus-visible { outline: 1px solid rgba(87,55,27,.55); outline-offset: -8px; }

.journal-close {
    position: absolute;
    z-index: 5;
    top: -1.8rem;
    right: .2rem;
    width: 2.8rem;
    height: 2.8rem;
    border-radius: 50%;
    border: 1px solid rgba(255,242,214,.25);
    background: rgba(24,14,8,.68);
    color: rgba(255,241,211,.9);
    font: 300 2rem/1 Georgia, serif;
    cursor: pointer;
}

.reader-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.2rem;
    margin-top: .5rem;
    color: rgba(255,239,204,.84);
    text-shadow: 0 2px 8px #000;
}
.reader-controls button {
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    letter-spacing: .08em;
    cursor: pointer;
    padding: .6rem .8rem;
}
.reader-controls button:disabled { opacity: .25; cursor: default; }
#pageCounter { min-width: 3.5rem; text-align: center; font-size: .86rem; letter-spacing: .12em; }


.choice-prompt {
    position: absolute;
    z-index: 6;
    left: 50%;
    top: 54%;
    margin: 0;
    padding: .45rem 1.25rem .5rem;
    transform: translate(-50%, 14px) scale(.97);
    color: rgba(255,245,221,.98);
    font-size: clamp(1.15rem, 2.35vw, 2rem);
    font-style: italic;
    font-weight: 600;
    letter-spacing: .11em;
    text-shadow:
        0 2px 4px rgba(33,17,8,.95),
        0 0 10px rgba(255,236,196,.72),
        0 0 22px rgba(194,165,255,.42);
    background: radial-gradient(ellipse, rgba(42,23,13,.48), rgba(42,23,13,.12) 58%, transparent 75%);
    border-radius: 999px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 1.15s ease .15s, transform 1.15s ease .15s;
    white-space: nowrap;
}
.page-frame.choice-page-active .choice-prompt {
    opacity: 1;
    transform: translate(-50%, 0) scale(1);
}
.page-frame:not(.choice-page-active) .choice-prompt {
    transition-duration: .2s;
    transition-delay: 0s;
}

.choice-zone {
    position: absolute;
    z-index: 4;
    display: block;
    top: 18%;
    bottom: 10%;
    border-radius: 16%;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(8px) scale(.985);
    transition:
        opacity .9s ease,
        visibility 0s linear .9s,
        transform .9s ease,
        filter .45s ease,
        box-shadow .45s ease,
        background .45s ease;
    overflow: hidden;
    touch-action: manipulation;
}
.choice-zone.is-visible {
    visibility: visible;
    pointer-events: auto;
    opacity: 1;
    transform: translateY(0) scale(1);
    transition-delay: .8s, 0s, .8s, 0s, 0s, 0s;
}
.choice-smile.is-visible { transition-delay: 1.35s, 0s, 1.35s, 0s, 0s, 0s; }

.choice-spirit {
    left: 5%;
    width: 42%;
    background: radial-gradient(ellipse at center, rgba(211,205,255,.03) 0 40%, transparent 72%);
    animation: choice-breathe-spirit 4.8s ease-in-out infinite;
}
.choice-smile {
    right: 5%;
    width: 42%;
    background: radial-gradient(ellipse at center, rgba(255,218,142,.035) 0 40%, transparent 72%);
    animation: choice-breathe-smile 5.2s ease-in-out .5s infinite;
}
.choice-zone:hover,
.choice-zone:focus-visible,
.choice-zone.is-tapped {
    transform: translateY(-4px) scale(1.018);
    outline: none;
}
.choice-spirit:hover,
.choice-spirit:focus-visible,
.choice-spirit.is-tapped {
    background: radial-gradient(ellipse, rgba(211,205,255,.20), transparent 70%);
    box-shadow: inset 0 0 34px rgba(191,180,255,.16), 0 0 24px rgba(191,180,255,.18);
    filter: brightness(1.08);
}
.choice-smile:hover,
.choice-smile:focus-visible,
.choice-smile.is-tapped {
    background: radial-gradient(ellipse, rgba(255,220,146,.20), transparent 70%);
    box-shadow: inset 0 0 34px rgba(255,205,108,.15), 0 0 24px rgba(255,205,108,.18);
    filter: brightness(1.08);
}

.choice-spark {
    position: absolute;
    width: clamp(3px, .45vw, 7px);
    aspect-ratio: 1;
    border-radius: 50%;
    opacity: 0;
    pointer-events: none;
}
.choice-spirit .choice-spark {
    background: rgba(231,228,255,.95);
    box-shadow: 0 0 7px rgba(205,196,255,.95), 0 0 15px rgba(178,165,255,.55);
}
.choice-smile .choice-spark {
    background: rgba(255,239,180,.98);
    box-shadow: 0 0 7px rgba(255,220,125,.95), 0 0 15px rgba(255,189,73,.5);
}
.choice-spark-one { left: 18%; top: 31%; animation: choice-spark-drift 4.4s ease-in-out infinite; }
.choice-spark-two { right: 18%; top: 48%; animation: choice-spark-drift 5.1s ease-in-out 1.2s infinite reverse; }
.choice-spark-three { left: 44%; bottom: 22%; animation: choice-spark-drift 4.8s ease-in-out 2.1s infinite; }

@keyframes choice-breathe-spirit {
    0%, 100% { box-shadow: inset 0 0 20px rgba(191,180,255,.025); filter: brightness(1); }
    50% { box-shadow: inset 0 0 34px rgba(191,180,255,.10), 0 0 15px rgba(191,180,255,.08); filter: brightness(1.035); }
}
@keyframes choice-breathe-smile {
    0%, 100% { box-shadow: inset 0 0 20px rgba(255,205,108,.025); filter: brightness(1); }
    50% { box-shadow: inset 0 0 34px rgba(255,205,108,.10), 0 0 15px rgba(255,205,108,.08); filter: brightness(1.035); }
}
@keyframes choice-spark-drift {
    0%, 100% { opacity: 0; transform: translate3d(0, 8px, 0) scale(.7); }
    24% { opacity: .75; }
    58% { opacity: .3; transform: translate3d(8px, -10px, 0) scale(1.05); }
    82% { opacity: .65; }
}


@keyframes curtain-rise {
    0%, 17% { opacity: 1; }
    100% { opacity: 0; }
}
@keyframes room-breathe {
    from { transform: scale(1.015) translate3d(0,0,0); }
    to { transform: scale(1.035) translate3d(-.25%, -.2%, 0); }
}
@keyframes window-light-wander {
    0% { opacity: .25; transform: translate3d(-1%, 1%, 0) rotate(-.4deg) scale(.98); }
    42% { opacity: .39; }
    64% { opacity: .3; }
    100% { opacity: .42; transform: translate3d(1.4%, -.8%, 0) rotate(.7deg) scale(1.04); }
}
@keyframes foliage-sway {
    0% { opacity: .14; transform: translate3d(-1.2%, 0, 0) rotate(-1deg) scale(1.01); }
    48% { opacity: .22; }
    100% { opacity: .16; transform: translate3d(1.5%, .8%, 0) rotate(1.2deg) scale(1.04); }
}
@keyframes dust-float {
    from { transform: translate3d(-2%, 2%, 0) rotate(0deg); }
    to { transform: translate3d(3%, -4%, 0) rotate(1deg); }
}
@keyframes glow-pulse {
    0%,100% { transform: scale(.96); opacity: .5; }
    50% { transform: scale(1.06); opacity: .9; }
}
@keyframes spirit-explore {
    0%   { left: 5%;  top: 23%; opacity: 0;   transform: rotate(-16deg) scale(.28); }
    7%   { opacity: .92; }
    18%  { left: 22%; top: 15%; transform: rotate(8deg) scale(.36); }
    31%  { left: 72%; top: 17%; transform: rotate(-7deg) scale(.39); }
    43%  { left: 78%; top: 51%; transform: rotate(13deg) scale(.43); }
    55%  { left: 59%; top: 58%; transform: rotate(-8deg) scale(.48); }
    67%  { left: 31%; top: 44%; transform: rotate(9deg) scale(.54); }
    79%  { left: 53%; top: 31%; transform: rotate(-4deg) scale(.62); }
    90%  { left: 47%; top: 45%; opacity: .98; transform: rotate(5deg) scale(.70); }
    100% { left: 49%; top: 50%; opacity: 1; transform: rotate(0) scale(.76); }
}
@keyframes spirit-transform {
    0%   { left: 49%; top: 50%; opacity: 1; transform: rotate(0) scale(.76); }
    62%  { left: 42.8%; top: 26.8%; opacity: 1; transform: rotate(-1deg) scale(1.16); }
    78%  { left: 44.3%; top: 30.2%; opacity: 1; transform: rotate(1deg) scale(1.04); }
    100% { left: 43.6%; top: 29%; opacity: 1; transform: rotate(0) scale(1.08); }
}
@keyframes spirit-hover {
    0%, 100% { transform: translateY(0) scale(1.08) rotate(-1deg); }
    50% { transform: translateY(-9px) scale(1.12) rotate(1deg); }
}
@keyframes candle-light-breathe {
    0%,100% { opacity: .52; transform: scale(.94); }
    38% { opacity: .78; transform: scale(1.04); }
    54% { opacity: .61; transform: scale(.98); }
    72% { opacity: .84; transform: scale(1.08); }
}
@keyframes candle-flicker {
    0%,100% { transform: rotate(-1deg) scale(.96,1.02); opacity: .92; }
    12% { transform: rotate(4deg) scale(.88,1.12); opacity: .78; }
    27% { transform: rotate(-3deg) scale(1.02,.94); opacity: 1; }
    49% { transform: rotate(2deg) scale(.92,1.08); opacity: .86; }
    68% { transform: rotate(-5deg) scale(.86,1.14); opacity: .74; }
    83% { transform: rotate(1deg) scale(1,1); opacity: .96; }
}
@keyframes steam-rise {
    0% { opacity: 0; transform: translate3d(0,14px,0) scale(.68) rotate(-7deg); }
    14% { opacity: .58; }
    38% { opacity: .48; transform: translate3d(13px,-31px,0) scale(.94) rotate(10deg); }
    67% { opacity: .31; transform: translate3d(-9px,-72px,0) scale(1.18) rotate(-8deg); }
    100% { opacity: 0; transform: translate3d(15px,-122px,0) scale(1.48) rotate(13deg); }
}
@keyframes flame-dance-one {
    0%, 62%, 100% { opacity: 0; transform: translate3d(0,4px,0) rotate(-4deg) scale(.45); }
    69% { opacity: .75; transform: translate3d(-8px,-5px,0) rotate(-18deg) scale(.8); }
    80% { opacity: .9; transform: translate3d(-15px,-15px,0) rotate(-28deg) scale(1); }
    92% { opacity: 0; transform: translate3d(-21px,-27px,0) rotate(-38deg) scale(.65); }
}
@keyframes flame-dance-two {
    0%, 39%, 100% { opacity: 0; transform: translate3d(0,3px,0) rotate(3deg) scale(.4); }
    47% { opacity: .7; transform: translate3d(7px,-7px,0) rotate(16deg) scale(.78); }
    61% { opacity: .88; transform: translate3d(15px,-17px,0) rotate(25deg) scale(.95); }
    74% { opacity: 0; transform: translate3d(22px,-30px,0) rotate(34deg) scale(.58); }
}
@keyframes flame-dance-three {
    0%, 73%, 100% { opacity: 0; transform: translate3d(0,4px,0) scale(.38); }
    79% { opacity: .66; transform: translate3d(4px,-8px,0) rotate(10deg) scale(.72); }
    88% { opacity: .84; transform: translate3d(-3px,-19px,0) rotate(-9deg) scale(.88); }
    97% { opacity: 0; transform: translate3d(7px,-32px,0) rotate(18deg) scale(.52); }
}
@keyframes motes-form {
    0% { opacity: 0; transform: scale(1.35) rotate(-8deg); }
    28% { opacity: .9; }
    76% { opacity: .64; transform: scale(.72) rotate(8deg); }
    100% { opacity: 0; transform: scale(.38) rotate(14deg); }
}
@keyframes journal-anticipation {
    0%,100% { transform: scale(.92); opacity: .22; }
    50% { transform: scale(1.12); opacity: .92; }
}

@media (max-width: 760px) {
    /* Preserve the finished desktop composition as one 1535 × 1024 canvas.
       The softly blurred room behind it fills portrait screens without cropping
       the journal scene itself. */
    .cottage-scene::before {
        content: "";
        position: absolute;
        inset: -5%;
        background: linear-gradient(rgba(8, 5, 3, .34), rgba(8, 5, 3, .58)),
                    url("../assets/cottage/cottage-scene.png") center / cover no-repeat;
        filter: blur(18px) saturate(.72);
        transform: scale(1.12);
        opacity: .72;
        pointer-events: none;
    }

    .scene-canvas {
        inset: auto;
        left: 50%;
        top: 50%;
        width: 100vw;
        height: auto;
        aspect-ratio: 1535 / 1024;
        transform: translate(-50%, -50%);
        box-shadow: 0 0 42px rgba(0, 0, 0, .78);
    }

    .cottage-background {
        object-fit: fill;
        object-position: center;
    }

    .cup-steam {
        width: clamp(48px, 9vw, 90px);
        height: clamp(70px, 15vw, 125px);
    }

    .cinematic-bar { height: clamp(38px, 8.5vh, 72px); }
    .quiet-prompt { bottom: 1.5%; font-size: .68rem; }
    .journal-stage { width: 100vw; }
    .page-frame { width: min(98vw, calc(133.333svh - 9.333rem)); }
    .journal-close { top: -2.6rem; right: .6rem; }
    .reader-controls { margin-top: .1rem; gap: .3rem; }
    .reader-controls button { font-size: .78rem; }
    .choice-prompt { top: 53%; font-size: clamp(1rem, 4.2vw, 1.38rem); padding: .35rem .75rem; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
    .arrival-curtain { display: none; }
    .whisper-spirit { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .page-one-light,
    .page-two-water-glow,
    .page-three-sunbeam,
    .page-frame.page-one-living .journal-page,
    .page-frame.page-two-living .journal-page,
    .page-frame.page-three-living .journal-page,
    .page-frame.page-four-living .journal-page { animation: none !important; }
    .choice-zone, .choice-spark { animation: none !important; }
}

/* Follow the Spirit — quiet invitation transition */
.spirit-invitation {
    position: fixed;
    z-index: 999;
    inset: 0;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    background: transparent;
}
.spirit-invitation.is-active { opacity: 1; visibility: visible; }
.invitation-blur {
    position: absolute;
    inset: -5%;
    background: rgba(16, 7, 25, .02);
    backdrop-filter: blur(0);
    transition: backdrop-filter 1.5s ease .55s, background 1.5s ease .55s;
}
.spirit-invitation.is-active .invitation-blur {
    backdrop-filter: blur(11px) brightness(.58);
    background: rgba(16, 7, 25, .42);
}
.invitation-eye {
    position: absolute;
    z-index: 2;
    top: 47.5%;
    width: clamp(28px, 3.2vw, 50px);
    height: clamp(5px, .65vw, 10px);
    border-radius: 50%;
    opacity: 0;
    background: #fff;
    filter: blur(3px);
    box-shadow: 0 0 15px 7px rgba(243, 230, 255, .95), 0 0 45px 16px rgba(165, 87, 225, .7);
}
.invitation-eye-left { left: calc(50% - clamp(42px, 4.8vw, 74px)); transform: rotate(-5deg); }
.invitation-eye-right { right: calc(50% - clamp(42px, 4.8vw, 74px)); transform: rotate(5deg); }
.spirit-invitation.is-active .invitation-eye { animation: invitation-eyes 1.7s ease .55s forwards; }
.invitation-light {
    position: absolute;
    inset: -15%;
    opacity: 0;
    background: radial-gradient(circle at 50% 48%, rgba(246,235,255,.98), rgba(180,118,222,.88) 20%, rgba(86,39,119,.62) 48%, rgba(22,8,34,.96) 78%);
}
.spirit-invitation.is-active .invitation-light { animation: invitation-fill 2.35s ease .72s forwards; }
@keyframes invitation-eyes {
    0%, 18% { opacity: 0; }
    48%, 100% { opacity: 1; }
}
@keyframes invitation-fill {
    0%, 38% { opacity: 0; transform: scale(.58); }
    100% { opacity: 1; transform: scale(1); }
}
@media (max-width: 760px) {
    .invitation-eye { top: 47%; width: 30px; height: 6px; }
    .invitation-eye-left { left: calc(50% - 48px); }
    .invitation-eye-right { right: calc(50% - 48px); }
}

/* Paper Polish Sprint: pages 6–9 now use their original transparent artwork only.
   The former tan backing and low-opacity page-turn flash are intentionally disabled. */
.page-frame.page-late { background: transparent; }
.page-frame.page-late .journal-page { background: transparent; }