// Floating Particles System - Particles rising from bottom
(function() {
    const container = document.getElementById('floating-particles');
    if (!container) return;

    const particleColors = ['cyan', 'pink', 'purple', 'green', 'orange'];
    const particleCount = 25; // Number of particles

    function createParticle() {
        const particle = document.createElement('div');
        particle.className = `floating-particle ${particleColors[Math.floor(Math.random() * particleColors.length)]}`;
        
        // Random horizontal position
        const leftPos = Math.random() * 100;
        particle.style.left = leftPos + '%';
        
        // Random drift amount (horizontal movement during float)
        const drift = (Math.random() - 0.5) * 150; // -75px to +75px
        particle.style.setProperty('--drift', drift + 'px');
        
        // Random animation duration (slower = more dramatic)
        const duration = 8 + Math.random() * 10; // 8-18 seconds
        particle.style.animationDuration = duration + 's';
        
        // Random delay for staggered effect
        const delay = Math.random() * 5;
        particle.style.animationDelay = delay + 's';
        
        // Random size variation
        const size = 6 + Math.random() * 8; // 6-14px
        particle.style.width = size + 'px';
        particle.style.height = size + 'px';
        
        container.appendChild(particle);
        
        // Remove and recreate after animation completes
        setTimeout(() => {
            particle.remove();
            createParticle();
        }, (duration + delay) * 1000);
    }

    // Initialize particles
    for (let i = 0; i < particleCount; i++) {
        // Stagger initial creation
        setTimeout(() => createParticle(), i * 200);
    }
})();