/* ring: commons
 * seed: inherit (loop velocity is distance-based; pause/resume transition is snap 180)
 * still: ./still.md
 * reduced: replace (paused, unwrapped, full phrase readable — reduced.css)
 * when-not: hero slot (C-INFINITE-LOGO forbidden as hero), payload numbers, more than one per page
 *
 * C-MARQUEE — pause control REQUIRED (WCAG 2.2.2: auto-motion >5s must be pausable).
 * index.mjs refuses to start the loop if [data-c-marquee-pause] is absent.
 */

[data-c-marquee] {
  overflow: clip;
  white-space: nowrap;
  display: flex;
}

[data-c-marquee] .c-marquee-track {
  display: inline-flex;
  gap: var(--c-marquee-gap, 48px);
  padding-right: var(--c-marquee-gap, 48px);
  animation: c-marquee-slide var(--c-marquee-period, 24s) linear infinite;
}

[data-c-marquee][data-paused] .c-marquee-track {
  animation-play-state: paused;
}

[data-c-marquee]:hover .c-marquee-track,
[data-c-marquee]:focus-within .c-marquee-track {
  animation-play-state: paused;
}

@keyframes c-marquee-slide {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-100%, 0, 0); }
}

[data-c-marquee-pause] {
  transition: opacity var(--ss-snap-duration, 180ms) var(--ss-snap-easing, cubic-bezier(0.32, 0, 0.09, 1));
}