document.addEventListener('DOMContentLoaded', () => {
    const wrapper = document.querySelector('.sticky-wrapper');
    const cards = document.querySelectorAll('.service-item');

    if (!wrapper || cards.length === 0) return;

    // Dynamic height for sticky effect
    wrapper.style.height = `${window.innerHeight * (cards.length + 1.8)}px`;

    cards.forEach((card, i) => {
        card.style.top = `${60 + (i * 30)}px`;
    });

    // Active state + letter animation
    const observer = new IntersectionObserver((entries) => {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                entry.target.classList.add('active');

                // Letter stagger animation
                const letters = entry.target.querySelectorAll('.letter');
                gsap.to(letters, {
                    opacity: 1,
                    y: 0,
                    duration: 0.6,
                    stagger: 0.015,
                    ease: "power2.out"
                });
            }
        });
    }, { threshold: 0.35 });

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