/* =============================================================
   BARRA CLIENTI — componente unico del sito (.cl-ticker).
   Nata sulle pagine servizio (era copiata sei volte come .pel-ticker,
   .pq-ticker, .msm-ticker, .sw-ticker, .rv-ticker, .cs-ticker, più
   .hm-ticker in home): dal 2026-09-21 vive solo qui, con lo script
   /assets/js/barra-clienti.js. Deve restare IDENTICA ovunque: niente
   varianti per pagina.

   Nastro continuo alla maniera dei tabelloni di Borsa: il moto è
   autonomo (nessun legame con lo scroll), lineare e senza pause.
   La riga originale detta il passo del ciclo; le copie servono
   solo a coprire la finestra e sono nascoste alle tecnologie
   assistive. Con "movimento ridotto" il nastro non parte: i sei
   loghi restano fermi e leggibili.
   ============================================================= */
.cl-ticker {
  --cl-ticker-gap: clamp(38px, 5.5vw, 76px);
  --cl-ticker-shift: 0px; /* larghezza reale della riga, misurata da JS */
  --cl-ticker-dur: 60s;   /* = shift / velocità, così il passo non cambia */
  --cl-ticker-bar: #f5f5f3; /* bianco appena sporco, neutro: niente azzurrino */
  padding-block: clamp(24px, 3vw, 34px) clamp(26px, 3.4vw, 38px);
  background: #ffffff; /* stesso bianco della pagina, senza filetto sopra */
}

/* la colonna dell'etichetta: la stessa delle pagine servizio */
.cl-ticker__head {
  width: min(100% - 40px, var(--max-width, 1200px));
  margin-inline: auto;
}

/* l'etichetta sta sopra la barra, fuori dal nastro */
.cl-ticker__label {
  margin: 0 0 clamp(12px, 1.8vw, 18px);
  color: var(--corp-muted, #64748b);
  font-size: var(--fs-caption);
}

/* la barra chiara: dentro ci sono soltanto i loghi che scorrono.
   Taglia il nastro, così la pagina non scorre in orizzontale. */
.cl-ticker__viewport {
  position: relative;
  overflow: hidden;
  padding-block: clamp(12px, 1.6vw, 18px);
  background: var(--cl-ticker-bar);
  border-block: 1px solid rgba(15, 23, 42, 0.1);
}
/* i bordi sfumano con due velature ferme sopra il nastro: una mask sul livello
   in movimento lo fa ricalcolare a ogni fotogramma (in WebKit può sfarfallare). */
.cl-ticker__viewport::before,
.cl-ticker__viewport::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 1;
  width: clamp(26px, 5vw, 84px);
  pointer-events: none;
}
.cl-ticker__viewport::before {
  left: 0;
  background: linear-gradient(90deg, var(--cl-ticker-bar), rgba(245, 245, 243, 0));
}
.cl-ticker__viewport::after {
  right: 0;
  background: linear-gradient(270deg, var(--cl-ticker-bar), rgba(245, 245, 243, 0));
}

/* il nastro porta lo stesso fondo della barra: è un gruppo isolato (si trasla),
   quindi il multiply dei loghi si fonde con questo colore e non col vuoto */
.cl-ticker__track {
  display: flex;
  width: max-content;
  background: var(--cl-ticker-bar);
}
.cl-ticker.is-live .cl-ticker__track {
  animation: cl-ticker-run var(--cl-ticker-dur) linear infinite;
  will-change: transform;
  backface-visibility: hidden;
}

/* traslazione esatta di una riga: il punto di ripartenza coincide */
@keyframes cl-ticker-run {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(calc(var(--cl-ticker-shift) * -1), 0, 0); }
}

.cl-ticker__row {
  flex: none;
  margin: 0;
  /* il padding chiude il passo: stessa distanza anche fra una copia e l'altra */
  padding: 0 var(--cl-ticker-gap) 0 0;
  list-style: none;
  display: flex;
  align-items: center;
  gap: var(--cl-ticker-gap);
}
.cl-ticker__row li {
  flex: none;
  display: flex;
  align-items: center;
  height: clamp(36px, 5vw, 46px);
}

/* altezza dichiarata + larghezza automatica: proporzioni intatte, nessun salto */
.cl-ticker__logo {
  display: block;
  width: auto;
  max-width: none;
  height: var(--cl-logo-h, 26px);
  opacity: 0.6;
  filter: grayscale(1);
  /* il PNG di Sealed Air ha il fondo bianco pieno: sulla barra sporca
     sarebbe una piastrina chiara, così il bianco sparisce nel fondo */
  mix-blend-mode: multiply;
}
/* altezze calibrate una per una: pesi ottici confrontabili, non misure uguali */
.cl-ticker__logo--prysmian { --cl-logo-h: clamp(22px, 3vw, 27px); }
.cl-ticker__logo--barilla { --cl-logo-h: clamp(27px, 3.8vw, 34px); }
.cl-ticker__logo--siemens { --cl-logo-h: clamp(17px, 2.4vw, 21px); }
.cl-ticker__logo--vibram { --cl-logo-h: clamp(30px, 4.2vw, 38px); }
.cl-ticker__logo--pirelli { --cl-logo-h: clamp(23px, 3.2vw, 29px); }
.cl-ticker__logo--sealedair { --cl-logo-h: clamp(21px, 2.9vw, 26px); }

/* movimento ridotto: niente nastro, i sei loghi restano tutti leggibili */
@media (prefers-reduced-motion: reduce) {
  .cl-ticker__viewport::before,
  .cl-ticker__viewport::after { display: none; }
  .cl-ticker__track { width: 100%; animation: none; }
  .cl-ticker__row {
    width: 100%;
    padding-right: 0;
    flex-wrap: wrap;
    justify-content: center;
    row-gap: 16px;
  }
}