/* Metric - Scroll animations (optional)
   Enabled only when body has class .metric-scroll-fx
*/

/* Reduce motion: never hide content */
@media (prefers-reduced-motion: reduce) {
  .metric-scroll-fx .is-style-metric-reveal-up,
  .metric-scroll-fx .is-style-metric-fade-in,
  .metric-scroll-fx .is-style-metric-scale-in,
  .metric-scroll-fx .is-style-metric-stagger > *,
  .metric-scroll-fx .is-style-metric-parallax,
  .metric-scroll-fx .metric-reveal-up,
  .metric-scroll-fx .metric-fade-in,
  .metric-scroll-fx .metric-scale-in,
  .metric-scroll-fx .metric-stagger > *,
  .metric-scroll-fx .metric-parallax {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* Base hidden states (CSS fallback uses .metric-inview) */
.metric-scroll-fx:not(.metric-gsap) .is-style-metric-reveal-up,
.metric-scroll-fx:not(.metric-gsap) .metric-reveal-up {
  opacity: 0;
  transform: translate3d(0, 24px, 0);
  transition: opacity 700ms ease, transform 700ms ease;
  will-change: opacity, transform;
}

.metric-scroll-fx:not(.metric-gsap) .is-style-metric-fade-in,
.metric-scroll-fx:not(.metric-gsap) .metric-fade-in {
  opacity: 0;
  transition: opacity 700ms ease;
  will-change: opacity;
}

.metric-scroll-fx:not(.metric-gsap) .is-style-metric-scale-in,
.metric-scroll-fx:not(.metric-gsap) .metric-scale-in {
  opacity: 0;
  transform: scale(0.98);
  transition: opacity 700ms ease, transform 700ms ease;
  will-change: opacity, transform;
}

/* Stagger: children */
.metric-scroll-fx:not(.metric-gsap) .is-style-metric-stagger > *,
.metric-scroll-fx:not(.metric-gsap) .metric-stagger > * {
  opacity: 0;
  transform: translate3d(0, 18px, 0);
  transition: opacity 650ms ease, transform 650ms ease;
  will-change: opacity, transform;
}

/* Visible state for CSS fallback */
.metric-scroll-fx:not(.metric-gsap) .metric-inview.is-style-metric-reveal-up,
.metric-scroll-fx:not(.metric-gsap) .metric-inview.metric-reveal-up,
.metric-scroll-fx:not(.metric-gsap) .metric-inview.is-style-metric-fade-in,
.metric-scroll-fx:not(.metric-gsap) .metric-inview.metric-fade-in,
.metric-scroll-fx:not(.metric-gsap) .metric-inview.is-style-metric-scale-in,
.metric-scroll-fx:not(.metric-gsap) .metric-inview.metric-scale-in {
  opacity: 1;
  transform: none;
}

.metric-scroll-fx:not(.metric-gsap) .metric-inview.is-style-metric-stagger > *,
.metric-scroll-fx:not(.metric-gsap) .metric-inview.metric-stagger > * {
  opacity: 1;
  transform: none;
}

/* Optional: give a tiny delay cascade for stagger (CSS fallback) */
.metric-scroll-fx:not(.metric-gsap) .metric-inview.is-style-metric-stagger > *:nth-child(2),
.metric-scroll-fx:not(.metric-gsap) .metric-inview.metric-stagger > *:nth-child(2) { transition-delay: 60ms; }
.metric-scroll-fx:not(.metric-gsap) .metric-inview.is-style-metric-stagger > *:nth-child(3),
.metric-scroll-fx:not(.metric-gsap) .metric-inview.metric-stagger > *:nth-child(3) { transition-delay: 120ms; }
.metric-scroll-fx:not(.metric-gsap) .metric-inview.is-style-metric-stagger > *:nth-child(4),
.metric-scroll-fx:not(.metric-gsap) .metric-inview.metric-stagger > *:nth-child(4) { transition-delay: 180ms; }
.metric-scroll-fx:not(.metric-gsap) .metric-inview.is-style-metric-stagger > *:nth-child(5),
.metric-scroll-fx:not(.metric-gsap) .metric-inview.metric-stagger > *:nth-child(5) { transition-delay: 240ms; }

/* Parallax: no CSS fallback movement (JS only) */

/* Metric Parallax — usa translate (si compone con transform) */
.metric-parallax {
  --metric-parallax-y: 0px;
  translate: 0 var(--metric-parallax-y);
}

/* Fallback per browser vecchi (se vuoi): in tal caso usa transform e potrebbe confliggere con altre animazioni */
@supports not (translate: 0 1px) {
  .metric-parallax {
    transform: translateY(var(--metric-parallax-y, 0px));
  }
}