document.addEventListener('DOMContentLoaded', function() {
    // Navbar scroll effect
    const navbar = document.querySelector('.navbar');
    
    window.addEventListener('scroll', function() {
        if (window.scrollY > 50) {
            navbar.classList.add('bg-aztec-black');
            navbar.classList.add('backdrop-blur-sm');
        } else {
            navbar.classList.remove('bg-aztec-black');
            navbar.classList.remove('backdrop-blur-sm');
        }
    });
// Mobile menu toggle (would need additional HTML for mobile menu)
    const mobileMenuButton = document.querySelector('custom-navbar').shadowRoot.querySelector('button');
    mobileMenuButton.addEventListener('click', function() {
        // This would toggle a mobile menu (not implemented in this example)
        console.log('Mobile menu clicked');
    });

    // Animate elements when they come into view
    const animateOnScroll = function() {
        const elements = document.querySelectorAll('.p-6.bg-aztec-gray');
        
        elements.forEach(element => {
            const elementPosition = element.getBoundingClientRect().top;
            const windowHeight = window.innerHeight;
            
            if (elementPosition < windowHeight - 100) {
                element.style.opacity = '1';
                element.style.transform = 'translateY(0)';
            }
        });
    };

    // Initialize elements with opacity 0 and slight offset
    document.querySelectorAll('.p-6.bg-aztec-gray').forEach(element => {
        element.style.opacity = '0';
        element.style.transform = 'translateY(20px)';
        element.style.transition = 'all 0.6s ease';
    });

    // Run once on load
    animateOnScroll();
    
    // Then run on scroll
    window.addEventListener('scroll', animateOnScroll);
});