/*
 * 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.
 *
 * El component no te "temes": el fons es sempre el degradat teal d'aqui.
 * L'unica variacio possible es QUIN fitxer de logo es carrega (estandard o
 * "variante blanca", triat amb un checkbox al wp-admin - veure
 * customers-component.php): les variants blanques arriben amb la classe
 * .logo-white i es mostren sense el filtre blanquejador (regla al final).
 *
 * Estil "glassmorphism": el fons es construeix en dues capes de pseudo-element
 * dins del propi section (isolation: isolate + z-index negatius, per no caure
 * darrere de la pagina):
 *   ::before (z -2) - capa de color: el degradat teal historic
 *     (--color-ribbon-gradient) amb taques radials mes saturades (cian, llima,
 *     maragda de la paleta) que donen "materia" perque el blur tingui alguna
 *     cosa a difuminar.
 *   ::after (z -1) - el vidre: backdrop-filter blur+saturate sobre la capa de
 *     color, vel blanc translucid i vores/reflex superior que fan la vora del
 *     vidre. Els logos queden per sobre (flux normal) i es mantenen nitids.
 * El vel es mante prou tenyit de teal perque els logos blancs (filtrats o
 * .logo-white) no perdin contrast.
 */

section#customers {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 32px 0;
}

/* Capa de color sota el vidre: degradat teal historic + taques saturades */
section#customers::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -2;
  background:

    var(--color-bg-gradient);
}

/* El vidre esmerilat: difumina la capa de color i posa el vel i les vores */
section#customers::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: inset 0 2px 12px rgba(255, 255, 255, 0.12);
}

section#customers .customers-bg {
  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 {
  /* Interpolació contínua entre els dos valors del disseny (62px a mòbil,
     100px a l'amplada de referència del mock) en comptes del salt de 38px que
     hi havia just a 992px, on la cinta creixia de cop mentre el contingut de
     la resta de la pàgina s'encongia. Recta per (768, 62) i (1600, 100). */
  height: clamp(62px, 4.57vw + 26.9px, 100px);
  width: auto;
  object-fit: contain;
  display: block;
  filter: brightness(0) invert(1);
}

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

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

/*
 * "Variante blanca" pujada expressament (sub-camp logo_white del repeater
 * "Clientes", triada amb el checkbox "¿Usar variante de logos en blanco?" -
 * veure customers-component.php): es mostra tal qual, SENSE el filtre
 * blanquejador de dalt - sobre un fitxer ja blanc, brightness(0.5) invert(1)
 * el tornaria gris. Els logos estandard de la mateixa cinta conserven el
 * filtre, aixi les files sense variant blanca segueixen quedant blanques.
 */
section#customers .customers-ribbon-item img.logo-white {
  filter: none;
}