/* Config rapida */
:root {
  --gap: 3rem;
  /* spazio orizzontale tra loghi */
  --logo-h: 100px;
  /* altezza loghi (responsive) */
  --fade: 48px;
  /* sfumatura ai bordi (opzionale) */
}

/* Contenitore */
.logo-scroller {
  overflow: hidden;
  width: 100%;
  height: 15rem;
  padding: 1rem 0;
  background-image: #ffffff;
  display: flex;
  align-items: center;
}

/* Pista di scorrimento con sfumatura laterale (estetica) */
.scroller {
  --duration: 40s;
  /* verrà sovrascritta da JS */
  mask-image: linear-gradient(to right, transparent, #000 var(--fade), #000 calc(100% - var(--fade)), transparent);

  /*per iphone*/
  -webkit-mask-image: linear-gradient(
    to right,
    transparent,
    #000 var(--fade),
    #000 calc(100% - var(--fade)),
    transparent
  );
}

/* Riga loghi */
.scroller__inner {
  display: flex;
  align-items: center;
  gap: var(--gap);
  will-change: transform;
}

/* Animazione (attivata da JS con la classe .is-animating) */
.scroller.is-animating .scroller__inner {
  animation: scroll var(--duration) linear infinite;
}

@keyframes scroll {
  to {
    transform: translateX(-50%);
  }
}

/* Loghi */
.scroller__inner img {
  /*height: var(--logo-h);*/
  height: 8rem;
  width: auto;
  flex: 0 0 auto;
  object-fit: contain;
  /*user-drag: none;*/
  -webkit-user-drag: none;
  pointer-events: none;
  filter: grayscale(0.1);
  opacity: 0.95;
}

/* Pausa al passaggio del mouse
.scroller:hover .scroller__inner {
  animation-play-state: paused;
} */

@media (hover: hover) and (pointer: fine) {
  .scroller:hover .scroller__inner {
    animation-play-state: paused;
  }
}

/* Accessibilità: riduci movimento se preferito dall'utente */
@media (prefers-reduced-motion: reduce) {
  .scroller.is-animating .scroller__inner {
    animation: none;
    transform: none;
  }
}


/*-----MEDIA QUERY-----*/


@media (max-width: 992px) {

  /* Loghi */
  .scroller__inner img {
    height: 5rem;
    width: auto;
  }

   .scroller {
    --duration: 28s;
  }

}