/*
   ==========================================================================
    CAROSELLO IMMAGINI FLUIDO PER ELEMENTOR - VERSIONE SEMPLIFICATA
   ==========================================================================
   
    COME USARE QUESTO CODICE:
   1. Copia tutto questo codice nel tuo CSS personalizzato
   2. Nel widget "Carosello Immagini" di Elementor, vai su:
      Avanzato > Classi CSS > aggiungi UNA delle classi disponibili
   
    CLASSI DISPONIBILI (scegli UNA sola classe):
   - scroll-left-logos (per loghi con effetto scala di grigi)
   - scroll-left-custom (per contenuti custom, scroll verso sinistra)
   - scroll-right-custom (per contenuti custom, scroll verso destra)
   
    ESEMPI PRATICI:
   - Per loghi: "scroll-left-logos"
   - Per immagini custom verso sinistra: "scroll-left-custom"
   - Per immagini custom verso destra: "scroll-right-custom"
*/

/* ==========================================================================
    SEZIONE PERSONALIZZABILE - MODIFICA QUESTI VALORI TRAMITE VARIABILI CSS
   ==========================================================================
   Qui trovi tutte le variabili che puoi modificare facilmente senza rompere nulla.
   Cambia i valori a destra dei due punti (es: --nome-variabile: VALORE;).
*/

:root {
  /*  CONFIGURAZIONE LOGHI */
  --logos-duration: 25s; /*  Velocità scorrimento: NUMERO PIÙ ALTO = PIÙ LENTO */
  --logos-spacing: 50px; /*  Spazio tra i loghi (in pixel) */
  --logos-height: 75px; /*  ALTEZZA dei loghi (modifica questo numero) */
  --logos-opacity: 0.6; /* 🌫️ Trasparenza loghi (0.1 = molto trasparente, 1 = opaco) */
  --logos-hover-opacity: 1; /* 🌫️ Trasparenza al passaggio del mouse */

  /* 🏷️ CONFIGURAZIONE CUSTOM */
  --custom-duration: 30s; /* ⏱️ Velocità scorrimento contenuti custom */
  --custom-spacing: 30px; /* 📏 Spazio tra le immagini custom */
  --custom-width: 500px; /* 📐 LARGHEZZA immagini custom */
  --custom-height: 350px; /* 📐 ALTEZZA immagini custom */
  --custom-position: top center; /* 📐 POSIZIONAMENTO immagini custom (es: top center, center center, bottom left) */

  /* 🌫️ CONFIGURAZIONE SFUMATURE LATERALI */
  --fade-size-logos: 85px; /* 📏 Larghezza della sfumatura per loghi */
  --fade-size-custom: 150px; /* 📏 Larghezza della sfumatura per custom */

  /* 🔧 AGGIUSTAMENTO ANIMAZIONE */
  --animation-offset: -15px; /* ➡️ Spostamento iniziale dell'animazione */
}

/* ==========================================================================
   🏗️ STRUTTURA BASE CONDIVISA
   ==========================================================================
*/

.scroll-left-logos .elementor-image-carousel-wrapper,
.scroll-left-custom .elementor-image-carousel-wrapper,
.scroll-right-custom .elementor-image-carousel-wrapper {
  overflow: hidden !important;
  position: relative;
}

.scroll-left-logos .elementor-image-carousel,
.scroll-left-custom .elementor-image-carousel,
.scroll-right-custom .elementor-image-carousel {
  display: flex !important;
  width: max-content !important;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  align-items: center;
}

.scroll-left-logos .swiper-slide,
.scroll-left-custom .swiper-slide,
.scroll-right-custom .swiper-slide {
  width: auto !important;
  flex: 0 0 auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.scroll-left-logos .swiper-slide img,
.scroll-left-logos .swiper-slide-image,
.scroll-left-custom .swiper-slide img,
.scroll-left-custom .swiper-slide-image,
.scroll-right-custom .swiper-slide img,
.scroll-right-custom .swiper-slide-image {
  display: block !important;
  max-width: none !important;
  width: auto !important;
  object-fit: contain !important;
  object-position: center top !important;
}

/* ⏸️ PAUSA SU HOVER */
.scroll-left-logos .elementor-image-carousel:hover,
.scroll-left-custom .elementor-image-carousel:hover,
.scroll-right-custom .elementor-image-carousel:hover {
  animation-play-state: paused;
}

/* ==========================================================================
   🏷️ CONFIGURAZIONE SPECIFICA LOGHI
   ==========================================================================
*/

/* 🌫️ Sfumature laterali per loghi */
.scroll-left-logos .elementor-image-carousel-wrapper {
  -webkit-mask-image: linear-gradient(to right, 
    transparent 0%, 
    black var(--fade-size-logos), 
    black calc(100% - var(--fade-size-logos)), 
    transparent 100%
  );
  mask-image: linear-gradient(to right, 
    transparent 0%, 
    black var(--fade-size-logos), 
    black calc(100% - var(--fade-size-logos)), 
    transparent 100%
  );
}

/* ⚙️ Impostazioni loghi */
.scroll-left-logos .elementor-image-carousel {
  animation-name: scroll-left-animation;
  animation-duration: var(--logos-duration);
}

.scroll-left-logos .swiper-slide {
  margin-right: var(--logos-spacing);
}

.scroll-left-logos .swiper-slide img,
.scroll-left-logos .swiper-slide-image {
  height: var(--logos-height) !important;
  opacity: var(--logos-opacity);
  /* 🎨 Effetto scala di grigi */
  filter: brightness(1.1) contrast(0.8) saturate(0.1) hue-rotate(0deg);
  transition: filter 0.3s ease, opacity 0.3s ease;
}

.scroll-left-logos .swiper-slide img:hover,
.scroll-left-logos .swiper-slide-image:hover {
  opacity: var(--logos-hover-opacity);
  filter: grayscale(0%);
}

/* ==========================================================================
   🏷️ CONFIGURAZIONE SPECIFICA CUSTOM
   ==========================================================================
*/

/* 🌫️ Sfumature laterali per custom */
.scroll-left-custom .elementor-image-carousel-wrapper,
.scroll-right-custom .elementor-image-carousel-wrapper {
  -webkit-mask-image: linear-gradient(to right, 
    transparent 0%, 
    black var(--fade-size-custom), 
    black calc(100% - var(--fade-size-custom)), 
    transparent 100%
  );
  mask-image: linear-gradient(to right, 
    transparent 0%, 
    black var(--fade-size-custom), 
    black calc(100% - var(--fade-size-custom)), 
    transparent 100%
  );
}

/* ⚙️ Impostazioni custom sinistra */
.scroll-left-custom .elementor-image-carousel {
  animation-name: scroll-left-animation;
  animation-duration: var(--custom-duration);
}

.scroll-left-custom .swiper-slide {
  margin-right: var(--custom-spacing);
}

.scroll-left-custom .swiper-slide img,
.scroll-left-custom .swiper-slide-image {
  width: var(--custom-width) !important;
  height: var(--custom-height) !important;
  object-fit: cover !important;
  object-position: var(--custom-position) !important;
  box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

/* ⚙️ Impostazioni custom destra */
.scroll-right-custom .elementor-image-carousel {
  animation-name: scroll-right-animation;
  animation-duration: var(--custom-duration);
}

.scroll-right-custom .swiper-slide {
  margin-right: var(--custom-spacing);
}

.scroll-right-custom .swiper-slide img,
.scroll-right-custom .swiper-slide-image {
  width: var(--custom-width) !important;
  height: var(--custom-height) !important;
  object-fit: cover !important;
  object-position: var(--custom-position) !important;
  box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

/* ==========================================================================
   🎬 ANIMAZIONI
   ==========================================================================
*/

@keyframes scroll-left-animation {
  0% { transform: translateX(var(--animation-offset)); }
  100% { transform: translateX(calc(-50% + var(--animation-offset))); }
}

@keyframes scroll-right-animation {
  0% { transform: translateX(-50%); }
  100% { transform: translateX(0); }
}

/* ==========================================================================
   🛡️ OVERRIDE DI SICUREZZA
   ==========================================================================
*/

.scroll-left-logos .swiper-slide img,
.scroll-left-custom .swiper-slide img,
.scroll-right-custom .swiper-slide img {
  max-width: none !important;
}

.scroll-left-logos .elementor-image img,
.scroll-left-custom .elementor-image img,
.scroll-right-custom .elementor-image img {
  width: auto !important;
  height: auto !important;
}

/*
   ==========================================================================
   📚 GUIDA RAPIDA PER PERSONALIZZARE
   ==========================================================================
   
   🎯 COSA PUOI MODIFICARE FACILMENTE:
   
   Tutte le opzioni modificabili si trovano all'inizio del codice nel blocco `:root { ... }`
   
   🏷️ PER I LOGHI (scroll-left-logos):
   - --logos-duration: velocità scorrimento (es: 30s = più lento)
   - --logos-spacing: spazio tra loghi (es: 60px)
   - --logos-height: altezza loghi (es: 100px)
   - --logos-opacity: trasparenza normale (es: 0.7)
   - --logos-hover-opacity: trasparenza su hover (es: 1)
   
   🏷️ PER I CUSTOM (scroll-left-custom e scroll-right-custom):
   - --custom-duration: velocità scorrimento (es: 40s)
   - --custom-spacing: spazio tra immagini (es: 40px)
   - --custom-width: larghezza immagini (es: 400px)
   - --custom-height: altezza immagini (es: 250px)
   - --custom-position: posizionamento immagini (es: top center, center center, bottom left)
   
   🌫️ PER LE SFUMATURE:
   - --fade-size-logos: larghezza sfumatura loghi (es: 100px)
   - --fade-size-custom: larghezza sfumatura custom (es: 200px)
   
   🔧 PER L'ANIMAZIONE:
   - --animation-offset: aggiustamento fine (es: -20px)
   
   ⚠️ IMPORTANTE: Ricorda di duplicare le immagini nel carosello di Elementor
   per un effetto loop perfetto (es: A,B,C,A,B,C)
*/