/* fx.css · cinematic/ticker, a band of giant words gliding sideways · owner: Lizzy East · all rights reserved */

/* The moving band is a decorative copy (aria-hidden) of a real list beside it. It
   stops under the pointer and on focus, and its pause button stops it for good. */
[data-fx~="cinematic/ticker"] { overflow: clip; min-width: 0; max-width: 100%; }
[data-fx~="cinematic/ticker"] > [data-fx-ambient] {
  display: flex;
  width: max-content;
  font: italic 400 clamp(3rem, 9vw, 7.5rem) / 1.1 var(--fx-ticker-font, Georgia, serif);
  letter-spacing: -0.03em;
  white-space: nowrap;
}
[data-fx~="cinematic/ticker"] > [data-fx-ambient] > span { padding-right: 0.4em; }
html.fx-armed [data-fx~="cinematic/ticker"] > [data-fx-ambient] {
  animation: fx-ticker var(--fx-ticker-dur, 30s) linear infinite;
}
[data-fx~="cinematic/ticker"]:hover > [data-fx-ambient],
[data-fx~="cinematic/ticker"]:focus-within > [data-fx-ambient] {
  animation-play-state: paused;
}
@keyframes fx-ticker { to { translate: -50% 0; } }