// Particles Animation
const particlesContainer = document.getElementById('particles');

function createParticle() {
    const particle = document.createElement('div');
    particle.className = 'particle';
    
    particle.style.left = Math.random() * 100 + '%';
    particle.style.top = Math.random() * 100 + '%';
    
    const size = 3 + Math.random() * 4;
    particle.style.width = size + 'px';
    particle.style.height = size + 'px';
    
    const duration = 3 + Math.random() * 5;
    const delay = Math.random() * 2;
    const moveX = (Math.random() - 0.5) * 200;
    
    const animationName = `float-${Date.now()}-${Math.random()}`;
    const keyframes = `
        @keyframes ${animationName} {
            0% { 
                transform: translateY(0) translateX(0); 
                opacity: 0; 
            }
            10% { 
                opacity: 1; 
            }
            90% { 
                opacity: 1; 
            }
            100% { 
                transform: translateY(-100vh) translateX(${moveX}px); 
                opacity: 0; 
            }
        }
    `;
    
    const style = document.createElement('style');
    style.innerHTML = keyframes;
    document.head.appendChild(style);
    
    particle.style.animation = `${animationName} ${duration}s ${delay}s ease-in-out forwards`;
    
    particlesContainer.appendChild(particle);
    
    setTimeout(() => {
        particle.remove();
        style.remove();
    }, (duration + delay) * 1000);
}

setInterval(createParticle, 300);

for (let i = 0; i < 25; i++) {
    setTimeout(createParticle, i * 100);
}