/* ============================================================
 * player.css — the controls under every animation on the site:
 * Play from the start, Pause, and (where the animation has an answer to
 * reach) Skip to the answer. CSS only.
 *
 * Markup: a .demo-controls holding hidden inputs and the labels that are
 * the buttons. Play from the start and Skip to the answer are one radio
 * group (.demo-jump, .is-start-a / .is-start-b / .is-end-a / .is-end-b).
 * The animation's own CSS runs each animation's twin while Start B or End A
 * is picked, and starts it at its skip point while End A or End B is.
 * Pause is a checkbox (.demo-pause) that the animation's CSS turns into
 * animation-play-state: paused. Every radio
 * carries an aria-label, since only one label of each pair shows.
 * Skip to the answer always lands on the finished answer, every check shown,
 * never just before it: pressed again at the end, nothing visibly changes.
 * Under reduced motion the animations stand still and the controls leave.
 * Pages link this in the body, beside the controls, so no first paint waits for it.
 * ============================================================ */
.demo-controls { position: relative; display: flex; justify-content: center; gap: var(--space-12); }
.demo-jump,
.demo-pause {
  position: absolute;
  inset: 0;
  inline-size: 1px;
  block-size: 1px;
  opacity: 0;
  pointer-events: none;
}
.demo-control {
  display: grid;
  place-items: center;
  inline-size: 2.75rem;
  block-size: 2.75rem;
  border: 1px solid var(--color-stone-20);
  border-radius: 50%;
  background: var(--color-paper);
  color: var(--color-royal);
  cursor: pointer;
  transition: border-color var(--duration-instant) var(--ease-standard),
              color var(--duration-instant) var(--ease-standard);
}
.demo-control:hover { border-color: var(--color-royal); color: var(--color-navy); }
.demo-control svg { inline-size: 1rem; block-size: 1rem; }
.demo-when-paused { translate: 1px 0; }   /* the triangle's weight sits left of its box */
.demo-pause:focus-visible + .demo-control,
.demo-controls:has(.demo-jump:focus-visible) :is(.is-restart-a, .is-restart-b, .is-skip-a, .is-skip-b) { outline: 2px solid var(--color-royal); outline-offset: 2px; }
/* Each animation has one twin. The twin runs while Start B or End A is
   picked; the original while Start A or End B is. Of each pair of buttons
   the one that shows picks a radio that swaps them, so every press starts
   the animation again: at 0 for Play from the start, at the skip point for
   Skip to the answer. */
.demo-controls:has(.is-start-b:checked, .is-end-a:checked) :is(.is-restart-a, .is-skip-a),
.demo-controls:not(:has(.is-start-b:checked, .is-end-a:checked)) :is(.is-restart-b, .is-skip-b) { display: none; }
.demo-control svg.is-forward { transform: scaleX(-1); }
.demo-when-paused { display: none; }
.demo-pause:checked + .demo-control .demo-when-playing { display: none; }
.demo-pause:checked + .demo-control .demo-when-paused { display: block; }
.demo-sr {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
@media (prefers-reduced-motion: reduce) {
  .demo-controls { display: none; }
}