/* ————————————————————————————————————————
   Scroll-through story (story.html)
   Each page is a .scroll-scrub section (scroll-scrub.js): with the script running (.is-live) it is
   several screens tall, the picture sticks and plays as you scroll, and the page's lines appear one
   by one in a night-sky caption card (styled like reader.html's captions). Without it, each page
   is simply the first frame with its text underneath.
   ———————————————————————————————————————— */

.story-body {
  background: var(--deep);
  color: var(--paper);
}

/* The page scrolls under the pictures, so the header scrolls away rather than covering them. */
.story-body .site-header { position: relative; }

/* ——— Intro ——— */
.story-intro {
  min-height: 82svh;
  display: grid;
  align-items: center;
  text-align: center;
  padding: 4rem 0 3rem;
  background:
    radial-gradient(ellipse 90% 60% at 50% 15%, rgba(255, 217, 160, 0.14), transparent 60%),
    radial-gradient(ellipse 140% 70% at 50% 0%, rgba(169, 163, 207, 0.12), transparent 60%),
    var(--midnight);
}

.story-kicker {
  font-family: var(--font-hand);
  font-size: 1.6rem;
  color: var(--amber);
  margin: 0 0 0.6rem;
}

.story-intro h1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.2rem, 6vw, 4.2rem);
  line-height: 1.08;
  margin: 0 auto;
  max-width: 16ch;
}

.story-intro h1 span { color: var(--glow); }

.story-for {
  margin: 1.1rem 0 0;
  color: var(--lilac);
  font-size: 1.1rem;
}

.story-for span { color: var(--paper); font-weight: 700; }

.story-names {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.8rem 1.2rem;
  margin: 2rem auto 0;
}

.story-names label {
  display: grid;
  gap: 0.35rem;
  text-align: left;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--lilac);
}

.story-names input {
  width: 13rem;
  font: inherit;
  font-size: 1rem;
  font-weight: 600;
  color: var(--paper);
  background: var(--field-bg);
  border: 1px solid var(--field-border);
  border-radius: 12px;
  padding: 0.65rem 0.9rem;
}

.story-names input:focus { outline: none; background: var(--field-focus-bg); border-color: var(--amber); }

.story-hint {
  margin: 2.2rem 0 0;
  color: var(--lilac);
  font-size: 0.95rem;
}

.story-scroll-cue {
  display: block;
  width: 2px;
  height: 3rem;
  margin: 1rem auto 0;
  background: linear-gradient(var(--amber), transparent);
}

.story-scroll-cue { animation: story-cue 1.8s ease-in-out infinite; transform-origin: top; }
@keyframes story-cue { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); } 100% { transform: scaleY(1); opacity: 0; } }

/* ——— Pages, static (no script): the picture, then its words in order ——— */
.story-page { position: relative; }

.story-stage { position: relative; }

.story-art {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--midnight);
}

.story-art img,
.story-art canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.story-beats {
  max-width: 40rem;
  margin: 0 auto;
  padding: 1.6rem 1.5rem 3rem;
}

.story-label {
  margin: 0 0 0.8rem;
  font-family: var(--font-hand);
  font-size: 1.3rem;
  color: var(--amber);
}

.beat {
  margin: 0 0 1rem;
  font-size: clamp(1.05rem, 1.6vw, 1.2rem);
  line-height: 1.6;
}

.beat [data-child-name], .beat .p-grownup { color: var(--glow); font-weight: 700; }

/* ——— Beat styles (both modes) ——— */
.beat-say { font-family: var(--font-display); font-weight: 400; }

/* A question to the reader: a speech bubble. */
.beat-ask {
  position: relative;
  display: inline-block;
  padding: 0.7rem 1.2rem 0.8rem;
  border-radius: 1.4rem;
  background: var(--amber);
  color: var(--deep);
  font-family: var(--font-hand);
  font-weight: 600;
  font-size: clamp(1.5rem, 2.6vw, 2.1rem);
  line-height: 1.15;
  box-shadow: 0 10px 26px rgba(22, 20, 48, 0.28);
}

.beat-ask::after {
  content: "";
  position: absolute;
  left: 1.6rem;
  bottom: -0.7rem;
  border: 0.75rem solid transparent;
  border-top-color: var(--amber);
  border-bottom: 0;
}

/* A hand-written aside, like a note in the margin. */
.beat-aside {
  font-family: var(--font-hand);
  font-weight: 600;
  font-size: clamp(1.6rem, 2.8vw, 2.3rem);
  line-height: 1.15;
  color: var(--red);
  transform: rotate(-2deg);
}

/* A little sound or stage direction, floating. */
.beat-sfx {
  font-family: var(--font-body);
  font-style: italic;
  font-weight: 700;
  font-size: clamp(1.05rem, 1.8vw, 1.35rem);
  letter-spacing: 0.02em;
}

/* WHEE! OUCH! THE END: big, tilted, outlined in paper. */
.beat-shout {
  font-family: var(--font-display);
  font-size: clamp(3rem, 11vw, 9rem);
  line-height: 0.95;
  color: var(--red);
  letter-spacing: 0.01em;
  -webkit-text-stroke: 0.06em var(--paper);
  paint-order: stroke fill;
  text-shadow: 0 0.08em 0.2em rgba(22, 20, 48, 0.3);
  transform: rotate(-4deg);
}

/* ——— Pages, live ——— */
/* Longer pages get more scroll: about 0.9 of a screen per beat, at least 2.4 screens. */
.story-page.is-live { height: calc(max(2.4, var(--beats) * 0.9) * 100vh); }

.story-page.is-live .story-stage {
  position: sticky;
  top: 0;
  height: 100svh;
  overflow: hidden;
}

.story-page.is-live .story-art {
  position: absolute;
  inset: 0;
  aspect-ratio: auto;
}

.story-page.is-live .story-beats {
  position: absolute;
  inset: 0;
  z-index: 2;
  max-width: none;
  margin: 0;
  padding: 0;
  pointer-events: none;
}

.story-page.is-live .story-label { display: none; }

.story-page.is-live .beat {
  --ink: #2b2848;
  --halo: 251, 244, 231;
  position: absolute;
  margin: 0;
  max-width: min(24ch, 44vw);
  color: var(--ink);
  font-size: clamp(1.5rem, 2.55vw, 2.5rem);
  line-height: 1.28;
  isolation: isolate; /* keeps the paper wash (::before, z-index -1) above the picture */
  opacity: 0;
  translate: 0 1rem;
  transition: opacity 0.6s ease, translate 0.6s ease;
}

/* Printed onto the painting: a soft wash of paper behind the words so they read on any patch of it. */
.story-page.is-live .beat-say::before,
.story-page.is-live .beat-sfx::before,
.story-page.is-live .beat-aside::before {
  content: "";
  position: absolute;
  inset: -2.2rem -2.8rem;
  z-index: -1;
  background: radial-gradient(closest-side, rgba(var(--halo), 0.94), rgba(var(--halo), 0.8) 60%, rgba(var(--halo), 0));
  filter: blur(8px);
}

.story-page.is-live.tone-light .beat { --ink: var(--paper); --halo: 22, 20, 48; }

.story-page.is-live .beat.is-on { opacity: 1; translate: 0 0; }

/* Read along: each word brightens as the scroll reaches it, over the first 65% of its beat. */
.story-page.is-live .beat .w {
  opacity: clamp(0.28, calc(((var(--progress) - var(--from)) / (var(--to) - var(--from)) - var(--w) * 0.65) * 14 + 0.28), 1);
}

.story-page.is-live .beat-big { max-width: min(18ch, 70vw); font-size: clamp(2.2rem, 4.6vw, 4.4rem); line-height: 1.1; }
/* A '-' makes a beat a narrow column, for a long paragraph squeezed beside the characters on a busy page. */
.story-page.is-live .beat-narrow { max-width: min(16ch, 27vw); }
.story-page.is-live .beat-sfx { font-size: clamp(1.4rem, 2.4vw, 2.1rem); }
.story-page.is-live .beat-ask { font-size: clamp(1.5rem, 2.6vw, 2.2rem); color: var(--deep); }
.story-page.is-live .beat-aside { font-size: clamp(1.7rem, 3vw, 2.6rem); color: var(--red); }
.story-page.is-live.tone-light .beat-aside { color: var(--glow); }
/* A '+' on a sound or a speech bubble (SPLASH!, "RUN!") makes it big too; phones cap every big beat at 2rem below. */
.story-page.is-live .beat-sfx.beat-big, .story-page.is-live .beat-ask.beat-big { font-size: clamp(2.4rem, 5vw, 4.4rem); }

/* Shouts grow in from small and keep swelling as you scroll through them. */
.story-page.is-live .beat-shout {
  max-width: 92vw;
  font-size: clamp(3rem, calc(115vw / var(--chars, 6)), 10rem);
  color: var(--red);
  scale: 0.4;
  transition: opacity 0.35s ease, scale 0.5s cubic-bezier(0.2, 1.6, 0.4, 1);
}

.story-page.is-live .beat-shout.is-on {
  scale: calc(1 + (var(--progress) - var(--from)) / (var(--to) - var(--from)) * 0.18);
}

/* Positions: t/c/b + l/c/r, kept clear of the screen edges. Centred ones size to their text
   (max-content, capped by max-width) so a shout isn't squeezed into the half-width left of centre. */
.story-page.is-live .at-tc, .story-page.is-live .at-cc, .story-page.is-live .at-bc { width: max-content; }
.story-page.is-live .at-tl { top: 9vh; left: 6vw; }
.story-page.is-live .at-tc { top: 8vh; left: 50%; translate: -50% 1rem; text-align: center; }
.story-page.is-live .at-tr { top: 9vh; right: 6vw; }
.story-page.is-live .at-cc { top: 50%; left: 50%; translate: -50% calc(-50% + 1rem); text-align: center; }
.story-page.is-live .at-bl { bottom: 10vh; left: 6vw; }
.story-page.is-live .at-bc { bottom: 9vh; left: 50%; translate: -50% 1rem; text-align: center; }
.story-page.is-live .at-br { bottom: 10vh; right: 6vw; text-align: right; }
.story-page.is-live .at-tc.is-on, .story-page.is-live .at-bc.is-on { translate: -50% 0; }
.story-page.is-live .at-cc.is-on { translate: -50% -50%; }

/* Phones: the picture fills the whole screen, cropped around each page's focus (data-focus, set per
   page in story.html), and the words take turns over a dark fade at the bottom. Shouts burst in the
   middle of the picture. */
@media (max-width: 700px) {
  .story-page.is-live .story-art img { object-position: var(--focus, 50%) 50%; }

  .story-page.is-live .story-beats::before {
    content: "";
    position: absolute;
    inset: 58% 0 0;
    background: linear-gradient(to top, rgba(22, 20, 48, 0.9) 0%, rgba(22, 20, 48, 0.7) 40%, rgba(22, 20, 48, 0));
  }

  .story-page.is-live .beat,
  .story-page.is-live.tone-light .beat {
    --ink: var(--paper);
    top: auto;
    bottom: calc(2.2rem + env(safe-area-inset-bottom, 0px));
    left: 1.25rem;
    right: 1.25rem;
    width: auto;
    max-width: none;
    text-align: left;
    translate: 0 1rem;
    font-size: 1.36rem;
    text-shadow: 0 1px 12px rgba(22, 20, 48, 0.6);
  }

  .story-page.is-live .beat.is-on { translate: 0 0; }
  .story-page.is-live .beat.beat-big { font-size: 2rem; }
  .story-page.is-live .beat-ask { right: auto; text-shadow: none; }
  .story-page.is-live .beat-say::before,
  .story-page.is-live .beat-sfx::before,
  .story-page.is-live .beat-aside::before { display: none; }
  .story-page.is-live .beat-aside { color: var(--glow); }

  .story-page.is-live .beat-shout,
  .story-page.is-live.tone-light .beat-shout {
    top: 40%;
    bottom: auto;
    left: 50%;
    right: auto;
    width: max-content;
    max-width: 94vw;
    translate: -50% -50%;
    text-align: center;
    text-shadow: 0 0.08em 0.2em rgba(22, 20, 48, 0.3);
    font-size: clamp(2.6rem, calc(130vw / var(--chars, 6)), 6rem);
  }

  .story-page.is-live .beat-shout.is-on { translate: -50% -50%; }
}

/* ——— The end ——— */
.story-signature {
  padding: 5rem 0 6rem;
  text-align: center;
  background: var(--midnight);
}

.story-sig-card {
  max-width: 26rem;
  margin: 0 auto;
  padding: 2.2rem 1.8rem;
  border-radius: var(--radius);
  background: var(--paper);
  color: var(--ink);
  box-shadow: var(--shadow-page);
}

.story-sig-heading { margin: 0; font-family: var(--font-display); font-size: 1.3rem; }

.story-sig-name {
  margin: 0.8rem 0 0.4rem;
  padding-bottom: 0.4rem;
  border-bottom: 2px dashed rgba(51, 48, 79, 0.3);
  font-family: var(--font-hand);
  font-size: 2.6rem;
  color: var(--red);
}

.story-sig-read { margin: 0.6rem 0 0; color: var(--ink-soft); }

.story-end-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.8rem;
  margin-top: 2.2rem;
}

/* ——— Read aloud (story-narrate.js) ——— */
/* "Read it to me" under the name fields, and a small copy floating top right while the pages are on screen. */
.narrate { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0.5rem; }
.narrate-intro { margin-top: 1.4rem; }
.narrate-toggle {
  font: inherit;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--paper);
  min-height: 2.6rem;
  background: var(--field-bg);
  border: 1px solid var(--field-border);
  border-radius: 999px;
  cursor: pointer;
}
.narrate-toggle { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0 1.1rem 0 0.9rem; }
.narrate-toggle:hover { border-color: var(--amber); }
.narrate-toggle[aria-pressed="true"] { background: var(--amber); border-color: var(--amber); color: var(--deep); }
.narrate-toggle[aria-pressed="true"] .narrate-mute,
.narrate-toggle[aria-pressed="false"] .narrate-waves { display: none; }
.narrate :focus-visible { outline: 3px solid var(--glow); outline-offset: 2px; }

.narrate-float {
  position: fixed;
  z-index: 20;
  top: calc(0.75rem + env(safe-area-inset-top, 0px));
  right: 0.75rem;
  justify-content: flex-end;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s, visibility 0.3s;
}
.story-reading .narrate-float { opacity: 1; visibility: visible; }
.narrate-float .narrate-toggle {
  background: rgba(22, 20, 48, 0.6);
  border-color: rgba(251, 244, 231, 0.3);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  font-size: 0.85rem;
  min-height: 2.3rem;
}
.narrate-float .narrate-toggle[aria-pressed="true"] { background: var(--amber); border-color: var(--amber); }