script.js

// Futuristic cursor effect
document.addEventListener('DOMContentLoaded', () => {
  // Create custom cursor
  const cursor = document.createElement('div');
  cursor.style.position = 'fixed';
  cursor.style.width = '20px';
  cursor.style.height = '20px';
  cursor.style.borderRadius = '50%';
  cursor.style.backgroundColor = 'rgba(0, 240, 255, 0.5)';
  cursor.style.pointerEvents = 'none';
  cursor.style.zIndex = '9999';
  cursor.style.transform = 'translate(-50%, -50%)';
  cursor.style.mixBlendMode = 'exclusion';
  cursor.style.transition = 'transform 0.1s ease, width 0.3s ease, height 0.3s ease';
  document.body.appendChild(cursor);

  // Create cursor trail
  const trail = document.createElement('div');
  trail.style.position = 'fixed';
  trail.style.width = '40px';
  trail.style.height = '40px';
  trail.style.borderRadius = '50%';
  trail.style.border = '1px solid rgba(0, 240, 255, 0.3)';
  trail.style.pointerEvents = 'none';
  trail.style.zIndex = '9998';
  trail.style.transform = 'translate(-50%, -50%)';
  trail.style.transition = 'transform 0.4s ease, opacity 0.4s ease';
  document.body.appendChild(trail);

  document.addEventListener('mousemove', (e) => {
    cursor.style.left = `${e.clientX}px`;
    cursor.style.top = `${e.clientY}px`;
    
    setTimeout(() => {
      trail.style.left = `${e.clientX}px`;
      trail.style.top = `${e.clientY}px`;
      trail.style.opacity = '1';
    }, 100);
  });

  document.addEventListener('mouseleave', () => {
    trail.style.opacity = '0';
  });

  document.addEventListener('mousedown', () => {
    cursor.style.width = '15px';
    cursor.style.height = '15px';
  });

  document.addEventListener('mouseup', () => {
    cursor.style.width = '20px';
    cursor.style.height = '20px';
  });

  // Add hover effects
  const hoverElements = document.querySelectorAll('a, button, [data-hover]');
  hoverElements.forEach(el => {
    el.addEventListener('mouseenter', () => {
      cursor.style.width = '40px';
      cursor.style.height = '40px';
      cursor.style.backgroundColor = 'rgba(255, 0, 240, 0.7)';
    });
    el.addEventListener('mouseleave', () => {
      cursor.style.width = '20px';
      cursor.style.height = '20px';
      cursor.style.backgroundColor = 'rgba(0, 240, 255, 0.5)';
    });
  });