/* OSTC motion hooks: the CSS that observer.js and pause.js drive (spec 4.8, 6.1, 7, R9, R11, R15 c, R17).
   Contract: /shared/README-scripts.md. Only transform and opacity animate; every duration is a token from tokens.css (R17 b). */

/* Chapter bar (phones): observer.js toggles .is-hidden. Ship the bar with class="is-hidden" so it never flashes. It comes and goes by opacity and an 8 px
   rise (160 ms in, 120 ms out, R17 b), and visibility steps in 0 s at the end of the fade, so a hidden bar takes no focus and nothing but opacity
   and transform animates. It is fixed, so it never pushes the page (R16 d 3). It is a position mark: under reduced motion it changes without sliding. */
#chapter-bar { opacity: 1; transform: none; visibility: visible; transition: opacity var(--t-panel-in) var(--ease-out), transform var(--t-panel-in) var(--ease-out), visibility 0s; }
#chapter-bar.is-hidden { opacity: 0; transform: translateY(8px); visibility: hidden; transition: opacity var(--t-panel-out) var(--ease-out), transform var(--t-panel-out) var(--ease-out), visibility 0s var(--t-panel-out); }
@media (prefers-reduced-motion: reduce) {
  #chapter-bar, #chapter-bar.is-hidden { transition-property: visibility; transform: none; }
}

/* Progress line: [data-progress] is the fill. A scroll-driven scaleX where supported (a position mark, it follows the scroll like a scrollbar);
   otherwise observer.js steps --progress (0 to 1) per chapter. */
[data-progress] {
  transform: scaleX(var(--progress, 0));
  transform-origin: 0 50%;
  transition: transform var(--t-light) var(--ease);
}
@supports (animation-timeline: view()) {
  [data-progress] { transition: none; animation: ostc-progress linear both; animation-timeline: scroll(root); }
}
@keyframes ostc-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) {
  [data-progress] { transition: none; }
}

/* Draw-on (R11, R17 c): a clipPath rectangle moves with transform. The finished state is the default, with no script, under reduced motion, Pause,
   Save-Data and a slow connection. observer.js sets --draw from data-draw-on (ms, within 900), adds .is-armed, and adds .is-drawn only after every plate
   it names has decoded and the picture was ready in its window; a plate that arrives after its window is shown finished with .is-late (a 200 ms fade);
   a plate that fails is shown as its paper (.is-failed). An entrance that is done (.is-done: Pause, a change of reduced motion, a stored key) is never armed or restarted: every rule that
   starts one says :not(.is-done), so Pause and then Play cannot hide a plate that was still waiting or play one again. Markup: <svg id="a" data-draw-on="660"><clipPath id="c"><rect class="draw-clip" .../></clipPath><g clip-path="url(#c)">...</g></svg> */
@media (prefers-reduced-motion: no-preference) {
  html.motion-ok:not(.motion-paused) [data-draw-on].is-armed:not(.is-done) .draw-clip {
    transform: translateX(-101%);
    transition: transform var(--draw, 600ms) var(--ease);
  }
  html.motion-ok:not(.motion-paused) [data-draw-on].is-armed.is-drawn:not(.is-done) .draw-clip { transform: none; }
  html.motion-ok:not(.motion-paused) :is([data-draw-on], img).is-late { animation: ostc-late var(--t-late) ease-out both; }
}
@keyframes ostc-late { from { opacity: 0; } }
[data-draw-on].is-failed { visibility: hidden; }
.draw-clip { transform-box: fill-box; }

/* Pause motion control (4.8). The mark reads html.motion-paused so it is right on first paint. A 44 px target with the control corners (R15 c). */
.pause-motion {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  box-sizing: border-box;
  min-height: 44px;
  padding: 0 14px;
  font: 700 16px/1.3 var(--font-body, Lato, "Lato Fallback", system-ui, sans-serif);
  letter-spacing: 0.01em;
  color: var(--ink, #f2ece0);
  background: transparent;
  border: 1px solid rgb(242 236 224 / 0.32);
  border-radius: var(--radius-control, 10px);
  cursor: pointer;
  transition: border-color var(--t-hover, 140ms), color var(--t-hover, 140ms);
}
@media (hover: hover) { .pause-motion:hover { border-color: rgb(242 236 224 / 0.7); color: var(--light-core, #fff3d6); } }
.pause-motion:focus-visible { outline: 2px solid var(--light-core, #fff3d6); outline-offset: 3px; }
.pause-motion__mark {
  flex: none;
  box-sizing: border-box;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--light, #f5c542);
  box-shadow: 0 0 8px 2px rgb(245 197 66 / 0.55);
}
html.motion-paused .pause-motion__mark { background: transparent; box-shadow: none; border: 1px solid var(--light, #f5c542); }
@media (forced-colors: active) {
  .pause-motion__mark { background: Highlight; box-shadow: none; }
  html.motion-paused .pause-motion__mark { background: transparent; border-color: Highlight; }
}