ScrollReveal.astro

<div aria-hidden="true" style="display:none"></div>

<script>
  // Scroll-triggered entrance animations for benefit rows and callout
  function initScrollAnimations() {
    const reducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
    if (reducedMotion) {
      document.querySelectorAll('.benefit-row, .benefit-callout').forEach(el => el.classList.add('visible'));
      return;
    }
    const elements = document.querySelectorAll('.benefit-row, .benefit-callout');
    const observer = new IntersectionObserver((entries) => {
      entries.forEach(entry => {
        if (entry.isIntersecting) {
          entry.target.classList.add('visible');
          observer.unobserve(entry.target);
        }
      });
    }, { threshold: 0.1 });
    elements.forEach(el => observer.observe(el));
    // Also reveal any elements already in the viewport on load
    setTimeout(() => {
      elements.forEach(el => {
        const rect = el.getBoundingClientRect();
        if (rect.top < window.innerHeight && rect.bottom > 0) {
          el.classList.add('visible');
          observer.unobserve(el);
        }
      });
    }, 100);
  }
</script>