document.addEventListener("DOMContentLoaded", function() {
    const bubbles = document.querySelectorAll('.bubble-element');
    
    const observer = new IntersectionObserver(entries => {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                entry.target.classList.add('in-view');
            }
        });
    });
    bubbles.forEach(bubble => observer.observe(bubble));
});