components/particles.js

class ParticleSystem extends HTMLElement {
  connectedCallback() {
    this.attachShadow({ mode: 'open' });
    this.shadowRoot.innerHTML = `
      <style>
        :host {
          display: block;
          position: fixed;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          pointer-events: none;
          z-index: 0;
        }
        
        .particle {
          position: absolute;
          border-radius: 50%;
          background: linear-gradient(135deg, #ec4899, #8b5cf6);
          opacity: 0.7;
          pointer-events: none;
          animation: float 15s infinite ease-in-out;
        }
        
        @keyframes float {
          0%, 100% {
            transform: translate(0, 0);
          }
          25% {
            transform: translate(20px, 20px);
          }
          50% {
            transform: translate(-20px, 20px);
          }
          75% {
            transform: translate(-20px, -20px);
          }
        }
      </style>
      <div id="particles-container"></div>
    `;
    
    this.createParticles();
  }
  
  createParticles() {
    const container = this.shadowRoot.getElementById('particles-container');
    const particleCount = 30;
    
    for (let i = 0; i < particleCount; i++) {
      const particle = document.createElement('div');
      particle.classList.add('particle');
      
      // Random size between 2px and 8px
      const size = Math.random() * 6 + 2;
      particle.style.width = `${size}px`;
      particle.style.height = `${size}px`;
      
      // Random position
      particle.style.left = `${Math.random() * 100}%`;
      particle.style.top = `${Math.random() * 100}%`;
      
      // Random animation delay and duration
      particle.style.animationDelay = `${Math.random() * 5}s`;
      particle.style.animationDuration = `${10 + Math.random() * 20}s`;
      
      // Random color from gradient
      const colors = [
        'rgba(236, 72, 153, 0.7)', 
        'rgba(139, 92, 246, 0.7)', 
        'rgba(79, 70, 229, 0.7)'
      ];
      particle.style.background = colors[Math.floor(Math.random() * colors.length)];
      
      container.appendChild(particle);
    }
  }
}

customElements.define('particle-system', ParticleSystem);