export function useScrollAnimation() {
  onMounted(() => {
    const observer = new IntersectionObserver(
      (entries) => {
        for (const entry of entries) {
          if (entry.isIntersecting) {
            entry.target.classList.add('is-visible')
            observer.unobserve(entry.target)
          }
        }
      },
      { threshold: 0.1, rootMargin: '0px 0px -40px 0px' },
    )

    const elements = document.querySelectorAll('.animate-on-scroll')
    for (const el of elements) {
      observer.observe(el)
    }

    onUnmounted(() => observer.disconnect())
  })
}