window.sketch = () => {
  const svg = window.svgRoot || document.querySelector('svg');
  const group = svg.querySelector('#particles') || svg;
  const items = [];
  const colors = ['#ff8844', '#a855f7', '#3b82f6', '#ffffff'];

  for (let i = 0; i < 120; i++) {
    const el = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
    el.setAttribute('r', Math.random() * 3 + 1);
    el.setAttribute('fill', colors[Math.floor(Math.random() * colors.length)]);
    el.setAttribute('opacity', Math.random() * 0.6 + 0.2);
    group.appendChild(el);
    items.push({
      el,
      x: Math.random() * 800,
      y: Math.random() * 600,
      vx: (Math.random() - 0.5) * 2,
      vy: (Math.random() - 0.5) * 2,
      targetX: 400 + (Math.random() - 0.5) * 200,
      targetY: 300 + (Math.random() - 0.5) * 200
    });
  }

  (function tick() {
    items.forEach(p => {
      p.x += p.vx;
      p.y += p.vy;
      const dx = p.targetX - p.x;
      const dy = p.targetY - p.y;
      const dist = Math.sqrt(dx * dx + dy * dy);
      if (dist < 50) {
        p.targetX = 400 + (Math.random() - 0.5) * 200;
        p.targetY = 300 + (Math.random() - 0.5) * 200;
      }
      p.vx += dx * 0.001;
      p.vy += dy * 0.001;
      p.vx *= 0.98;
      p.vy *= 0.98;
      p.el.setAttribute('cx', p.x);
      p.el.setAttribute('cy', p.y);
    });
    requestAnimationFrame(tick);
  })();
};
