/* ==========================================================
   Elementor Elegant Reveal - Animations Pack
   Uso: aggiungi classi ai Container/Widget Elementor
   ========================================================== */

/* --- Accessibilità: disattiva animazioni se richiesto --- */
@media (prefers-reduced-motion: reduce) {
  .eer,
  .eer * {
    animation: none !important;
    transition: none !important;
  }
}

/* --- Utility: disabilita su mobile se aggiungi .eer-no-mobile --- */
@media (max-width: 767px) {
  .eer-no-mobile {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }
}

/* ==========================================================
   BASE: tutti gli effetti sono "reveal on visible"
   Elementor aggiunge automaticamente: .elementor-element--visible
   ========================================================== */

.eer {
  opacity: 0;
  will-change: opacity, transform, filter;
}

/* Elementor: quando entra in viewport */
.eer.elementor-element.elementor-element--visible {
  opacity: 1;
}

/* ==========================================================
   VARIANTI (scegline una o più)
   ========================================================== */

/* 1) Elegante standard (slide up + micro-scale) */
.eer--classic {
  transform: translateY(24px) scale(0.985);
  transition:
    opacity 900ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 900ms cubic-bezier(0.22, 1, 0.36, 1);
}
.eer--classic.elementor-element.elementor-element--visible {
  transform: translateY(0) scale(1);
}

/* 2) Soft (ancora più discreta) */
.eer--soft {
  transform: translateY(14px) scale(0.99);
  transition:
    opacity 800ms ease-out,
    transform 800ms ease-out;
}
.eer--soft.elementor-element.elementor-element--visible {
  transform: translateY(0) scale(1);
}

/* 3) Slide from left (raffinata per blocchi editorial) */
.eer--left {
  transform: translateX(-26px);
  transition:
    opacity 850ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 850ms cubic-bezier(0.22, 1, 0.36, 1);
}
.eer--left.elementor-element.elementor-element--visible {
  transform: translateX(0);
}

/* 4) Slide from right */
.eer--right {
  transform: translateX(26px);
  transition:
    opacity 850ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 850ms cubic-bezier(0.22, 1, 0.36, 1);
}
.eer--right.elementor-element.elementor-element--visible {
  transform: translateX(0);
}

/* 5) Scale only (molto “premium”, zero spostamento) */
.eer--scale {
  transform: scale(0.965);
  transition:
    opacity 800ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 800ms cubic-bezier(0.22, 1, 0.36, 1);
}
.eer--scale.elementor-element.elementor-element--visible {
  transform: scale(1);
}

/* 6) Blur + fade (effetto luxury; leggerissimo) */
.eer--blur {
  transform: translateY(18px);
  filter: blur(8px);
  transition:
    opacity 950ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 950ms cubic-bezier(0.22, 1, 0.36, 1),
    filter 950ms cubic-bezier(0.22, 1, 0.36, 1);
}
.eer--blur.elementor-element.elementor-element--visible {
  transform: translateY(0);
  filter: blur(0);
}

/* 7) Editorial (più “cinematografica”) */
.eer--editorial {
  transform: translateY(30px);
  transition:
    opacity 1000ms ease,
    transform 1000ms cubic-bezier(0.19, 1, 0.22, 1);
}
.eer--editorial.elementor-element.elementor-element--visible {
  transform: translateY(0);
}

/* ==========================================================
   DELAY / SPEED (opzionali)
   Usa una classe per regolare il timing senza riscrivere CSS
   ========================================================== */

.eer--fast { transition-duration: 650ms !important; }
.eer--slow { transition-duration: 1200ms !important; }

.eer--d1 { transition-delay: 80ms !important; }
.eer--d2 { transition-delay: 160ms !important; }
.eer--d3 { transition-delay: 240ms !important; }
.eer--d4 { transition-delay: 320ms !important; }
.eer--d5 { transition-delay: 400ms !important; }

/* ==========================================================
   STAGGER: ritardo progressivo sui figli di una sezione/container
   Metti la classe .eer-stagger sul container padre.
   Poi applica ai figli la classe .eer (e la variante che vuoi).
   ========================================================== */

/* Elementor Containers moderni */
.eer-stagger > .e-con-inner > .eer { transition-delay: calc(var(--eer-i, 0) * 90ms); }

/* Elementor legacy (sezioni/colonne) */
.eer-stagger .elementor-container > .eer,
.eer-stagger .elementor-row > .eer { transition-delay: calc(var(--eer-i, 0) * 90ms); }

/* Indici automatici (fino a 12 elementi) */
.eer-stagger > .e-con-inner > :nth-child(1)  { --eer-i: 0; }
.eer-stagger > .e-con-inner > :nth-child(2)  { --eer-i: 1; }
.eer-stagger > .e-con-inner > :nth-child(3)  { --eer-i: 2; }
.eer-stagger > .e-con-inner > :nth-child(4)  { --eer-i: 3; }
.eer-stagger > .e-con-inner > :nth-child(5)  { --eer-i: 4; }
.eer-stagger > .e-con-inner > :nth-child(6)  { --eer-i: 5; }
.eer-stagger > .e-con-inner > :nth-child(7)  { --eer-i: 6; }
.eer-stagger > .e-con-inner > :nth-child(8)  { --eer-i: 7; }
.eer-stagger > .e-con-inner > :nth-child(9)  { --eer-i: 8; }
.eer-stagger > .e-con-inner > :nth-child(10) { --eer-i: 9; }
.eer-stagger > .e-con-inner > :nth-child(11) { --eer-i: 10; }
.eer-stagger > .e-con-inner > :nth-child(12) { --eer-i: 11; }

/* Stagger più “rapido” */
.eer-stagger.eer-stagger--tight > .e-con-inner > .eer {
  transition-delay: calc(var(--eer-i, 0) * 60ms);
}