/* THE TICKER — its own stylesheet, beside its own script.

   IT LIVED IN components.css AND THAT WAS THE BUG (2026-09-09). The full
   player (/radio/player) is a STANDALONE document: it loads tokens.css and
   radio-player.css and nothing else, on purpose, because it is themed and
   must not inherit the site's look. So it never had .savrok-ticker's height,
   .tick-item's positioning, or the `tick-in` keyframe — the strip was plain
   inline text, the pop-up did not exist, and translating a static element
   did nothing anybody could see. Nothing was wrong with the animation. The
   animation was never there.

   ANY PAGE THAT MOUNTS A STRIP LOADS THIS. The colours are the only thing a
   page overrides (see .rp-ticker in radio-player.css, which wears the skin).
*/
/* THE TICKER (static/js/ticker.js), ported in behaviour from Tangent's
   player (RUI-001 / TICKUI-001). One item at a time: it SLIDES UP into
   view, HOLDS five seconds, then SCROLLS OUT TO THE LEFT — a line that fits
   leaves quickly, a line wider than the box glides at reading speed so the
   overflow is read on the way past rather than lost. Nothing ever moves
   until it has already sat still long enough to read, which is the whole
   difference between this and a marquee. */
.savrok-ticker {
  display: block; position: relative; overflow: hidden;
  /* THE SIZE IS A SETTING (Admin → Radio → Station), handed here as a
     custom property by ticker.js. THE FALLBACKS ARE NOT DECORATION: this
     sheet has to size the strip correctly on its own, because a page whose
     script has not run yet — or never runs — still paints, and a strip with
     no height is the bug this stylesheet was cut out to fix. */
  height: var(--tick-height, 38px);
  background: rgba(255, 255, 255, .03);
  border: 1px solid rgba(201, 162, 39, .18);
  border-radius: 8px;
  margin: 8px 0 4px;
  font: 500 var(--tick-font, 15px)/1 var(--font-body);
  color: var(--ink-dim);
  text-align: left;
}
.savrok-ticker[hidden] { display: none; }
.savrok-ticker .t-label { color: var(--gold-bright); font-weight: 700; }
/* ONE LINE, ALWAYS. `nowrap` on the item and a fixed height on the strip,
   so a long line is a long line rather than a tall one — it can never wrap
   and push the player bar about under somebody's thumb. What does not fit
   is read on the way out instead. */
.tick-item {
  position: absolute; left: 10px; top: 50%;
  white-space: nowrap; transform: translate(0, -50%);
  will-change: transform;
}
.tick-in { animation: tick-in .45s ease-out; }
@keyframes tick-in {
  from { transform: translate(0, 120%); opacity: 0; }
  to   { transform: translate(0, -50%); opacity: 1; }
}
/* THE EXIT IS NOT HERE. It is an inline transition set by ticker.js, because
   a keyframe whose `to` frame reads a custom property — which is how Tangent
   does it — is dropped by Safari, and the line never moves at all. */
@media (prefers-reduced-motion: reduce) {
  .tick-in { animation: none; }
}