document.addEventListener('DOMContentLoaded', () => {
    // Add cosmic particles animation
    createParticles();
    
    // Animate elements on scroll
    animateOnScroll();
    
    // Add hover effects to interactive elements
    addHoverEffects();
});

function createParticles() {
    const particleContainer = document.createElement('div');
    particleContainer.className = 'fixed inset-0 -z-10 overflow-hidden pointer-events-none';
    document.body.appendChild(particleContainer);
    
    for (let i = 0; i < 50; i++) {
        const particle = document.createElement('div');
        particle.className = 'absolute rounded-full bg-gradient-to-r from-cosmic-500 to-nebula-500';
        particle.style.width = `${Math.random() * 5 + 1}px`;
        particle.style.height = particle.style.width;
        particle.style.left = `${Math.random() * 100}vw`;
        particle.style.top = `${Math.random() * 100}vh`;
        particle.style.opacity = Math.random() * 0.5 + 0.1;
        
        const duration = Math.random() * 20 + 10;
        particle.style.animation = `float ${duration}s linear infinite`;
        
        particleContainer.appendChild(particle);
    }
}

function animateOnScroll() {
    const observer = new IntersectionObserver((entries) => {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                entry.target.classList.add('animate-fadeInUp');
            }
        });
    }, {
        threshold: 0.1
    });
    
    document.querySelectorAll('.p-6').forEach(card => {
        observer.observe(card);
        card.classList.add('opacity-0', 'transition-all', 'duration-500', 'transform', 'translate-y-6');
    });
}

function addHoverEffects() {
    const cards = document.querySelectorAll('.p-6');
    cards.forEach(card => {
        card.addEventListener('mouseenter', () => {
            const icon = card.querySelector('i');
            icon.classList.add('animate-pulse');
        });
        
        card.addEventListener('mouseleave', () => {
            const icon = card.querySelector('i');
            icon.classList.remove('animate-pulse');
        });
    });
}