/* Autoplay dot navigation + play / pause / replay (js/components/playnav.js; docs/components/playnav.md).
   Apple's timed dot nav, measured from apple.com and rebuilt in our tokens: a 56px pill of 8px dots
   (24px apart), the current dot a 48px capsule whose cream fill runs while its item plays, and a
   56px round button 16px to its right. Load fonts.css and tokens.css first.
   No backdrop blur: over live video or WebGL it would recomposite every frame (CLAUDE.md GPU
   rules), so the glass is a flat tint, a little denser than Apple's blurred one. */
.mc-playnav {
  --mc-playnav-size: 56px;
  --mc-playnav-dot: 8px;
  --mc-playnav-active: 48px;
  --mc-playnav-gap: 16px;
  --mc-playnav-ease: cubic-bezier(.45, 0, .2, 1);
  --mc-playnav-bg: color-mix(in srgb, color-mix(in srgb, var(--color-cream) 15%, var(--color-bg)) 82%, transparent);
  --mc-playnav-bg-hover: color-mix(in srgb, var(--color-cream) 26%, var(--color-bg));
  --mc-playnav-bg-press: color-mix(in srgb, var(--color-cream) 20%, var(--color-bg));
  --mc-playnav-ink: var(--color-cream);
  --mc-playnav-dim: color-mix(in srgb, var(--color-cream) 36%, transparent);
  --mc-playnav-dim-hover: color-mix(in srgb, var(--color-cream) 62%, transparent);
  display: inline-flex;
  align-items: center;
  gap: var(--mc-playnav-gap);
  color: var(--mc-playnav-ink);
  -webkit-tap-highlight-color: transparent;
}
.mc-playnav--light {
  --mc-playnav-bg: color-mix(in srgb, var(--color-cream) 80%, transparent);
  --mc-playnav-bg-hover: color-mix(in srgb, var(--color-cream) 92%, var(--color-bg));
  --mc-playnav-bg-press: color-mix(in srgb, var(--color-cream) 84%, var(--color-bg));
  --mc-playnav-ink: var(--color-bg);
  --mc-playnav-dim: color-mix(in srgb, var(--color-bg) 34%, transparent);
  --mc-playnav-dim-hover: color-mix(in srgb, var(--color-bg) 58%, transparent);
}
.mc-playnav button { margin: 0; padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; }

/* the pill and the round button: their tint is a ::before, so the intro can grow it on its own */
.mc-playnav__dots,
.mc-playnav__play { position: relative; isolation: isolate; height: var(--mc-playnav-size); }
.mc-playnav__dots::before,
.mc-playnav__play::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: calc(var(--mc-playnav-size) / 2); background: var(--mc-playnav-bg); transition: background-color .1s linear; }
.mc-playnav__dots { display: flex; align-items: stretch; padding: 0 16px; }   /* 16 + each slot's 8 = the first dot 24px in */

/* a dot: the button is its whole slot (24 x 56: an easy target); the pip is what shows */
.mc-playnav__dot { position: relative; display: grid; place-items: center; width: calc(var(--mc-playnav-dot) + 16px); transition: width .5s var(--mc-playnav-ease); }
.mc-playnav__dot[aria-current="step"] { width: calc(var(--mc-playnav-active) + 16px); cursor: default; }
.mc-playnav__pip { position: relative; display: block; width: calc(100% - 16px); height: var(--mc-playnav-dot); overflow: hidden; border-radius: 10px; background: var(--mc-playnav-dim); transition: background-color .25s linear; }
/* the fill: a rounded bar slid in from the left, so its leading end stays round (JS sets the
   transform every frame; nothing here transitions it) */
.mc-playnav__fill { position: absolute; inset: 0; border-radius: inherit; background: var(--mc-playnav-ink); transform: translateX(-100%); }
@media (hover: hover) {
  .mc-playnav__dot:not([aria-current="step"]):hover .mc-playnav__pip { background: var(--mc-playnav-dim-hover); }
  .mc-playnav__play:hover::before { background: var(--mc-playnav-bg-hover); }
}
.mc-playnav__play:active::before { background: var(--mc-playnav-bg-press); }
.mc-playnav__dot:focus-visible { outline: none; }
.mc-playnav__dot:focus-visible .mc-playnav__pip { outline: 2px solid var(--mc-playnav-ink); outline-offset: 3px; }
.mc-playnav__play:focus-visible { outline: 2px solid var(--mc-playnav-ink); outline-offset: 3px; border-radius: 50%; }

/* the button: pause while playing, play while paused, replay at the end */
.mc-playnav__play { display: grid; place-items: center; width: var(--mc-playnav-size); border-radius: 50%; }
.mc-playnav__icons { display: grid; width: 100%; height: 100%; }
.mc-playnav__icon { grid-area: 1 / 1; width: 100%; height: 100%; fill: currentColor; opacity: 0; transition: opacity .12s linear; }
.mc-playnav[data-state="playing"] .mc-playnav__icon--pause,
.mc-playnav[data-state="paused"] .mc-playnav__icon--play,
.mc-playnav[data-state="ended"] .mc-playnav__icon--replay { opacity: 1; }

/* The intro (show() adds .is-in), Apple's timing: a dot of glass pops up and widens into the pill
   while the button rolls out of it to the right; the dots pop in at .74 s, the icon at .94 s.
   hide() fades it all out quickly. */
.mc-playnav { transition: opacity .2s linear; }
.mc-playnav:not(.is-in) { opacity: 0; pointer-events: none; }
.mc-playnav:not(.is-in) .mc-playnav__dots::before { clip-path: inset(0 calc(50% - var(--mc-playnav-size) / 2) round calc(var(--mc-playnav-size) / 2)); transform: scale(.01); }
.mc-playnav:not(.is-in) .mc-playnav__play::before { transform: translateX(calc(-1 * var(--mc-playnav-reach, 100px))) scale(.6); opacity: 0; }
.mc-playnav:not(.is-in) .mc-playnav__pip,
.mc-playnav:not(.is-in) .mc-playnav__icons { opacity: 0; transform: scale(.5); }
.mc-playnav.is-in { transition: opacity .12s linear; }
.mc-playnav.is-in .mc-playnav__dots::before { clip-path: inset(0 0 round calc(var(--mc-playnav-size) / 2)); transform: none; transition: transform .3s cubic-bezier(.3, 1.35, .6, 1), clip-path .45s var(--mc-playnav-ease) .28s, background-color .1s linear; }
.mc-playnav.is-in .mc-playnav__play::before { transform: none; opacity: 1; transition: transform .45s var(--mc-playnav-ease) .28s, opacity .12s linear .28s, background-color .1s linear; }
.mc-playnav.is-in .mc-playnav__pip { transition: opacity .1s ease-in .74s, transform .2s ease-out .74s, background-color .25s linear; }
.mc-playnav.is-in .mc-playnav__icons { transition: opacity .1s ease-in .94s, transform .2s ease-out .94s; }

@media (prefers-reduced-motion: reduce) {
  .mc-playnav,
  .mc-playnav *,
  .mc-playnav *::before { transition: none !important; }
}