document.addEventListener("DOMContentLoaded", () => { const headings = document.querySelectorAll(".animated-heading"); const observer = new IntersectionObserver(entries => { entries.forEach(entry => { if (entry.isIntersecting) { entry.target.classList.add("show"); // animate this heading observer.unobserve(entry.target); // stop observing (one-time only) } }); }, { threshold: 0.5 }); headings.forEach(heading => observer.observe(heading)); });