/*
 * Cinta de logos de clients (global-templates/customers-component.php).
 * Marquesina purament CSS: la plantilla imprimeix la llista de logos dues
 * vegades seguides i l'animació desplaça el track un 50% de manera infinita,
 * així es mou de dreta a esquerra tota l'estona sense dependre de Swiper/JS.
 */

section#customers {
  overflow: hidden;
  padding: 32px 0;
  background: var(--color-ribbon-gradient);
}

section#customers .customers-ribbon {
  overflow: hidden;
}

section#customers .customers-ribbon-track {
  display: flex;
  align-items: center;
  width: max-content;
  gap: 64px;
  padding: 0 32px;
  animation: matteria-customers-scroll 60s linear infinite;
}

section#customers .customers-ribbon-item {
  flex: 0 0 auto;
}

section#customers .customers-ribbon-item img {
  height: 62px;
  width: auto;
  object-fit: contain;
  display: block;
  filter: brightness(0) invert(1);
}
@media screen and (min-width: 992px) {
  section#customers .customers-ribbon-item img {
    height: 100px;
  }
}

@keyframes matteria-customers-scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

@media (prefers-reduced-motion: reduce) {
  section#customers .customers-ribbon-track {
    animation: none;
  }
}