/* ─────────────────────────────────────────────
   Convert Marquee — an auto-scrolling strip (logos, labels, ticker).
   Duplicate the items in markup so the -50% loop is seamless.
   Use with tokens.css.
   ───────────────────────────────────────────── */

.marquee {
  width: 100%;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
}
.marquee__row {
  display: flex;
  align-items: center;
  gap: 48px;
  width: max-content;
  animation: marquee-scroll 38s linear infinite;
}
.marquee:hover .marquee__row { animation-play-state: paused; }
.marquee__item { flex: none; display: inline-flex; align-items: center; color: var(--color-text-secondary); }
@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .marquee__row { animation: none; transform: none; }
}