document.addEventListener('DOMContentLoaded', function () {
    const cards = document.querySelectorAll('.exercise-card-wrapper');
    
    const observer = new IntersectionObserver((entries) => {
        entries.forEach((entry, index) => {
            if (entry.isIntersecting) {
                // Apply a staggered delay for the animation
                entry.target.style.animationDelay = `${index * 100}ms`;
                observer.unobserve(entry.target);
            }
        });
    }, { threshold: 0.1 });

    cards.forEach(card => {
        observer.observe(card);
    });
});