@charset "UTF-8";
/* ==========================================================================
   FARTEC — Carosello della testata (solo index3.html)

   Effetto volutamente sobrio: dissolvenza incrociata fra le immagini, un
   avvicinamento lentissimo e continuo, e il testo che rientra sfumando dal
   basso a ogni cambio. Niente scorrimenti laterali, niente rimbalzi: la
   testata deve far leggere il messaggio, non far notare la transizione.

   Tutte le regole stanno sotto .hero-slider, così la testata della home
   attuale non è raggiungibile da questo file.
   ========================================================================== */

/* Lo sfondo unico di style.css lascia il posto ai livelli, uno per slide. */
.hero.hero-slider { background-image: none; background-color: #0b0f18; }

.hero-slider .hero-slides { position: absolute; inset: 0; z-index: 0; }

.hero-slider .hero-slide {
  position: absolute; inset: 0;
  background-size: cover; background-position: 50% 32%;
  opacity: 0; transition: opacity 1.1s var(--ease);
  /* L'avvicinamento gira su TUTTE le slide, sempre, invece di essere acceso
     dalla classe della slide visibile: se partisse e si fermasse col cambio,
     la slide in uscita tornerebbe di scatto alla scala iniziale proprio
     mentre è ancora mezza visibile. Così non c'è nessuno scatto, e le slide
     sfasate fra loro rendono il movimento meno meccanico. */
  animation: hero-zoom 22s ease-in-out infinite alternate;
}
.hero-slider .hero-slide.is-active { opacity: 1; }

@keyframes hero-zoom {
  from { transform: scale(1); }
  to   { transform: scale(1.07); }
}

/* Il velo scuro prima era cotto dentro il background dell'hero. Ora è un
   livello suo sopra le immagini: ogni foto resta pulita e il velo non si
   muove con l'avvicinamento. */
.hero-slider .hero-slides::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(9,14,26,.58), rgba(9,14,26,.44) 38%, rgba(9,14,26,.76));
}

/* Il testo esce e rientra a ogni cambio, sfumando dal basso di pochi pixel. */
.hero-slider .hero-content {
  transition: opacity .38s var(--ease), transform .38s var(--ease);
}
.hero-slider .hero-content.is-swapping { opacity: 0; transform: translateY(10px); }

/* Pallini: trattini sottili, discreti finché non li si cerca. */
.hero-slider .hero-dots {
  position: absolute; left: 0; right: 0; bottom: 30px; z-index: 3;
  display: flex; gap: 10px; justify-content: center;
}
.hero-slider .hero-dots button {
  width: 34px; height: 4px; padding: 0; border: none; border-radius: 980px;
  background: rgba(255, 255, 255, .34); cursor: pointer;
  transition: background .3s var(--ease);
}
.hero-slider .hero-dots button:hover { background: rgba(255, 255, 255, .6); }
.hero-slider .hero-dots button[aria-current="true"] { background: #fff; }
.hero-slider .hero-dots button:focus-visible { outline: 2px solid #fff; outline-offset: 5px; }

/* Chi ha chiesto meno movimento non ne riceve: niente avvicinamento, niente
   dissolvenza, niente spostamento del testo. L'avanzamento automatico lo
   spegne site.js, così restano solo i pallini e il comando è tutto suo. */
@media (prefers-reduced-motion: reduce) {
  .hero-slider .hero-slide { transition: none; animation: none; }
  .hero-slider .hero-content { transition: none; }
  .hero-slider .hero-content.is-swapping { opacity: 1; transform: none; }
}

@media (max-width: 560px) {
  .hero-slider .hero-dots { bottom: 20px; }
  .hero-slider .hero-dots button { width: 26px; }
}