/**
 * Generic infinite auto-scroll ("marquee") for a single row of items —
 * used on the homepage by the "Who we work with" industry pills (right to
 * left) and the "Companies we've supported" logo wall (left to right).
 *
 * The row's own items are duplicated once in the markup (the clones carry
 * aria-hidden) so the loop is seamless: each direction's keyframes travel
 * exactly 50% of the track, i.e. exactly one full copy, landing on an
 * identical second copy. This file only supplies the clipping box and the
 * two directions — what sits inside keeps whatever sizing its own
 * stylesheet already gives it (styles.css for .pills, clients.css for
 * .client-wall).
 */

.marquee {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 32px, #000 calc(100% - 32px), transparent);
          mask-image: linear-gradient(to right, transparent, #000 32px, #000 calc(100% - 32px), transparent);
}

/* Pills are flex-wrap by default (styles.css) for their non-marquee uses
   (e.g. shop.html) — inside a marquee they need to run in one unbroken row.
   Two classes beats .pills's one, so this wins regardless of link order. */
.marquee .pills {
  flex-wrap: nowrap;
  width: max-content;
}

.marquee__track--rtl,
.marquee__track--ltr {
  will-change: transform;
}

.marquee__track--rtl { animation: marquee-rtl 34s linear infinite; }
.marquee__track--ltr { animation: marquee-ltr 38s linear infinite; }

/* Right to left: the row moves left, new items enter from the right. */
@keyframes marquee-rtl {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* Left to right: the row moves right, new items enter from the left. */
@keyframes marquee-ltr {
  from { transform: translateX(-50%); }
  to   { transform: translateX(0); }
}

.marquee:hover .marquee__track--rtl,
.marquee:hover .marquee__track--ltr {
  animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
  .marquee__track--rtl,
  .marquee__track--ltr {
    animation: none;
  }
}