/* Motion is an enhancement: copy and neutral characters remain without JavaScript. */
.opening-stage { width:100%; max-width:680px; justify-self:center; }
.about-stage { width:min(100%,580px); justify-self:center; }
.motion-scene { position:relative; width:100%; aspect-ratio:3 / 2; overflow:hidden; isolation:isolate; }
.character-cell { position:absolute; height:88%; aspect-ratio:2 / 3; bottom:5%; overflow:hidden; transform-origin:50% 98%; }
.character-cell[data-character=narrator] { left:15%; }
.character-cell[data-character=listener] { right:15%; }
.character-cell img { position:absolute; inset:0 auto auto 0; display:block; width:400%; height:100%; max-width:none; opacity:0; transform:translateX(-25%); }
.character-cell img.is-active { opacity:1; }
.character-cell canvas { position:absolute; inset:0; display:block; width:100%; height:100%; opacity:0; }
.character-cell.rig-ready canvas { opacity:1; }
.character-cell.rig-ready img.is-active { opacity:0; }
.motion-controls { display:none; justify-content:center; align-items:center; margin-top:8px; min-height:44px; }
.motion-toggle { display:inline-flex; align-items:center; gap:9px; justify-content:center; min-height:44px; padding:9px 12px; border:1px solid var(--line); border-radius:2px; color:var(--muted); background:var(--paper); font:inherit; font-size:13px; line-height:1.6; white-space:nowrap; cursor:pointer; }
.motion-toggle:hover { color:var(--blue); border-color:var(--blue); }
.motion-toggle svg { width:14px; height:14px; flex-shrink:0; fill:currentColor; }
.motion-toggle .resume-icon { display:none; }
.motion-toggle[aria-pressed=true] .pause-icon { display:none; }
.motion-toggle[aria-pressed=true] .resume-icon { display:block; }
.motion-system-note { font-size:var(--small-size); color:var(--muted); line-height:1.8; margin:0; text-align:center; }
.motion-toggle[hidden],.motion-system-note[hidden] { display:none; }
.site-nav { gap:clamp(14px,1.4vw,28px); }
.site-nav .motion-toggle { margin-left:2px; }
.visually-hidden { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }

@keyframes headline-enter {
  from { opacity:1; transform:translateY(10px); }
  to { opacity:1; transform:translateY(0); }
}
html[data-motion=off] [data-reveal] { opacity:1!important; transform:none!important; transition:none!important; }
html[data-motion=off] .character-cell,html[data-motion=off] .home-intro h1 span { animation:none!important; transform:none!important; }
html[data-motion=off] .character-cell img,html[data-motion=off] .reading-progress i { transition:none!important; }
@media (max-width:900px) {
  .motion-controls { display:flex; }
  .site-nav .motion-toggle { align-self:flex-start; margin:12px 0 0; }
}
@media (max-width:600px) {
  .opening-stage { max-width:420px; }
  .motion-scene { aspect-ratio:3 / 2; }
  .character-cell { height:90%; bottom:4%; }
  .character-cell[data-character=narrator] { left:12%; }
  .character-cell[data-character=listener] { right:12%; }
  .motion-controls { margin-top:4px; }
}
@media (prefers-reduced-motion:reduce) {
  .character-cell,.home-intro h1 span { animation:none!important; transform:none!important; }
  .character-cell img { transition:none!important; }
  .character-cell:not(.rig-ready) img { opacity:1!important; }
  [data-reveal] { opacity:1!important; transform:none!important; transition:none!important; }
}

[data-reveal] { opacity:1!important; transform:none!important; transition:none!important; }
.home-intro h1 span { animation:none!important; transform:none!important; }