/**
 * STL Azzurra — Alfabeto animazioni (reference GoGreen → token ANIM-*)
 * Applicare: stl-anim stl-anim--{variant} [stl-anim-delay-N]
 * Attivazione scroll: JS aggiunge .is-visible
 */

@media (prefers-reduced-motion: reduce) {
  .stl-anim,
  .stl-anim::before,
  .stl-anim::after,
  .stl-hover-media img,
  .stl-hover-icon-pop,
  .stl-parallax {
    animation: none !important;
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
  }

  .stl-anim {
    visibility: visible !important;
  }

  .stl-parallax {
    background-attachment: scroll !important;
  }
}

/* --- Scroll reveal base --- */
.stl-anim {
  opacity: 0;
  will-change: opacity, transform;
}

.stl-anim.is-visible {
  animation-duration: var(--stl-anim-duration, 650ms);
  animation-timing-function: var(--stl-anim-easing, ease-out);
  animation-fill-mode: both;
  animation-delay: var(--stl-anim-delay, 0ms);
}

.stl-anim-delay-1 { --stl-anim-delay: 100ms; }
.stl-anim-delay-2 { --stl-anim-delay: 200ms; }
.stl-anim-delay-3 { --stl-anim-delay: 300ms; }
.stl-anim-delay-4 { --stl-anim-delay: 400ms; }

/* ANIM-FADE-RIGHT */
@keyframes stlFadeInRight {
  from {
    opacity: 0;
    transform: translateX(20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.stl-anim--fade-right.is-visible {
  --stl-anim-duration: 700ms;
  animation-name: stlFadeInRight;
}

/* ANIM-FADE-UP */
@keyframes stlFadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.stl-anim--fade-up.is-visible {
  --stl-anim-duration: 650ms;
  animation-name: stlFadeInUp;
}

/* ANIM-FADE-IN */
@keyframes stlFadeIn {
  0% {
    opacity: 0;
    transform: scale(0.96);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

.stl-anim--fade-in.is-visible {
  --stl-anim-duration: 500ms;
  animation-name: stlFadeIn;
}

/* ANIM-PULL-UP (GoGreen pullUp) */
@keyframes stlPullUp {
  0% {
    opacity: 0;
    transform: scaleY(0.4);
    transform-origin: center bottom;
  }
  40% {
    transform: scaleY(1.02);
  }
  60% {
    transform: scaleY(0.98);
  }
  100% {
    opacity: 1;
    transform: scaleY(1);
  }
}

.stl-anim--pull-up.is-visible {
  --stl-anim-duration: 600ms;
  --stl-anim-easing: ease;
  animation-name: stlPullUp;
}

/* ANIM-ICON-POP (GoGreen scaleDisappear on hover) */
@keyframes stlIconPop {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.12);
  }
  100% {
    transform: scale(1);
  }
}

.stl-hover-icon-pop:hover .stl-hover-icon-pop__target,
.stl-hover-icon-pop:hover .elementor-icon,
.stl-hover-icon-pop:hover i {
  animation: stlIconPop 0.35s ease-in-out;
}

/* ANIM-OVERLAY-ZOOM (GoGreen media-links) */
.stl-hover-media {
  position: relative;
  overflow: hidden;
}

.stl-hover-media::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 38, 64, 0.55);
  opacity: 0;
  transition: opacity 0.22s linear;
  z-index: 2;
  pointer-events: none;
}

.stl-hover-media img,
.stl-hover-media .elementor-image img,
.stl-hover-media .stl-media-year-badge__img {
  transition: transform 0.28s ease, opacity 0.22s ease;
}

.stl-hover-media .stl-media-year-badge__media {
  position: relative;
  overflow: hidden;
}

.stl-hover-media .stl-media-year-badge__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 38, 64, 0.45);
  opacity: 0;
  transition: opacity 0.22s linear;
  pointer-events: none;
}

.stl-hover-media:hover .stl-media-year-badge__media::after {
  opacity: 1;
}

.stl-hover-media:hover img,
.stl-hover-media:hover .elementor-image img,
.stl-hover-media:hover .stl-media-year-badge__img {
  transform: scale(1.06);
}

/* ANIM-PARALLAX */
.stl-parallax {
  background-attachment: fixed;
  background-size: cover;
  background-position: center top;
}

/* ANIM-SCROLL-HINT (GoGreen scroll_button) */
.stl-anim-scroll-hint {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 8px 24px rgba(0, 38, 64, 0.18);
  transition: transform 0.3s ease-in-out;
}

.stl-anim-scroll-hint:hover {
  transform: translateY(8px);
}

/* --- Stagger groups (wrapper osservato da JS: stl-anim-watch) --- */
.stl-anim-watch.stl-anim-stagger-cards .stl-kpi-strip__card,
.stl-anim-watch.stl-anim-stagger-stats .stl-stats-bar__item,
.stl-anim-watch.stl-anim-stagger-features .stl-feature-list__item,
.stl-anim-watch.stl-anim-stagger-treatment .stl-section-intro-center,
.stl-anim-watch.stl-anim-stagger-treatment .stl-treatment-card,
.stl-anim-watch.stl-anim-stagger-services .stl-services-split__left,
.stl-anim-watch.stl-anim-stagger-services .stl-numbered-rows__item,
.stl-anim-watch.stl-anim-stagger-news .stl-news-header,
.stl-anim-watch.stl-anim-stagger-news .stl-news-card,
.stl-anim-watch.stl-anim-stagger-intro > .elementor-element,
.stl-anim-watch.stl-anim-stagger-timeline .stl-timeline__row,
.stl-anim-watch.stl-anim-stagger-team .stl-team-card,
.stl-anim-watch.stl-anim-stagger-stat-cards .stl-stat-cards__item,
.stl-anim-watch.stl-anim-stagger-steps .stl-numbered-steps__item,
.stl-anim-watch.stl-anim-stagger-gallery .stl-gallery-header,
.stl-anim-watch.stl-anim-stagger-gallery .stl-gallery-grid__item,
.stl-anim-watch.stl-anim-stagger-service-grid .stl-service-grid__item,
.stl-anim-watch.stl-anim-stagger-cert-list .stl-cert-list__row,
.stl-anim-watch.stl-anim-stagger-cert-cards .stl-cert-card,
.stl-anim-watch.stl-anim-stagger-contact .stl-contact-cards__item,
.stl-anim-watch.stl-anim-stagger-jobs .stl-job-card,
.stl-anim-watch.stl-anim-stagger-feature-grid .stl-feature-grid__item,
.stl-anim-watch.stl-anim-stagger-blocks > .elementor-element,
.stl-anim-watch.stl-anim-stagger-panels > .elementor-element,
.stl-anim-watch.stl-anim-stagger-split-text > .elementor-element {
  opacity: 0;
}

.stl-anim-watch.stl-anim-stagger-cards.is-visible .stl-kpi-strip__card:nth-child(1) {
  animation: stlPullUp 600ms ease 0ms both;
}
.stl-anim-watch.stl-anim-stagger-cards.is-visible .stl-kpi-strip__card:nth-child(2) {
  animation: stlPullUp 600ms ease 100ms both;
}
.stl-anim-watch.stl-anim-stagger-cards.is-visible .stl-kpi-strip__card:nth-child(3) {
  animation: stlPullUp 600ms ease 200ms both;
}

.stl-anim-watch.stl-anim-stagger-stats.is-visible .stl-stats-bar__item:nth-child(1) {
  animation: stlFadeInUp 650ms ease-out 0ms both;
}
.stl-anim-watch.stl-anim-stagger-stats.is-visible .stl-stats-bar__item:nth-child(2) {
  animation: stlFadeInUp 650ms ease-out 80ms both;
}
.stl-anim-watch.stl-anim-stagger-stats.is-visible .stl-stats-bar__item:nth-child(3) {
  animation: stlFadeInUp 650ms ease-out 160ms both;
}
.stl-anim-watch.stl-anim-stagger-stats.is-visible .stl-stats-bar__item:nth-child(4) {
  animation: stlFadeInUp 650ms ease-out 240ms both;
}

.stl-anim-watch.stl-anim-stagger-features.is-visible .stl-feature-list__item:nth-child(1) {
  animation: stlFadeInUp 550ms ease-out 0ms both;
}
.stl-anim-watch.stl-anim-stagger-features.is-visible .stl-feature-list__item:nth-child(2) {
  animation: stlFadeInUp 550ms ease-out 60ms both;
}
.stl-anim-watch.stl-anim-stagger-features.is-visible .stl-feature-list__item:nth-child(3) {
  animation: stlFadeInUp 550ms ease-out 120ms both;
}
.stl-anim-watch.stl-anim-stagger-features.is-visible .stl-feature-list__item:nth-child(4) {
  animation: stlFadeInUp 550ms ease-out 180ms both;
}

.stl-anim-watch.stl-anim-stagger-treatment.is-visible .stl-section-intro-center {
  animation: stlFadeInUp 650ms ease-out both;
}
.stl-anim-watch.stl-anim-stagger-treatment.is-visible .stl-treatment-card:nth-child(1) {
  animation: stlPullUp 600ms ease 120ms both;
}
.stl-anim-watch.stl-anim-stagger-treatment.is-visible .stl-treatment-card:nth-child(2) {
  animation: stlPullUp 600ms ease 220ms both;
}

.stl-anim-watch.stl-anim-stagger-services.is-visible .stl-services-split__left {
  animation: stlFadeInRight 700ms ease-out both;
}
.stl-anim-watch.stl-anim-stagger-services.is-visible .stl-numbered-rows__item:nth-child(1) {
  animation: stlFadeInUp 600ms ease-out 120ms both;
}
.stl-anim-watch.stl-anim-stagger-services.is-visible .stl-numbered-rows__item:nth-child(2) {
  animation: stlFadeInUp 600ms ease-out 200ms both;
}
.stl-anim-watch.stl-anim-stagger-services.is-visible .stl-numbered-rows__item:nth-child(3) {
  animation: stlFadeInUp 600ms ease-out 280ms both;
}

.stl-anim-watch.stl-anim-stagger-news.is-visible .stl-news-header {
  animation: stlFadeInUp 650ms ease-out both;
}
.stl-anim-watch.stl-anim-stagger-news.is-visible .stl-news-card:nth-child(1) {
  animation: stlFadeInUp 600ms ease-out 120ms both;
}
.stl-anim-watch.stl-anim-stagger-news.is-visible .stl-news-card:nth-child(2) {
  animation: stlFadeInUp 600ms ease-out 200ms both;
}
.stl-anim-watch.stl-anim-stagger-news.is-visible .stl-news-card:nth-child(3) {
  animation: stlFadeInUp 600ms ease-out 280ms both;
}

/* --- Stagger dinamico (delay --stl-stagger-delay da animations-azzurra.js) --- */
.stl-anim-watch.stl-anim-stagger-intro.is-visible > .elementor-element {
  animation: stlFadeInUp 650ms ease-out var(--stl-stagger-delay, 0ms) both;
}

.stl-anim-watch.stl-anim-stagger-timeline.is-visible .stl-timeline__row {
  animation: stlFadeInUp 600ms ease-out var(--stl-stagger-delay, 0ms) both;
}

.stl-anim-watch.stl-anim-stagger-team.is-visible .stl-team-card {
  animation: stlPullUp 600ms ease var(--stl-stagger-delay, 0ms) both;
}

.stl-anim-watch.stl-anim-stagger-stat-cards.is-visible .stl-stat-cards__item {
  animation: stlPullUp 600ms ease var(--stl-stagger-delay, 0ms) both;
}

.stl-anim-watch.stl-anim-stagger-steps.is-visible .stl-numbered-steps__item {
  animation: stlFadeInUp 550ms ease-out var(--stl-stagger-delay, 0ms) both;
}

.stl-anim-watch.stl-anim-stagger-gallery.is-visible .stl-gallery-header {
  animation: stlFadeInUp 650ms ease-out both;
}
.stl-anim-watch.stl-anim-stagger-gallery.is-visible .stl-gallery-grid__item {
  animation: stlFadeInUp 600ms ease-out var(--stl-stagger-delay, 0ms) both;
}

.stl-anim-watch.stl-anim-stagger-service-grid.is-visible .stl-service-grid__item {
  animation: stlPullUp 600ms ease var(--stl-stagger-delay, 0ms) both;
}

.stl-anim-watch.stl-anim-stagger-cert-list.is-visible .stl-cert-list__row {
  animation: stlFadeInUp 600ms ease-out var(--stl-stagger-delay, 0ms) both;
}

.stl-anim-watch.stl-anim-stagger-cert-cards.is-visible .stl-cert-card {
  animation: stlPullUp 600ms ease var(--stl-stagger-delay, 0ms) both;
}

.stl-anim-watch.stl-anim-stagger-contact.is-visible .stl-contact-cards__item {
  animation: stlPullUp 600ms ease var(--stl-stagger-delay, 0ms) both;
}

.stl-anim-watch.stl-anim-stagger-jobs.is-visible .stl-job-card {
  animation: stlPullUp 600ms ease var(--stl-stagger-delay, 0ms) both;
}

.stl-anim-watch.stl-anim-stagger-feature-grid.is-visible .stl-feature-grid__item {
  animation: stlPullUp 600ms ease var(--stl-stagger-delay, 0ms) both;
}

.stl-anim-watch.stl-anim-stagger-blocks.is-visible > .elementor-element {
  animation: stlPullUp 600ms ease var(--stl-stagger-delay, 0ms) both;
}

.stl-anim-watch.stl-anim-stagger-panels.is-visible > .elementor-element {
  animation: stlFadeInUp 650ms ease-out var(--stl-stagger-delay, 0ms) both;
}

.stl-anim-watch.stl-anim-stagger-split-text.is-visible > .elementor-element {
  animation: stlFadeInUp 650ms ease-out var(--stl-stagger-delay, 0ms) both;
}

@media (prefers-reduced-motion: reduce) {
  .stl-anim-watch.stl-anim-stagger-cards .stl-kpi-strip__card,
  .stl-anim-watch.stl-anim-stagger-stats .stl-stats-bar__item,
  .stl-anim-watch.stl-anim-stagger-features .stl-feature-list__item,
  .stl-anim-watch.stl-anim-stagger-treatment .stl-section-intro-center,
  .stl-anim-watch.stl-anim-stagger-treatment .stl-treatment-card,
  .stl-anim-watch.stl-anim-stagger-services .stl-services-split__left,
  .stl-anim-watch.stl-anim-stagger-services .stl-numbered-rows__item,
  .stl-anim-watch.stl-anim-stagger-news .stl-news-header,
  .stl-anim-watch.stl-anim-stagger-news .stl-news-card,
  .stl-anim-watch.stl-anim-stagger-intro > .elementor-element,
  .stl-anim-watch.stl-anim-stagger-timeline .stl-timeline__row,
  .stl-anim-watch.stl-anim-stagger-team .stl-team-card,
  .stl-anim-watch.stl-anim-stagger-stat-cards .stl-stat-cards__item,
  .stl-anim-watch.stl-anim-stagger-steps .stl-numbered-steps__item,
  .stl-anim-watch.stl-anim-stagger-gallery .stl-gallery-header,
  .stl-anim-watch.stl-anim-stagger-gallery .stl-gallery-grid__item,
  .stl-anim-watch.stl-anim-stagger-service-grid .stl-service-grid__item,
  .stl-anim-watch.stl-anim-stagger-cert-list .stl-cert-list__row,
  .stl-anim-watch.stl-anim-stagger-cert-cards .stl-cert-card,
  .stl-anim-watch.stl-anim-stagger-contact .stl-contact-cards__item,
  .stl-anim-watch.stl-anim-stagger-jobs .stl-job-card,
  .stl-anim-watch.stl-anim-stagger-feature-grid .stl-feature-grid__item,
  .stl-anim-watch.stl-anim-stagger-blocks > .elementor-element,
  .stl-anim-watch.stl-anim-stagger-panels > .elementor-element,
  .stl-anim-watch.stl-anim-stagger-split-text > .elementor-element {
    opacity: 1 !important;
  }
}