@font-face{font-family:"Lexend Exa";font-display:swap;src:url(lexend-exa.woff2)format("woff2")}
:root{--sky:#2a1b4d;--tomb:#4a2c17;--gold:#f5b82e;--paper:#fbf5e6;--ink:#2e2418;--mark:#d9481c;--cover:#6b2a1a}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
/* Toddler-proofing: no text selection, long-press menus or double-tap zoom */
body{font-family:"Lexend Exa",sans-serif;background:radial-gradient(ellipse at 50% 40%,#5b2f6b,var(--sky) 75%);user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;touch-action:manipulation;overflow:hidden}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
.book{height:100dvh;display:grid;place-items:center;padding:3dvh clamp(12px,9vw,96px);container-type:size}
/* An open book: a cloth cover with a stack of page edges under a two-page spread */
.cover{width:min(100cqw,150cqh);aspect-ratio:3/2;background:var(--cover);border-radius:1.2cqmin;padding:1.4cqmin 1.4cqmin 2.4cqmin;box-shadow:0 2cqmin 5cqmin #0009,inset 0 0 0 .3cqmin #0003}
.spread{position:relative;height:100%;display:grid;grid-template-columns:1fr 1fr;perspective:2400px;container-type:inline-size;
  box-shadow:0 .25cqmin 0 #e6dcc4,0 .5cqmin 0 #cfc2a4,0 .75cqmin 0 #e6dcc4,0 1cqmin 0 #c6b896}
.leaf{position:relative;display:grid;min-height:0;padding:5cqw 4.5cqw;color:var(--ink);backface-visibility:hidden}
/* One picture runs across the spread, each page showing its half, shaded where the paper curves into the spine */
.left{background:linear-gradient(to left,#3a2a1640,#0000 9%),var(--pic) 0 0/200% 100% no-repeat;border-radius:.6cqw 0 0 .6cqw}
.right{place-items:end center;background:linear-gradient(to right,#3a2a1640,#0000 9%),var(--pic) 100% 0/200% 100% no-repeat;border-radius:0 .6cqw .6cqw 0}
.right.top{place-items:start center;padding-top:8cqw}
/* The words sit on a patch of paper that feathers into the picture, the play button leading the line */
.text{display:flex;align-items:center;gap:.4em;max-width:100%;font-size:max(24px,3.6cqw);padding:.45em .8em;margin-inline:-2.5cqw;background:var(--paper);
  mask:linear-gradient(90deg,#0000,#000 .6em calc(100% - .6em),#0000),linear-gradient(#0000,#000 .4em calc(100% - .4em),#0000);mask-composite:intersect}
.line{font-weight:700;line-height:1.5;text-align:center;text-wrap:balance}
.word{position:relative;display:inline-block;padding:.05em .08em;border-radius:.15em;transition:color .15s}
/* A fingertip-sized target around even a one-letter word */
.word:after{content:"";position:absolute;inset:-.3em -.2em}
.word span{display:inline-block;transition:transform .15s,color .15s}
.word span.on{color:var(--mark);transform:translateY(-.12em) scale(1.18)}
.word.said,.word.lit{background:linear-gradient(#0000 55%,#ffd84d 55% 92%,#0000 92%)}
.word.said{animation:said .5s cubic-bezier(.3,1.6,.6,1)}
@keyframes said{50%{transform:scale(1.2)}}
.read{flex:none;width:max(48px,1.5em);aspect-ratio:1;border-radius:50%;background:var(--gold);color:var(--tomb);display:grid;place-items:center;box-shadow:0 .12em 0 #b9861a}
.read svg{width:55%;height:55%}
/* The page being turned, swinging about the spine */
.sheet{position:absolute;top:0;bottom:0;width:50%;pointer-events:none}
.sheet.left{left:0}
.sheet.right{left:50%}
.sheet.page{display:grid;grid-template:auto 1fr/1fr;background:var(--paper)}
.turn{position:fixed;top:50%;translate:0 -50%;width:64px;height:64px;border-radius:50%;background:var(--gold);color:var(--tomb);border:4px solid var(--tomb);display:grid;place-items:center}
.turn svg{width:36px;height:36px}
.home{position:fixed;z-index:30;top:14px;left:14px;width:56px;height:56px;border-radius:50%;background:var(--gold);color:var(--tomb);border:4px solid var(--tomb);display:grid;place-items:center}
.home svg{width:30px;height:30px}
.turn:active,.read:active,.home:active{scale:.92}
.prev{left:max(8px,calc(4.5vw - 32px))}
.next{right:max(8px,calc(4.5vw - 32px))}
.turn[hidden]{display:none}
/* Portrait: one page, picture above the words */
@media (orientation:landscape) and (max-height:500px){.book{padding-block:1dvh}}
@media (orientation:portrait){
  .book{padding:2dvh 12px 14dvh}
  .cover{width:min(100cqw,66cqh);aspect-ratio:2/3}
  .spread{grid-template:auto 1fr/1fr;background:var(--paper)}
  .left{aspect-ratio:3/2;background:var(--pic) center/cover;border-radius:1.2cqw 1.2cqw 0 0}
  .right,.right.top{place-items:center;padding:4cqw 5cqw;background:var(--paper);border-radius:0 0 1.2cqw 1.2cqw}
  .text{font-size:max(24px,9cqw);mask:none;padding:0}
  .sheet{inset:0;width:auto}
  .sheet.left,.sheet.right{left:0}
  .turn{top:auto;bottom:2dvh;translate:none}
}
/* Loading: a spinning gold-and-bandage ring over the night sky until the book can play */
.loading{position:fixed;inset:0;z-index:20;display:grid;place-items:center;background:radial-gradient(ellipse at 50% 40%,#5b2f6b,var(--sky) 75%);transition:opacity .4s}
.loading.done{opacity:0;pointer-events:none}
.loading:after{content:"";width:min(18vmin,96px);aspect-ratio:1;border-radius:50%;background:conic-gradient(var(--gold) 0 30%,#f6eedb 30% 50%,var(--gold) 50% 80%,#f6eedb 80%);mask:radial-gradient(farthest-side,#0000 62%,#000 64%);filter:drop-shadow(0 0 12px #f5b82e88);animation:spin 1s linear infinite}
@keyframes spin{to{rotate:1turn}}