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

.metric-scroll-fx {
  --metric-reveal-distance: 24px;
  --metric-reveal-distance-soft: 18px;
  --metric-reveal-blur: 14px;
  --metric-reveal-duration: 0.92s;
  --metric-reveal-duration-slow: 1s;
  --metric-reveal-duration-fast: 0.82s;
  --metric-reveal-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --metric-reveal-clip-ease: cubic-bezier(0.77, 0, 0.175, 1);
  --metric-reveal-delay: 0ms;
}

@media (max-width: 781.98px) {
  .metric-scroll-fx {
    --metric-reveal-distance: 18px;
    --metric-reveal-distance-soft: 14px;
    --metric-reveal-blur: 10px;
    --metric-reveal-duration: 0.78s;
    --metric-reveal-duration-slow: 0.86s;
    --metric-reveal-duration-fast: 0.72s;
  }
}

/* Reduce motion: never hide content */
@media (prefers-reduced-motion: reduce) {
  .metric-scroll-fx .is-style-metric-reveal-up,
  .metric-scroll-fx .is-style-metric-reveal-left,
  .metric-scroll-fx .is-style-metric-reveal-right,
  .metric-scroll-fx .is-style-metric-reveal-clip-left,
  .metric-scroll-fx .is-style-metric-reveal-clip-right,
  .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-reveal-left,
  .metric-scroll-fx .metric-reveal-right,
  .metric-scroll-fx .metric-reveal-clip-left,
  .metric-scroll-fx .metric-reveal-clip-right,
  .metric-scroll-fx .metric-fade-in,
  .metric-scroll-fx .metric-scale-in,
  .metric-scroll-fx .metric-stagger > *,
  .metric-scroll-fx .metric-parallax,
  .metric-scroll-fx .metric-parallax-dynamic,
  .metric-scroll-fx .metric-inview,
  .metric-scroll-fx .is-inview,
  .metric-scroll-fx .reveal,
  .metric-scroll-fx [class*="reveal-"] {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    clip-path: inset(0 0 0 0) !important;
    -webkit-clip-path: inset(0 0 0 0) !important;
    animation: none !important;
    transition: none !important;
  }
}

/* Base hidden states (CSS fallback uses .metric-inview / .is-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, var(--metric-reveal-distance), 0);
  transition: opacity 700ms ease, transform 700ms ease;
  transition-delay: var(--metric-reveal-delay, 0ms);
  will-change: opacity, transform;
}

.metric-scroll-fx:not(.metric-gsap) .is-style-metric-reveal-left,
.metric-scroll-fx:not(.metric-gsap) .metric-reveal-left,
.metric-scroll-fx:not(.metric-gsap) .reveal.reveal-left {
  opacity: 0;
  transform: translate3d(calc(var(--metric-reveal-distance) * -1), 0, 0);
  transition: opacity 700ms ease, transform 700ms ease;
  transition-delay: var(--metric-reveal-delay, 0ms);
  will-change: opacity, transform;
}

.metric-scroll-fx:not(.metric-gsap) .is-style-metric-reveal-right,
.metric-scroll-fx:not(.metric-gsap) .metric-reveal-right,
.metric-scroll-fx:not(.metric-gsap) .reveal.reveal-right {
  opacity: 0;
  transform: translate3d(var(--metric-reveal-distance), 0, 0);
  transition: opacity 700ms ease, transform 700ms ease;
  transition-delay: var(--metric-reveal-delay, 0ms);
  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;
  transition-delay: var(--metric-reveal-delay, 0ms);
  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;
  transition-delay: var(--metric-reveal-delay, 0ms);
  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, var(--metric-reveal-distance-soft), 0);
  transition: opacity 650ms ease, transform 650ms ease;
  transition-delay: var(--metric-reveal-delay, 0ms);
  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) .is-inview.is-style-metric-reveal-up,
.metric-scroll-fx:not(.metric-gsap) .is-inview.metric-reveal-up,
.metric-scroll-fx:not(.metric-gsap) .metric-inview.is-style-metric-reveal-left,
.metric-scroll-fx:not(.metric-gsap) .metric-inview.metric-reveal-left,
.metric-scroll-fx:not(.metric-gsap) .metric-inview.reveal.reveal-left,
.metric-scroll-fx:not(.metric-gsap) .is-inview.is-style-metric-reveal-left,
.metric-scroll-fx:not(.metric-gsap) .is-inview.metric-reveal-left,
.metric-scroll-fx:not(.metric-gsap) .is-inview.reveal.reveal-left,
.metric-scroll-fx:not(.metric-gsap) .metric-inview.is-style-metric-reveal-right,
.metric-scroll-fx:not(.metric-gsap) .metric-inview.metric-reveal-right,
.metric-scroll-fx:not(.metric-gsap) .metric-inview.reveal.reveal-right,
.metric-scroll-fx:not(.metric-gsap) .is-inview.is-style-metric-reveal-right,
.metric-scroll-fx:not(.metric-gsap) .is-inview.metric-reveal-right,
.metric-scroll-fx:not(.metric-gsap) .is-inview.reveal.reveal-right,
.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) .is-inview.is-style-metric-fade-in,
.metric-scroll-fx:not(.metric-gsap) .is-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,
.metric-scroll-fx:not(.metric-gsap) .is-inview.is-style-metric-scale-in,
.metric-scroll-fx:not(.metric-gsap) .is-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 > *,
.metric-scroll-fx:not(.metric-gsap) .is-inview.is-style-metric-stagger > *,
.metric-scroll-fx:not(.metric-gsap) .is-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),
.metric-scroll-fx:not(.metric-gsap) .is-inview.is-style-metric-stagger > *:nth-child(2),
.metric-scroll-fx:not(.metric-gsap) .is-inview.metric-stagger > *:nth-child(2) { transition-delay: calc(var(--metric-reveal-delay, 0ms) + 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),
.metric-scroll-fx:not(.metric-gsap) .is-inview.is-style-metric-stagger > *:nth-child(3),
.metric-scroll-fx:not(.metric-gsap) .is-inview.metric-stagger > *:nth-child(3) { transition-delay: calc(var(--metric-reveal-delay, 0ms) + 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),
.metric-scroll-fx:not(.metric-gsap) .is-inview.is-style-metric-stagger > *:nth-child(4),
.metric-scroll-fx:not(.metric-gsap) .is-inview.metric-stagger > *:nth-child(4) { transition-delay: calc(var(--metric-reveal-delay, 0ms) + 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),
.metric-scroll-fx:not(.metric-gsap) .is-inview.is-style-metric-stagger > *:nth-child(5),
.metric-scroll-fx:not(.metric-gsap) .is-inview.metric-stagger > *:nth-child(5) { transition-delay: calc(var(--metric-reveal-delay, 0ms) + 240ms); }

/* Metric Parallax — compose with transform using CSS translate when available */
.metric-scroll-fx .metric-parallax-dynamic,
.metric-scroll-fx .metric-parallax {
  --metric-parallax-y: 0px;
  translate: 0 var(--metric-parallax-y);
}

@supports not (translate: 0 1px) {
  .metric-scroll-fx .metric-parallax-dynamic,
  .metric-scroll-fx .metric-parallax {
    transform: translateY(var(--metric-parallax-y, 0px));
  }
}

/* Reveal blur / clip / lateral premium */
.metric-scroll-fx .is-style-metric-reveal-blur,
.metric-scroll-fx .metric-reveal-blur,
.metric-scroll-fx .reveal.reveal-blur {
  opacity: 0;
  transform: translate3d(0, var(--metric-reveal-distance-soft), 0);
  filter: blur(var(--metric-reveal-blur));
  transition: none;
  will-change: opacity, transform, filter;
  backface-visibility: hidden;
}

.metric-scroll-fx .is-style-metric-reveal-clip,
.metric-scroll-fx .metric-reveal-clip,
.metric-scroll-fx .reveal.reveal-clip {
  opacity: 0;
  transform: translate3d(0, var(--metric-reveal-distance-soft), 0);
  -webkit-clip-path: inset(0 0 100% 0);
  clip-path: inset(0 0 100% 0);
  overflow: hidden;
  transition: none;
  will-change: -webkit-clip-path, clip-path, opacity, transform;
  backface-visibility: hidden;
}

.metric-scroll-fx .is-style-metric-reveal-clip-left,
.metric-scroll-fx .metric-reveal-clip-left,
.metric-scroll-fx .reveal.reveal-clip-left {
  opacity: 0;
  transform: translate3d(calc(var(--metric-reveal-distance-soft) * -0.4), 0, 0);
  -webkit-clip-path: inset(0 100% 0 0);
  clip-path: inset(0 100% 0 0);
  overflow: hidden;
  transition: none;
  will-change: -webkit-clip-path, clip-path, opacity, transform;
  backface-visibility: hidden;
}

.metric-scroll-fx .is-style-metric-reveal-clip-right,
.metric-scroll-fx .metric-reveal-clip-right,
.metric-scroll-fx .reveal.reveal-clip-right {
  opacity: 0;
  transform: translate3d(calc(var(--metric-reveal-distance-soft) * 0.4), 0, 0);
  -webkit-clip-path: inset(0 0 0 100%);
  clip-path: inset(0 0 0 100%);
  overflow: hidden;
  transition: none;
  will-change: -webkit-clip-path, clip-path, opacity, transform;
  backface-visibility: hidden;
}

.metric-scroll-fx .is-style-metric-reveal-left,
.metric-scroll-fx .metric-reveal-left,
.metric-scroll-fx .reveal.reveal-left {
  opacity: 0;
  transform: translate3d(calc(var(--metric-reveal-distance) * -1), 0, 0);
  transition: none;
  will-change: opacity, transform;
  backface-visibility: hidden;
}

.metric-scroll-fx .is-style-metric-reveal-right,
.metric-scroll-fx .metric-reveal-right,
.metric-scroll-fx .reveal.reveal-right {
  opacity: 0;
  transform: translate3d(var(--metric-reveal-distance), 0, 0);
  transition: none;
  will-change: opacity, transform;
  backface-visibility: hidden;
}

.metric-scroll-fx .metric-inview.is-style-metric-reveal-blur,
.metric-scroll-fx .metric-inview.metric-reveal-blur,
.metric-scroll-fx .metric-inview.reveal.reveal-blur,
.metric-scroll-fx .is-inview.is-style-metric-reveal-blur,
.metric-scroll-fx .is-inview.metric-reveal-blur,
.metric-scroll-fx .is-inview.reveal.reveal-blur {
  animation: revealBlurIn var(--metric-reveal-duration) var(--metric-reveal-ease) var(--metric-reveal-delay, 0ms) forwards;
}

.metric-scroll-fx .metric-inview.is-style-metric-reveal-clip,
.metric-scroll-fx .metric-inview.metric-reveal-clip,
.metric-scroll-fx .metric-inview.reveal.reveal-clip,
.metric-scroll-fx .metric-inview.reveal.reveal-clip.is-inview,
.metric-scroll-fx .is-inview.is-style-metric-reveal-clip,
.metric-scroll-fx .is-inview.metric-reveal-clip,
.metric-scroll-fx .is-inview.reveal.reveal-clip {
  animation: revealClip var(--metric-reveal-duration-slow) var(--metric-reveal-clip-ease) var(--metric-reveal-delay, 0ms) forwards;
  will-change: -webkit-clip-path, clip-path;
}

.metric-scroll-fx .metric-inview.is-style-metric-reveal-clip-left,
.metric-scroll-fx .metric-inview.metric-reveal-clip-left,
.metric-scroll-fx .metric-inview.reveal.reveal-clip-left,
.metric-scroll-fx .is-inview.is-style-metric-reveal-clip-left,
.metric-scroll-fx .is-inview.metric-reveal-clip-left,
.metric-scroll-fx .is-inview.reveal.reveal-clip-left {
  animation: revealClipLeft var(--metric-reveal-duration-slow) var(--metric-reveal-clip-ease) var(--metric-reveal-delay, 0ms) forwards;
  will-change: -webkit-clip-path, clip-path;
}

.metric-scroll-fx .metric-inview.is-style-metric-reveal-clip-right,
.metric-scroll-fx .metric-inview.metric-reveal-clip-right,
.metric-scroll-fx .metric-inview.reveal.reveal-clip-right,
.metric-scroll-fx .is-inview.is-style-metric-reveal-clip-right,
.metric-scroll-fx .is-inview.metric-reveal-clip-right,
.metric-scroll-fx .is-inview.reveal.reveal-clip-right {
  animation: revealClipRight var(--metric-reveal-duration-slow) var(--metric-reveal-clip-ease) var(--metric-reveal-delay, 0ms) forwards;
  will-change: -webkit-clip-path, clip-path;
}

.metric-scroll-fx .metric-inview.is-style-metric-reveal-left,
.metric-scroll-fx .metric-inview.metric-reveal-left,
.metric-scroll-fx .metric-inview.reveal.reveal-left,
.metric-scroll-fx .is-inview.is-style-metric-reveal-left,
.metric-scroll-fx .is-inview.metric-reveal-left,
.metric-scroll-fx .is-inview.reveal.reveal-left {
  animation: revealLeft var(--metric-reveal-duration-fast) var(--metric-reveal-ease) var(--metric-reveal-delay, 0ms) forwards;
}

.metric-scroll-fx .metric-inview.is-style-metric-reveal-right,
.metric-scroll-fx .metric-inview.metric-reveal-right,
.metric-scroll-fx .metric-inview.reveal.reveal-right,
.metric-scroll-fx .is-inview.is-style-metric-reveal-right,
.metric-scroll-fx .is-inview.metric-reveal-right,
.metric-scroll-fx .is-inview.reveal.reveal-right {
  animation: revealRight var(--metric-reveal-duration-fast) var(--metric-reveal-ease) var(--metric-reveal-delay, 0ms) forwards;
}

@keyframes revealBlurIn {
  0% {
    opacity: 0;
    filter: blur(var(--metric-reveal-blur));
    transform: translate3d(0, var(--metric-reveal-distance-soft), 0);
  }
  100% {
    opacity: 1;
    filter: blur(0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes revealClip {
  0% {
    opacity: 0;
    -webkit-clip-path: inset(0 0 100% 0);
    clip-path: inset(0 0 100% 0);
    transform: translate3d(0, var(--metric-reveal-distance-soft), 0);
  }
  100% {
    opacity: 1;
    -webkit-clip-path: inset(0 0 0 0);
    clip-path: inset(0 0 0 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes revealClipLeft {
  0% {
    opacity: 0;
    -webkit-clip-path: inset(0 100% 0 0);
    clip-path: inset(0 100% 0 0);
    transform: translate3d(calc(var(--metric-reveal-distance-soft) * -0.4), 0, 0);
  }
  100% {
    opacity: 1;
    -webkit-clip-path: inset(0 0 0 0);
    clip-path: inset(0 0 0 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes revealClipRight {
  0% {
    opacity: 0;
    -webkit-clip-path: inset(0 0 0 100%);
    clip-path: inset(0 0 0 100%);
    transform: translate3d(calc(var(--metric-reveal-distance-soft) * 0.4), 0, 0);
  }
  100% {
    opacity: 1;
    -webkit-clip-path: inset(0 0 0 0);
    clip-path: inset(0 0 0 0);
    transform: translate3d(0, 0, 0);
  }
}

@supports not ((-webkit-clip-path: inset(0 0 0 0)) or (clip-path: inset(0 0 0 0))) {
  .metric-scroll-fx .is-style-metric-reveal-clip,
  .metric-scroll-fx .is-style-metric-reveal-clip-left,
  .metric-scroll-fx .is-style-metric-reveal-clip-right,
  .metric-scroll-fx .metric-reveal-clip,
  .metric-scroll-fx .metric-reveal-clip-left,
  .metric-scroll-fx .metric-reveal-clip-right,
  .metric-scroll-fx .reveal.reveal-clip,
  .metric-scroll-fx .reveal.reveal-clip-left,
  .metric-scroll-fx .reveal.reveal-clip-right {
    opacity: 0;
    transform: translate3d(0, var(--metric-reveal-distance-soft), 0);
  }

  .metric-scroll-fx .metric-inview.is-style-metric-reveal-clip,
  .metric-scroll-fx .metric-inview.is-style-metric-reveal-clip-left,
  .metric-scroll-fx .metric-inview.is-style-metric-reveal-clip-right,
  .metric-scroll-fx .metric-inview.metric-reveal-clip,
  .metric-scroll-fx .metric-inview.metric-reveal-clip-left,
  .metric-scroll-fx .metric-inview.metric-reveal-clip-right,
  .metric-scroll-fx .metric-inview.reveal.reveal-clip,
  .metric-scroll-fx .metric-inview.reveal.reveal-clip.is-inview,
  .metric-scroll-fx .metric-inview.reveal.reveal-clip-left,
  .metric-scroll-fx .metric-inview.reveal.reveal-clip-right,
  .metric-scroll-fx .is-inview.is-style-metric-reveal-clip,
  .metric-scroll-fx .is-inview.is-style-metric-reveal-clip-left,
  .metric-scroll-fx .is-inview.is-style-metric-reveal-clip-right,
  .metric-scroll-fx .is-inview.metric-reveal-clip,
  .metric-scroll-fx .is-inview.metric-reveal-clip-left,
  .metric-scroll-fx .is-inview.metric-reveal-clip-right,
  .metric-scroll-fx .is-inview.reveal.reveal-clip,
  .metric-scroll-fx .is-inview.reveal.reveal-clip-left,
  .metric-scroll-fx .is-inview.reveal.reveal-clip-right {
    animation: revealUpFallback var(--metric-reveal-duration-slow) var(--metric-reveal-ease) var(--metric-reveal-delay, 0ms) forwards;
  }
}

@keyframes revealUpFallback {
  0% {
    opacity: 0;
    transform: translate3d(0, var(--metric-reveal-distance-soft), 0);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes revealLeft {
  0% {
    opacity: 0;
    transform: translate3d(calc(var(--metric-reveal-distance) * -1), 0, 0);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes revealRight {
  0% {
    opacity: 0;
    transform: translate3d(var(--metric-reveal-distance), 0, 0);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}