/* !---------
! ELEMENTI ANIMAZIONI
! ---------*/
.layer {
  position: absolute;
  top: 0;
  left: 0;
  transform: translateX(0);
  width: 100%;
  height: 100%;
  z-index: 2;
  transition: transform 0.64s ease-in-out;
}
.layer.in-view {
  transform: translateX(-100%);
}
.layer.layer.layer-utd {
  transform: translateY(0);
}
.layer.layer-utd.in-view {
  transform: translateY(100%);
}
.animate-heading {
  position: relative;
  overflow: hidden;
}
.animate-heading :where(h1, h2, h3, h4, h5, h6) {
  opacity: 0;
  transform: translateY(30px);
  transition:
    opacity 0.6s ease-out,
    transform 0.6s ease-out;
  transition-delay: 0.34s;
}
.animate-heading.in-view :where(h1, h2, h3, h4, h5, h6) {
  opacity: 1;
  transform: translateY(0);
}
.animate-text {
  position: relative;
  overflow: hidden;
}
.animate-text :where(p, span) {
  opacity: 0;
  transform: translateY(40px);
  transition:
    opacity 0.6s ease-out,
    transform 0.6s ease-out;
  transition-delay: 0.42s;
}
.animate-text.in-view :where(p, span) {
  opacity: 1;
  transform: translateY(0);
}
.animate-scale {
  overflow: hidden;
}
.animate-scale :where(img) {
  opacity: 0;
  transform: scale(1.03);
  transition:
    opacity 0.6s ease-out,
    transform 0.6s ease-out;
  transition-delay: 0.42s;
}
.animate-scale.in-view :where(img) {
  opacity: 1;
  transform: scale(1);
}
.animate-btn-block {
  position: relative;
  overflow: hidden;
}
.animate-btn-block :where(.elementor-widget-button),
.animate-btn-block {
  opacity: 0;
  transform: translateY(30px);
  transition:
    opacity 0.6s ease-out,
    transform 0.6s ease-out;
  transition-delay: 0.42s;
}
.animate-btn-block.in-view :where(.elementor-widget-button),
.animate-btn-block.in-view {
  opacity: 1;
  transform: translateY(0);
  overflow: visible;
}
.animate-scale::before {
  opacity: 0;
  transform: translateY(-6%);
  transition:
    opacity 0.9s ease-out,
    transform 1.1s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: 0.3s;
}

.animate-scale.in-view::before {
  opacity: 0.8;
  transform: translateY(0);
}
.animate-icon {
  position: relative;
  overflow: hidden;
}
.animate-icon svg {
  opacity: 0;
  transform: translateY(30px);
  transition:
    opacity 0.6s ease-out,
    transform 0.6s ease-out;
  transition-delay: 0.42s;
}
.animate-icon.in-view svg {
  opacity: 1;
  transform: translateY(0);
}
/* ?---------
? CARD NUMBER
? ---------*/
.animated-card {
  transition: all 0.3s ease-in-out;
}
.animated-card:not(.nohover):hover {
  transform: translateY(-5px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
/* =========================================================
   1. STATO DI PARTENZA + TRANSIZIONI
   ========================================================= */
.animated-card {
  --stagger-step: 150ms; /* distanza tra una card e la successiva */
  --stagger-max: 6; /* tetto: dalla 7ª card in poi il ritardo non cresce più */
  --i: 0; /* indice della card (0 = la prima): lo impostano i blocchi 3 e 4 */

  opacity: 0; /* invisibile finché l'observer non accende la classe */

  /* Longhand invece dello shorthand: servono ritardi DIVERSI per proprietà.
     Il fade ha lo stagger, l'hover (translate) deve rispondere subito */
  transition-property: opacity, translate;
  transition-duration: 0.6s, 0.3s;
  transition-timing-function: ease-out, ease-in-out;
  transition-delay:
    calc(min(var(--i), var(--stagger-max)) * var(--stagger-step)),
    /* opacity: sfalsata */ 0s; /* translate: immediata */
}

/* =========================================================
   2. STATO VISIBILE: l'observer mette .in-view sul contenitore
   ========================================================= */
.cards.in-view .animated-card {
  opacity: 1;
}

/* Hover: solo se l'utente non ha chiesto meno movimento */
@media (prefers-reduced-motion: no-preference) {
  .animated-card:not(.nohover):is(:hover, :focus-within) {
    translate: 0 -5px;
  }
}

/* =========================================================
   3. FALLBACK per browser senza sibling-index() (es. iOS < 26.2)
      Se ti va bene che lì entrino tutte insieme, puoi eliminarlo
   ========================================================= */
.animated-card:nth-child(2) {
  --i: 1;
}
.animated-card:nth-child(3) {
  --i: 2;
}
.animated-card:nth-child(4) {
  --i: 3;
}
.animated-card:nth-child(5) {
  --i: 4;
}
.animated-card:nth-child(6) {
  --i: 5;
}
.animated-card:nth-child(n + 7) {
  --i: 6;
}

/* =========================================================
   4. VERSIONE MODERNA: qualsiasi numero di card
   ========================================================= */
@supports (transition-delay: calc(sibling-index() * 1ms)) {
  .animated-card {
    --i: calc(sibling-index() - 1); /* sibling-index() parte da 1 */
  }
}

/* =========================================================
   ICON LIST: fade-in a cascata
   L'observer aggiunge .in-view su .icon-list
   ========================================================= */

.icon-list ul li {
  --stagger-step: 60ms; /* più stretto delle card: elementi piccoli e più numerosi */
  --stagger-max: 4; /* tetto: dal 9° elemento in poi il ritardo non cresce più */
  --i: 0; /* indice (0 = il primo): lo impostano i blocchi 3 e 4 */

  opacity: 0;
  transform: translateY(80px) translateX(-5%);

  /* Una sola proprietà animata: lo shorthand basta */
  transition: all 0.5s ease-out
    calc(min(var(--i), var(--stagger-max)) * var(--stagger-step));
}

.icon-list.in-view ul li {
  opacity: 1;
  transform: translateY(0) translateX(0);
}

.icon-list ul li:nth-child(2) {
  --i: 1;
}
.icon-list ul li:nth-child(3) {
  --i: 2;
}
.icon-list ul li:nth-child(4) {
  --i: 3;
}
.icon-list ul li:nth-child(n + 5) {
  --i: 4;
}
/* Solo nei browser che supportano le animazioni legate allo scroll.
   Gli altri vedono il testo normale: è questo il fallback. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .testo-reveal p {
      --reveal-pieno: var(--e-global-color-text);
      --reveal-chiaro: color-mix(in srgb, var(--reveal-pieno) 20%, #fff);
      background-image: linear-gradient(
        180deg,
        /* verticale: si riempie dall'alto, nel verso dello scroll */
          var(--reveal-pieno) 45%,
        var(--reveal-chiaro) 55%
      );
      background-size: 100% 250%;
      background-repeat: no-repeat;
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
      animation: reveal-riempi linear both; /* linear: il progresso segue lo scroll 1:1 */
      animation-timeline: view(

      ); /* DOPO lo shorthand, che altrimenti la azzera */
      animation-range: entry 25% cover 70%; /* parte all'ingresso, finisce a metà schermo */
    }
    .testo-reveal p :is(strong, b, em, i, a) {
      color: inherit;
    }
  }
}

@keyframes reveal-riempi {
  from {
    background-position: 0 100%;
  } /* parte bassa del gradiente, chiara */
  to {
    background-position: 0 0;
  } /* parte alta del gradiente, piena */
}
/* =========================================================
   HERO COPERTINE (.site-full-hero): animazione al caricamento
   - NON usa .in-view: la copertina è sempre above the fold
   - Solo transform/opacity: lavoro del compositor, niente layout o repaint
   - Proprietà singole (scale, translate) per non litigare con
     le trasformazioni impostate da Elementor
   ========================================================= */

/* 1. CONTENIMENTO DELLO ZOOM: sempre attivo.
      Il taglio va sul widget immagine, NON su .cover-image: lì dentro c'è
      anche il contenitore assoluto dei testi, che verrebbe tagliato su mobile */
.site-full-hero .cover-image .elementor-widget-image {
  overflow: hidden;
}

/* Tutto il movimento solo se l'utente non ha chiesto meno animazioni */
@media (prefers-reduced-motion: no-preference) {
  /* 2. IMMAGINE: zoom-out lento e leggero (da 106% a 100%) */
  .site-full-hero .cover-image .elementor-widget-image img {
    animation: hero-zoom 1.8s cubic-bezier(0.2, 0.7, 0.2, 1) backwards;
  }

  /* 3. OVERLAY ::before: entra in dissolvenza insieme allo zoom */
  .site-full-hero .cover-image::before {
    animation: hero-fade 0.9s ease-out backwards;
  }

  /* 4. TESTI: tutti i widget del contenitore testi, in cascata.
        Funziona anche su copertine con più elementi (es. un pulsante) */
  .site-full-hero .cover-image > .e-con > .elementor-element {
    --hero-base: 150ms; /* attesa prima del primo testo: piccola, l'H1 può essere l'LCP */
    --hero-step: 120ms; /* distanza tra un testo e il successivo */
    --hero-max: 3; /* tetto: dal 4° elemento in poi il ritardo non cresce */
    --i: 0;

    animation: hero-text 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) backwards;
    animation-delay: calc(
      var(--hero-base) + min(var(--i), var(--hero-max)) * var(--hero-step)
    );
  }

  /* Fallback solo dove sibling-index() manca */
  @supports not (animation-delay: calc(sibling-index() * 1ms)) {
    .site-full-hero .cover-image > .e-con > .elementor-element:nth-child(2) {
      --i: 1;
    }
    .site-full-hero .cover-image > .e-con > .elementor-element:nth-child(3) {
      --i: 2;
    }
    .site-full-hero
      .cover-image
      > .e-con
      > .elementor-element:nth-child(n + 4) {
      --i: 3;
    }
  }

  @supports (animation-delay: calc(sibling-index() * 1ms)) {
    .site-full-hero .cover-image > .e-con > .elementor-element {
      --i: calc(sibling-index() - 1); /* heading = 0, testo = 1, … */
    }
  }
}

/* Solo il fotogramma di partenza: l'arrivo è lo stato naturale dell'elemento */
@keyframes hero-zoom {
  from {
    scale: 1.06;
  }
}

@keyframes hero-fade {
  from {
    opacity: 0;
  }
}

@keyframes hero-text {
  from {
    opacity: 0;
    translate: 0 16px;
  }
}