// Neon Particles Animation - Optimized for Academic Project
const particlesContainer = document.getElementById('particles');
const particleCount = 25; // Reduced for better performance

function createParticle() {
  const particle = document.createElement('div');
  particle.className = 'particle';
  
  // Random position
  particle.style.left = Math.random() * 100 + '%';
  particle.style.top = Math.random() * 100 + '%';
  
  // Random animation duration
  const duration = 20 + Math.random() * 20;
  particle.style.animationDuration = duration + 's';
  
  // Random delay
  particle.style.animationDelay = Math.random() * 10 + 's';
  
  // Random size variation (smaller)
  const size = 3 + Math.random() * 3;
  particle.style.width = size + 'px';
  particle.style.height = size + 'px';
  
  // Random colors (neon theme)
  const colors = [
    'radial-gradient(circle, #00ffff, #0099ff)',
    'radial-gradient(circle, #ff00ff, #cc00ff)',
    'radial-gradient(circle, #00ff99, #00cc77)'
  ];
  particle.style.background = colors[Math.floor(Math.random() * colors.length)];
  
  // Add floating animation
  particle.style.animation = `floatParticle ${duration}s ease-in-out infinite`;
  
  particlesContainer.appendChild(particle);
}

// Create particles
for (let i = 0; i < particleCount; i++) {
  createParticle();
}

// Add CSS animation dynamically
const style = document.createElement('style');
style.textContent = `
  @keyframes floatParticle {
    0%, 100% {
      transform: translate(0, 0) scale(1);
      opacity: 0.3;
    }
    25% {
      transform: translate(15px, -25px) scale(1.1);
      opacity: 0.6;
    }
    50% {
      transform: translate(-10px, -50px) scale(0.9);
      opacity: 0.4;
    }
    75% {
      transform: translate(20px, -35px) scale(1.05);
      opacity: 0.5;
    }
  }
`;
document.head.appendChild(style);