/**
 * T15 (250.352): CSS Scroll-Driven Animations — Progressive Enhancement
 * Off main-thread scroll animations (Chrome 115+, Safari 26+, Firefox flag)
 * Falls back gracefully — GSAP handles animations for unsupported browsers.
 *
 * @supports (animation-timeline: view()) gates all rules.
 * Only triggers on browsers that support Scroll-Driven Animations API.
 * Does NOT replace GSAP — complements it for simple reveal patterns.
 */

/* ═══ Native scroll-driven reveal (off main-thread, GPU-accelerated) ═══ */
@supports (animation-timeline: view()) {
  /* Disable GSAP inline styles for these elements when native is available */
  .gsap-ready [data-reveal] {
    animation: nativeReveal linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 80%;
    /* Reset GSAP inline transforms */
    opacity: 1 !important;
    transform: none !important;
  }

  @keyframes nativeReveal {
    from {
      opacity: 0;
      transform: translateY(40px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  /* Variant: scale reveal */
  .gsap-ready [data-reveal="scale"] {
    animation-name: nativeRevealScale;
  }

  @keyframes nativeRevealScale {
    from {
      opacity: 0;
      transform: scale(0.92);
    }
    to {
      opacity: 1;
      transform: scale(1);
    }
  }

  /* Variant: slide left */
  .gsap-ready [data-reveal="left"] {
    animation-name: nativeRevealLeft;
  }

  @keyframes nativeRevealLeft {
    from {
      opacity: 0;
      transform: translateX(-50px);
    }
    to {
      opacity: 1;
      transform: translateX(0);
    }
  }

  /* Variant: slide right */
  .gsap-ready [data-reveal="right"] {
    animation-name: nativeRevealRight;
  }

  @keyframes nativeRevealRight {
    from {
      opacity: 0;
      transform: translateX(50px);
    }
    to {
      opacity: 1;
      transform: translateX(0);
    }
  }

  /* Parallax hero — scroll-linked, off main-thread */
  .gsap-ready [data-parallax] {
    animation: nativeParallax linear both;
    animation-timeline: scroll(nearest);
    animation-range: 0% 100%;
  }

  @keyframes nativeParallax {
    from { transform: translateY(0); }
    to { transform: translateY(-60px); }
  }

  /* Respect reduced motion */
  @media (prefers-reduced-motion: reduce) {
    .gsap-ready [data-reveal],
    .gsap-ready [data-parallax] {
      animation: none !important;
      opacity: 1 !important;
      transform: none !important;
    }
  }
}