document.addEventListener('DOMContentLoaded', function() {
    // Initialize confetti effect on page load
    initConfetti();
    
    // Add confetti effect to welcome section button click
    const welcomeButton = document.querySelector('.welcome-button');
    if (welcomeButton) {
        welcomeButton.addEventListener('click', function() {
            createConfetti();
        });
    }
    
    // Add confetti effect to any button with data-confetti attribute
    document.querySelectorAll('[data-confetti]').forEach(button => {
        button.addEventListener('click', function() {
            createConfetti();
        });
    });
});

function initConfetti() {
    // Create a splash confetti effect when the page loads
    setTimeout(() => {
        createConfetti();
    }, 500);
}

function createConfetti() {
    const confettiCount = 150;
    const colors = ['#ff6b6b', '#4ecdc4', '#45b7d1', '#96ceb4', '#feca57', '#ff9ff3', '#54a0ff'];
    
    for (let i = 0; i < confettiCount; i++) {
        const confetti = document.createElement('div');
        confetti.style.position = 'fixed';
        confetti.style.width = Math.random() * 10 + 5 + 'px';
        confetti.style.height = Math.random() * 10 + 5 + 'px';
        confetti.style.backgroundColor = colors[Math.floor(Math.random() * colors.length)];
        confetti.style.borderRadius = '50%';
        confetti.style.zIndex = '9999';
        confetti.style.left = Math.random() * 100 + 'vw';
        confetti.style.top = '-10px';
        
        document.body.appendChild(confetti);
        
        // Animate confetti falling
        const animationDuration = Math.random() * 3 + 2;
        const targetX = (Math.random() - 0.5) * 100;
        
        confetti.animate([
            { transform: 'translate(0, 0) rotate(0deg)', opacity: 1 },
            { transform: `translate(${targetX}vw, 100vh) rotate(${Math.random() * 360}deg)`, opacity: 0 }
        ], {
            duration: animationDuration * 1000,
            easing: 'cubic-bezier(0.1, 0.8, 0.2, 1)'
        });
        
        // Remove confetti after animation
        setTimeout(() => {
            confetti.remove();
        }, animationDuration * 1000);
    }
}