document.addEventListener('DOMContentLoaded', function() {
    // Initialize GSAP animations for graffiti elements
    const graffitiElements = document.querySelectorAll('.graffiti-element');
    
    graffitiElements.forEach(element => {
        gsap.fromTo(element, 
            { opacity: 0, y: 50 },
            {
                opacity: 0.5,
                y: 0,
                duration: 1,
                ease: "power2.out",
                scrollTrigger: {
                    trigger: element,
                    start: "top 80%",
                    toggleActions: "play none none none",
                    onEnter: () => element.classList.add('active')
                }
            }
        );
    });
    
    // Animate feature cards on scroll
    gsap.utils.toArray('.feature-card').forEach(card => {
        gsap.fromTo(card,
            { opacity: 0, y: 30 },
            {
                opacity: 1,
                y: 0,
                duration: 0.8,
                scrollTrigger: {
                    trigger: card,
                    start: "top 80%"
                }
            }
        );
    });
    
    // Smooth scrolling for anchor links
    document.querySelectorAll('a[href^="#"]').forEach(anchor => {
        anchor.addEventListener('click', function(e) {
            e.preventDefault();
            document.querySelector(this.getAttribute('href')).scrollIntoView({
                behavior: 'smooth'
            });
        });
    });
});