/*
  Logo-strip marquee. The module has a fixed natural width (sum of the
  logos' real pixel sizes + the 63px gaps between them) — see
  data-logo-strip-width in the markup. js/main.js compares that against
  the available container width and switches between a static, centered
  row (fits) and this seamless right-to-left roller (doesn't fit).

  The rolling track renders the logo set twice back to back; animating
  from translateX(0) to translateX(-50%) moves it by exactly one set's
  width, so the loop point is invisible.
*/

@keyframes logo-marquee {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

[data-logo-track] {
  animation: logo-marquee 35s linear infinite;
}

[data-logo-marquee]:hover [data-logo-track] {
  animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
  [data-logo-track] {
    animation: none;
  }
}