/* ============================================================
   The Common Time mark.

   Sizes are measured, not chosen: the full mark holds to 48 px,
   muddies at 32 and is unreadable at 16. The top bar therefore
   carries the culled six-ring variant and this file's full mark
   is only ever drawn at 88 px.
   ============================================================ */

.ct-mark {
  display: block;
  width: 5.5rem;   /* 88 px — above the measured 48 px floor */
  height: auto;
  margin: 0 0 1.5rem;
  color: var(--foreground);
  overflow: visible;
}

/*
  4 beats to the bar at 118 BPM — the specification's own vector tempo, not
  the 120 a music program would default to. One bar is 4 x 60000 / 118 =
  2033.898 ms.

  The mark does not bounce. Beats 1-3 press in; beat 4 opens instead, which
  is what makes the bar read as a bar rather than as a metronome. The scale
  of the motion is one pixel and 0.6 %.

  The animation is added by mark.js, never here: without the phase lock in
  that file every reader's mark would run in its own phase, which on a site
  about making independent clients agree on time would be its own joke.
*/
.ct-mark.is-locked .ct-mark-beat {
  transform-box: fill-box;
  transform-origin: center;
  animation: ct-bar 2033.898ms cubic-bezier(0.22, 0.61, 0.36, 1) infinite;
}

@keyframes ct-bar {
  /* beat 1 — downbeat */
  0%   { transform: translateY(0) scale(1); }
  7%   { transform: translateY(1px) scale(0.994); }
  13%  { transform: translateY(0) scale(1); }
  /* beat 2 */
  25%  { transform: translateY(0) scale(1); }
  31%  { transform: translateY(0.65px) scale(0.997); }
  37%  { transform: translateY(0) scale(1); }
  /* beat 3 */
  50%  { transform: translateY(0) scale(1); }
  56%  { transform: translateY(0.65px) scale(0.997); }
  62%  { transform: translateY(0) scale(1); }
  /* beat 4 — the upbeat. Opens rather than presses, so the return to the
     downbeat is perceptible. */
  75%  { transform: translateY(0) scale(1); }
  82%  { transform: translateY(-1px) scale(1.008); }
  90%  { transform: translateY(0) scale(1.002); }
  100% { transform: translateY(0) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .ct-mark.is-locked .ct-mark-beat { animation: none; }
}