/* /reading: the books fly in, one Storytime page reads itself (or hears you), and Read to Phil listens.
   Motion follows .agents/skills/playful-motion; the demos run from pages/reading.js. */

/* ── Hero: words pop, Phil hops, then the books fall in, stretch, squash and settle ── */
.reading-hero .kicker { color: var(--gold); }
.reading-head .line { display: inline-block; }
/* The headline reads itself: each word pops, then gets the app's gold read-along line, and a small
   Phil hops along under "Phil follows along." as it is read. */
.reading-head .line.follow { position: relative; white-space: nowrap; }
.reading-head .rw { position: relative; display: inline-block; animation: kit-word-pop 560ms cubic-bezier(.34, 1.56, .64, 1) calc(120ms + var(--i, 0) * 70ms) both; }
.reading-head .rw::after { content: ""; position: absolute; left: 0; right: .12em; bottom: .04em; height: .07em; border-radius: 99px; background: var(--gold); transform: scaleX(0); transform-origin: left; animation: read-line 240ms cubic-bezier(.23, 1, .32, 1) var(--u) both; }
.reading-head .rw:nth-child(1) { --u: 520ms; }
.reading-head .rw:nth-child(2) { --u: 680ms; }
.reading-head .follow .rw:nth-child(1) { --u: 1080ms; }
.reading-head .follow .rw:nth-child(2) { --u: 1360ms; }
.reading-head .follow .rw:nth-child(3) { --u: 1640ms; }
@keyframes read-line { to { transform: scaleX(1); } }
/* The rider box spans the line with Phil at its right end, so sliding the box walks him along the words. */
.reading-head .rider { position: absolute; left: 0; bottom: -.52em; width: 100%; height: .52em; pointer-events: none; transform: translateX(-100%); animation: rider-walk 840ms linear 900ms both; }
.reading-head .rider img { position: absolute; right: -.3em; bottom: 0; width: .52em; height: .52em; transform-origin: 50% 100%; filter: drop-shadow(0 2px 6px #0007); animation: rider-hop 280ms cubic-bezier(.3, .7, .4, 1) 900ms 3 both, float 5.5s ease-in-out 1900ms infinite; }
@keyframes rider-walk { 0% { opacity: 0; transform: translateX(calc(-100% + .1em)); } 10% { opacity: 1; } 33% { transform: translateX(-80%); } 66% { transform: translateX(-38%); } 100% { transform: translateX(0); } }
@keyframes rider-hop { 0% { transform: scale(1.1, .88); } 35% { transform: translateY(-.32em) scale(.94, 1.08); } 72% { transform: translateY(0) scale(1.12, .86); } 100% { transform: none; } }
.reading-hero .lede { margin-top: 1.1em; }
/* The books fall from the sky behind the words, never across them. */
.reading-hero .hero > :not(.cover-drop) { position: relative; z-index: 2; }
.reading-hero .button { margin-top: clamp(26px, 3.5vw, 36px); }
.cover-drop { display: flex; justify-content: center; align-items: flex-start; margin: clamp(26px, 4vw, 40px) 0 0; padding: 0; list-style: none; }
/* Three animations, so the fall is an arc: sideways eases out while the drop speeds up. */
.cover-drop li {
  --t: calc(480ms + var(--n) * 70ms);
  margin-inline: -6px; transform-origin: 50% 100%;
  rotate: var(--r); transform: translateY(var(--y));
  animation: cover-x 430ms cubic-bezier(.2, .7, .35, 1) var(--t) both, cover-spin 430ms cubic-bezier(.25, .6, .4, 1) var(--t) both, cover-drop 820ms linear var(--t) both;
}
.cover-drop li:nth-child(4) { z-index: 2; }
.cover-drop li:nth-child(3), .cover-drop li:nth-child(5) { z-index: 1; }
.cover-drop img { display: block; width: clamp(84px, 9.5vw, 124px); aspect-ratio: 2 / 3; object-fit: cover; border-radius: 16px; border: 3px solid #fff8ea; background: #ede5d6; box-shadow: 0 14px 30px #0009; transition: transform 360ms cubic-bezier(.34, 1.56, .64, 1); }
.cover-drop li:hover img, .cover-drop li:active img { transform: translateY(-12px) rotate(-3deg) scale(1.04); }
@keyframes cover-x { from { translate: var(--fx) 0; } }
@keyframes cover-spin { from { rotate: var(--sr); } }
@keyframes cover-drop {
  0% { opacity: 0; transform: translateY(-520px) scale(.86, 1.2); animation-timing-function: cubic-bezier(.55, 0, .9, .45); }
  12% { opacity: 1; }
  52% { transform: translateY(var(--y)) scale(.88, 1.16); animation-timing-function: cubic-bezier(.2, .7, .4, 1); }
  62% { transform: translateY(calc(var(--y) + 3px)) scale(1.18, .8); animation-timing-function: cubic-bezier(.3, .6, .5, 1); }
  78% { transform: translateY(calc(var(--y) - 20px)) scale(.95, 1.06); animation-timing-function: cubic-bezier(.5, 0, .8, .5); }
  90% { transform: translateY(var(--y)) scale(1.05, .95); }
  100% { transform: translateY(var(--y)) scale(1); }
}
@media (max-width: 600px) {
  .cover-drop li { margin-inline: -2.2vw; }
  .cover-drop li:nth-child(n + 6) { display: none; }
  .cover-drop img { width: 21vw; border-radius: 12px; }
}

/* ── One page of Dig Here!, read out loud in Storytime ── */
.reader-title { margin: 0 auto clamp(26px, 3.5vw, 40px); text-align: center; }
/* The tablet is at most about two thirds of the screen tall, so the page and its beats fit in one view. */
.reader { max-width: min(940px, calc(66vh * 4 / 3), calc(66svh * 4 / 3)); margin: 0 auto; }
.reader-stage { position: relative; }
.device-mock.tablet.reader-tablet { max-width: none; }
/* site.css gives an older .tablet a tilt; the kit frame stands straight. */
.device-mock.tablet { transform: none; }
.reader-screen { container-type: inline-size; display: grid; place-items: center; background: radial-gradient(120% 90% at 50% 40%, #fbf3df 0%, #efe3c6 100%); }
.mic-chip { position: absolute; z-index: 3; top: 2.6cqw; right: 3cqw; display: grid; place-items: center; width: max(30px, 5.2cqw); aspect-ratio: 1; border-radius: 50%; color: #2f4136; background: #ffd76a; box-shadow: 0 0 0 1px #b0780a99; }
.mic-chip svg { width: 42%; height: 42%; }
.mic-chip::after { content: ""; position: absolute; z-index: -1; inset: 0; border-radius: 50%; background: #ffcd508c; animation: chip-listening 1800ms cubic-bezier(.23, 1, .32, 1) infinite; }
@keyframes chip-listening { from { opacity: .9; transform: scale(1); } to { opacity: 0; transform: scale(1.6); } }
.reader-book { position: relative; width: 91%; aspect-ratio: 3 / 2; }
.reader-view { position: absolute; inset: 0; overflow: hidden; border-radius: 1.4cqw; box-shadow: 0 1.4cqw 3.4cqw #5b46223b, 0 0 0 1px #5b462214; }
.reader-pan { container-type: inline-size; position: absolute; top: 0; left: 0; width: 100%; height: 100%; transition: transform 850ms cubic-bezier(.65, 0, .35, 1); }
.reader-pan > img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* A named thing: its edge glows, then rests as a quieter gold line (picture-book.module.css). */
.reader-things { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.reader-things polygon { stroke: #ffe08a; stroke-linejoin: round; vector-effect: non-scaling-stroke; opacity: 0; }
.reader-things .edge { fill: none; stroke-width: 1.5; transition: opacity 400ms ease; }
.reader-things .glow { fill: #fff7d72e; stroke-width: 2.5; filter: drop-shadow(0 0 5px #ffd664f2) drop-shadow(0 0 14px #ffc8508c); }
.reader-things .lit .glow { animation: thing-light 1400ms cubic-bezier(.23, 1, .32, 1) both; }
.reader-things .rest .edge { opacity: .6; }
@keyframes thing-light { 0% { opacity: 0; } 6%, 60% { opacity: 1; } 100% { opacity: 0; } }
.page-words { position: absolute; left: 56%; top: 4%; width: 42%; margin: 0; color: #2d2a22; font: 700 2.2cqw/1.34 Georgia, "Times New Roman", serif; }
.page-words .line { display: block; padding-left: calc(var(--in) * 1.4em); }
.page-words .gap { display: block; height: .62em; }
/* Read along: a slim gold line draws under each word as it is said, and the next word waits in soft blue. */
.page-words .w { border-radius: .28em; background: linear-gradient(#e0a93a, #e0a93a) no-repeat 0 96% / 0% .11em; transition: background-size 160ms cubic-bezier(.23, 1, .32, 1), background-color 140ms ease, box-shadow 140ms ease; }
.page-words .w.read { background-size: 100% .11em; }
.page-words .w.next { background-color: #96cdeb66; box-shadow: 0 0 0 .12em #96cdeb66; }
.spot-pill { position: absolute; z-index: 3; left: .3cqw; bottom: -2.4cqw; display: inline-flex; align-items: center; gap: .9cqw; min-height: max(26px, 4.4cqw); margin: 0; padding: 0 max(10px, 1.8cqw) 0 max(8px, 1.4cqw); border: 1px solid #405a4b52; border-radius: 999px; background: #fffaf0f7; color: #293c32; font: 700 max(11px, 1.75cqw)/1 "Phil Story", ui-rounded, system-ui, sans-serif; box-shadow: 0 2px 6px #17281838; transition: background-color 200ms ease, border-color 200ms ease; white-space: nowrap; }
.spot-pill svg { width: max(13px, 2cqw); height: max(13px, 2cqw); flex: none; }
.spot-pill span { animation: pill-text 180ms cubic-bezier(.23, 1, .32, 1) both; font-variant-numeric: tabular-nums; }
.spot-pill[data-hint] { border-color: #b0780a8c; background: #fff3c9; }
@keyframes pill-text { from { opacity: 0; transform: translateY(3px); } }
/* The child, out loud. */
.kid-says { position: absolute; z-index: 4; right: -14px; bottom: 9%; margin: 0; padding: 10px 20px; border-radius: 24px 24px 6px 24px; background: #fff; color: #2b2a26; font-weight: 900; font-size: clamp(1.15rem, 2.2vw, 1.55rem); box-shadow: 0 10px 26px #2b2a2638; transform-origin: 90% 100%; opacity: 0; transform: translateY(10px) scale(.6); transition: opacity 180ms ease-out, transform 420ms cubic-bezier(.34, 1.56, .64, 1); pointer-events: none; }
.kid-says::before { content: ""; display: inline-block; width: .5em; height: .5em; margin-right: .45em; border-radius: 50%; background: #e2463b; vertical-align: .08em; }
.kid-says.on { opacity: 1; transform: none; }
/* Three beats, filling like a story's progress. */
.beats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(10px, 2vw, 20px); margin: clamp(30px, 4vw, 40px) 0 0; padding: 0; list-style: none; }
.beats button { display: block; width: 100%; min-height: 44px; padding: 0 0 6px; border: 0; background: none; color: var(--muted); font: inherit; font-weight: 800; font-size: clamp(.92rem, 1.6vw, 1.08rem); line-height: 1.3; text-align: left; cursor: pointer; transition: color 200ms ease; touch-action: manipulation; }
.beats button[aria-current] { color: var(--ink); }
.beats i { display: block; height: 6px; margin-bottom: 12px; overflow: hidden; border-radius: 99px; background: var(--soft); }
.beats b { display: block; height: 100%; border-radius: inherit; background: var(--gold); transform: scaleX(0); transform-origin: left; }
/* "How do you feel about this book?", with the app's three answers. */
.feel { display: grid; justify-items: center; gap: 12px; margin-top: clamp(36px, 5vw, 52px); text-align: center; }
.feel-ask { margin: 0; font-weight: 850; font-size: 1.15rem; }
.feel-choices { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.feel-choices button { min-height: 48px; padding: 10px 20px; border: 1.5px solid #71806a; border-radius: 999px; background: #fffaf0; color: #26372c; font: inherit; font-weight: 800; font-size: 1rem; line-height: 1.1; cursor: pointer; touch-action: manipulation; transition: transform 160ms cubic-bezier(.2, .8, .2, 1), background-color 160ms ease, color 160ms ease; }
.feel-choices button:active { transform: scale(.97); }
.feel-choices button[aria-checked="true"] { border-color: #2f4136; background: #2f4136; color: #fffaf0; }
@media (max-width: 700px) {
  /* On a narrow screen the reader turns upright and pans between the two pages, as Storytime does. */
  .reader { max-width: min(940px, calc(66vh * 3 / 4), calc(66svh * 3 / 4)); }
  .device-mock.tablet.reader-tablet { aspect-ratio: 3 / 4; }
  .reader-book { width: 86%; aspect-ratio: 3 / 4; }
  .reader-view { border-radius: 2.2cqw; }
  .reader-pan { width: 200%; }
  .reader-pan[data-side="right"] { transform: translateX(-50%); }
  .page-words { font-size: 2.6cqw; }
  .spot-pill { bottom: -3.4cqw; }
  .kid-says { right: 4px; bottom: -18px; }
  .beats button { font-size: .88rem; }
}

/* ── Read to Phil: one listening screen, on the night band ── */
.rtp-band.night { padding: clamp(56px, 7vw, 96px) 0; }
.rtp-head { display: grid; justify-items: center; max-width: 40rem; margin: 0 auto clamp(26px, 3.5vw, 40px); text-align: center; }
.rtp-head .kicker { margin: 10px 0 6px; color: var(--gold); }
.rtp-head h2 { color: var(--night-ink); }
.rtp-head p { margin: 10px 0 0; color: var(--night-muted); font-size: 1.1rem; }
.rtp-proof { max-width: min(760px, calc(58vh * 4 / 3), calc(58svh * 4 / 3)); margin: 0 auto; }
.rtp-proof figcaption { margin-top: 18px; color: var(--night-ink); font-weight: 800; font-size: 1.15rem; text-align: center; }
.rtp-proof .device-mock.tablet { max-width: none; }
.rtp-screen { container-type: inline-size; font-family: ui-sans-serif, system-ui, sans-serif; font-size: 2.6cqw; }
.rtp-screen p { margin: 0; }
.rtp-screen svg { width: 1.2em; height: 1.2em; flex: none; }
/* Reading: dark and quiet */
.rtp-listening { position: absolute; inset: 0; display: grid; grid-template-rows: auto minmax(0, 1fr) auto auto auto; justify-items: center; gap: 1.8cqw; padding: 3cqw 5cqw 3.4cqw; background: #070908; color: #d8d2c2; }
.rtp-top { display: flex; align-items: center; gap: 2cqw; width: 84%; }
.rtp-top img { width: 8cqw; height: auto; opacity: .8; }
.rtp-top div { display: grid; gap: .4cqw; }
.rtp-top small { font-size: 2.2cqw; color: #a9a393; }
.rtp-status { display: flex; align-items: center; gap: 1cqw; font-size: 2.7cqw; }
.rtp-status i { width: 1cqw; height: 1cqw; border-radius: 50%; background: #d8d2c2; animation: listening-pulse 2.4s ease-in-out infinite; }
@keyframes listening-pulse { 50% { opacity: .5; } }
.rtp-text { width: 84%; align-self: center; font: 400 3.05cqw/1.6 Georgia, serif; }
.rtp-text span { color: #a9a393; }
.rtp-text span.read { color: #e0dccf; }
.rtp-text span.cur { color: #fff4d6; text-decoration: underline 2px #d8bc7a; text-underline-offset: .25em; }
.rtp-text span.helped { border-bottom: 1px dotted #a9a393; }
.rtp-help { min-height: 1.3em; color: #fff4d6; font: 700 4.4cqw/1.3 Georgia, serif; opacity: 0; transform: translateY(1cqw) scale(.94); transition: opacity 200ms ease, transform 320ms cubic-bezier(.34, 1.56, .64, 1); }
.rtp-help.on { opacity: 1; transform: none; }
.rtp-bar { width: 52%; height: .8cqw; overflow: hidden; border-radius: 999px; background: #d8d2c226; }
.rtp-bar span { display: block; height: 100%; background: #f3c45a99; transform: scaleX(var(--p, .2)); transform-origin: left; transition: transform 400ms cubic-bezier(.23, 1, .32, 1); }
.rtp-actions { display: flex; gap: 1.6cqw; }
.rtp-actions span { display: grid; align-content: center; padding: 1.2cqw 2.8cqw; border: 1px solid #4b4a42; border-radius: 2cqw; font-weight: 700; font-size: 2.3cqw; }
.rtp-actions span:first-child { border-color: #a9a393; }
.rtp-actions small { display: block; color: #a9a393; font-size: 1.8cqw; font-weight: 400; }
@media (max-width: 600px) {
  /* Upright on a phone, with the page set large enough to read. */
  .rtp-proof { max-width: min(100%, calc(62vh * 3 / 4), calc(62svh * 3 / 4)); }
  .rtp-proof .device-mock.tablet { aspect-ratio: 3 / 4; }
  .rtp-listening { gap: 3cqw; padding: 6cqw 6cqw 5cqw; }
  .rtp-top, .rtp-text { width: 100%; }
  .rtp-top img { width: 12cqw; }
  .rtp-status { gap: 2cqw; font-size: 4.2cqw; }
  .rtp-status i { width: 1.8cqw; height: 1.8cqw; }
  .rtp-top small { font-size: 3.4cqw; }
  .rtp-text { font-size: 4.7cqw; }
  .rtp-help { font-size: 6.6cqw; }
  .rtp-bar { width: 70%; height: 1.2cqw; }
  .rtp-actions { gap: 2.4cqw; }
  .rtp-actions span { padding: 2cqw 3.4cqw; border-radius: 3cqw; font-size: 3.4cqw; }
  .rtp-actions small { font-size: 2.8cqw; }
}

/* ── Try it with your voice: opt-in, and the microphone only on a tap ── */
.voice { display: grid; justify-items: center; gap: 10px; margin-top: clamp(24px, 3vw, 32px); text-align: center; }
.voice-go { display: inline-flex; align-items: center; gap: 10px; min-height: 52px; padding: 10px 24px 10px 18px; border: 0; border-radius: 999px; background: var(--gold); color: var(--on-gold); font: inherit; font-weight: 850; font-size: 1.08rem; cursor: pointer; box-shadow: 0 4px 0 #b37a00; touch-action: manipulation; transition: transform .16s cubic-bezier(.2, .8, .2, 1), box-shadow .16s; }
.voice-go svg { width: 22px; height: 22px; }
.voice-go:hover { transform: translateY(-2px); box-shadow: 0 6px 0 #b37a00; }
.voice-go:active { transform: translateY(3px); box-shadow: 0 1px 0 #b37a00; }
.voice-go[aria-pressed="true"] { background: #2f4136; color: #fffaf0; box-shadow: 0 4px 0 #1b2820; }
.voice-go[aria-pressed="true"] svg { animation: voice-breathe 1.6s ease-in-out infinite; }
.voice-go:disabled { cursor: progress; opacity: .85; }
@keyframes voice-breathe { 50% { transform: scale(1.18); } }
.voice-note { max-width: 36rem; margin: 0; color: var(--muted); font-size: .98rem; font-variant-numeric: tabular-nums; }
.voice-note[data-problem] { color: var(--ink); font-weight: 750; }
/* While the visitor reads, the scripted beats step aside. */
.reader[data-voice-on] .beats { display: none; }

/* ── Closing: the bedtime picture rises under the words ── */
.reading-closing.pictured { padding-bottom: clamp(240px, 36vw, 470px); background: linear-gradient(180deg, var(--night) 0%, var(--night) 34%, #161b3ecc 50%, #161b3e00 78%), url("/site/feature/read-to-phil.webp") center bottom / cover no-repeat, var(--night); }

@media (prefers-reduced-motion: reduce) {
  .reading-head .rw, .reading-head .rw::after, .reading-head .rider, .reading-head .rider img, .voice-go svg, .cover-drop li, .mic-chip::after, .rtp-status i, .reader-things .lit .glow, .spot-pill span { animation: none !important; }
  .cover-drop li { opacity: 1; }
  .reading-head .rw::after, .reading-head .rider { transform: none; }
  .reader-pan, .kid-says, .rtp-help, .rtp-bar span, .page-words .w, .cover-drop img { transition: none; }
}