/**
 * FUTUREAXIS scroll reveal — IntersectionObserver + CSS.
 * Complements existing GSAP .fade-anim; does not replace it.
 * Use [data-reveal] / [data-reveal="fade-up|fade|scale|slide-left|slide-right"]
 * Optional: [data-delay="80"] (ms)
 */

[data-reveal] {
  opacity: 0;
  transform: translate3d(0, 24px, 0);
  transition:
    opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}

[data-reveal="fade"] {
  transform: none;
}

[data-reveal="fade-up"] {
  transform: translate3d(0, 24px, 0);
}

[data-reveal="fade-up-sm"] {
  transform: translate3d(0, 16px, 0);
  transition-duration: 0.58s;
}

[data-reveal="scale"] {
  transform: scale(1.03);
  transition-duration: 0.75s;
}

[data-reveal="slide-left"] {
  transform: translate3d(-28px, 0, 0);
}

[data-reveal="slide-right"] {
  transform: translate3d(28px, 0, 0);
}

[data-reveal="fade-up-num"] {
  transform: translate3d(-12px, 18px, 0);
  transition-duration: 0.65s;
}

[data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

/* Stagger helpers — prefer data-delay when possible */
[data-delay="40"] { transition-delay: 40ms; }
[data-delay="80"] { transition-delay: 80ms; }
[data-delay="120"] { transition-delay: 120ms; }
[data-delay="160"] { transition-delay: 160ms; }
[data-delay="200"] { transition-delay: 200ms; }
[data-delay="240"] { transition-delay: 240ms; }
[data-delay="280"] { transition-delay: 280ms; }
[data-delay="320"] { transition-delay: 320ms; }
[data-delay="360"] { transition-delay: 360ms; }
[data-delay="400"] { transition-delay: 400ms; }

@media (max-width: 767px) {
  [data-reveal="fade-up"],
  [data-reveal] {
    transform: translate3d(0, 16px, 0);
  }
  [data-reveal="fade-up-sm"] {
    transform: translate3d(0, 12px, 0);
  }
  [data-reveal="scale"] {
    transform: scale(1.015);
  }
  [data-reveal="slide-left"],
  [data-reveal="slide-right"] {
    transform: translate3d(0, 14px, 0);
  }
  [data-reveal="fade-up-num"] {
    transform: translate3d(0, 14px, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  [data-reveal],
  [data-reveal].is-visible {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}