/* ============================================================================================== */
/* 48 · MOTION                                                                                    */
/* ============================================================================================== */
/*
 * ── THE RULE THIS AMENDS, AND WHAT SURVIVES OF IT ────────────────────────────────────────────
 *
 * Until now the design banned motion outright, and spec/design_system_spec.rb asserted no
 * @keyframes existed anywhere. The argument was: an instrument does not animate. A number that
 * fades in is a number you cannot screenshot at a known moment, and motion on a page of
 * measurements reads as the measurement moving.
 *
 * That argument is still right, and it is why this file is two keyframes rather than a motion
 * system. THE RENDERED DIGITS NEVER MOVE. sw-flash animates a cell's background and nothing else;
 * sw-pulse animates the opacity of a 6px swatch that was never a measurement. Neither touches
 * transform, and neither touches the text. The spec now asserts exactly that — which property each
 * keyframe is allowed to name — so the ban has been replaced by something tighter than itself
 * rather than loosened. See docs/product/DECISIONS.md.
 *
 * Everything here is off under prefers-reduced-motion, and the flash leaves a STATIC mark instead.
 * A reader who has asked for no motion still gets told what changed; they just are not shown it
 * moving. Dropping the signal entirely would make the accessible path the less informative one.
 */

/* ------------------------------------------------------------------- The change flash --- */
/*
 * A cell whose value just moved, tinted once and then left alone.
 *
 * NEUTRAL, NEVER A SIGNAL HUE. --live, --frozen, --breach and --inband each mean a feed state, and
 * a change is not a state: a value can move without the feed's condition changing at all, and a
 * feed can freeze without any value moving. Tinting a changed cell amber would say the second thing
 * while meaning the first.
 *
 * TWO BEATS, NOT A FADE. A single fade-out is easy to miss in peripheral vision on a table of
 * thirteen rows, which is exactly where it needs to be caught: a reader watching one ticker should
 * notice another one move. Two beats read as a deliberate signal rather than as a rendering artefact.
 *
 * And then it stops. A repeating blink on a number would be the thing the old rule was written to
 * stop — permanent motion on a measurement, which the eye reads as the measurement itself being
 * unstable, and which after ten minutes on a second monitor is just noise to be tuned out.
 */
@keyframes sw-flash {
  0%   { background: color-mix(in oklch, var(--fg) 16%, transparent); }
  30%  { background: color-mix(in oklch, var(--fg) 0%, transparent); }
  48%  { background: color-mix(in oklch, var(--fg) 16%, transparent); }
  100% { background: color-mix(in oklch, var(--fg) 0%, transparent); }
}

[data-flash].is-changed {
  animation: sw-flash 1100ms ease-out 1;
}

/* ------------------------------------------------------------------------- The pulse --- */
/*
 * ── WHY ONLY ON A FRESH FEED ─────────────────────────────────────────────────────────────────
 *
 * The swatch means "this feed is republishing". A stalling or stale feed's marker holding perfectly
 * still IS the thesis of this product, and pulsing it would say the opposite of what the page is
 * measuring — motion where the whole finding is that there is none.
 *
 * Paused is never touched either, for the same reason it is never touched in
 * clock_bank_controller.js: it comes from the registry and no amount of elapsed time changes it.
 */
@keyframes sw-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.35; }
}

.clock--fresh .clock__mark {
  animation: sw-pulse 2s ease-in-out infinite;
}

/* --------------------------------------------------------------------- Reduced motion --- */
@media (prefers-reduced-motion: reduce) {
  [data-flash].is-changed {
    /* The same fact, held still: the tint simply does not fade, and the next replacement clears it.
       Not a border or an inset shadow — the design has exactly one radius and no shadows at all,
       and a changed cell is not a reason to be the exception. */
    animation: none;
    background: color-mix(in oklch, var(--fg) 8%, transparent);
  }

  .clock--fresh .clock__mark {
    animation: none;
  }
}