Menú de Navegación Atracción Magnética

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Inter', sans-serif;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  min-height: 100vh;
  overflow-x: hidden;
  position: relative;
  cursor: none;
}

body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: 
    radial-gradient(circle at 25% 25%, rgba(255, 255, 255, 0.1) 0%, transparent 50%),
    radial-gradient(circle at 75% 75%, rgba(255, 255, 255, 0.1) 0%, transparent 50%);
  pointer-events: none;
  z-index: -1;
}

.magnetic-menu {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.menu-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 40px;
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
}

.brand-logo {
  position: relative;
  display: flex;
  align-items: center;
  cursor: pointer;
}

.brand-text {
  font-size: 1.8rem;
  font-weight: 700;
  color: #ffffff;
  text-shadow: 0 0 20px rgba(255, 255, 255, 0.5);
  letter-spacing: 2px;
  position: relative;
  z-index: 3;
  transition: all 0.3s ease;
}

.logo-magnetic-field {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100px;
  height: 50px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  opacity: 0;
  transition: all 0.3s ease;
}

.logo-attraction {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80px;
  height: 30px;
  background: radial-gradient(ellipse, rgba(255, 255, 255, 0.2) 0%, transparent 70%);
  border-radius: 50%;
  opacity: 0;
  transition: all 0.3s ease;
}

.brand-logo:hover .logo-magnetic-field {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1.2);
}

.brand-logo:hover .logo-attraction {
  opacity: 1;
  animation: magnetic-pulse 2s ease-in-out infinite;
}

.menu-items {
  display: flex;
  list-style: none;
  gap: 40px;
  margin: 0;
  padding: 0;
}

.menu-item {
  position: relative;
}

.menu-link {
  position: relative;
  display: block;
  color: #ffffff;
  text-decoration: none;
  font-weight: 500;
  font-size: 1rem;
  padding: 15px 25px;
  border-radius: 12px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  transform-origin: center;
}

.link-text {
  position: relative;
  z-index: 3;
  transition: all 0.3s ease;
}

.magnetic-field {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 120px;
  height: 60px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  opacity: 0;
  transition: all 0.3s ease;
}

.attraction-trail {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 0;
  height: 0;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.4) 0%, transparent 70%);
  border-radius: 50%;
  transition: all 0.4s ease;
}

.menu-link.magnetic-active {
  transform: scale(1.1);
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.4);
  box-shadow: 
    0 10px 30px rgba(255, 255, 255, 0.2),
    inset 0 0 20px rgba(255, 255, 255, 0.1);
}

.menu-link.magnetic-active .magnetic-field {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1.2);
  animation: magnetic-field-pulse 1.5s ease-in-out infinite;
}

.menu-link.magnetic-active .attraction-trail {
  width: 100px;
  height: 100px;
  animation: attraction-ripple 1s ease-out infinite;
}

.menu-link.magnetic-active .link-text {
  text-shadow: 0 0 15px rgba(255, 255, 255, 0.8);
}

.magnetic-toggle {
  position: relative;
}

.toggle-btn {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: #ffffff;
  padding: 12px 24px;
  border-radius: 25px;
  cursor: pointer;
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.toggle-magnetic-field {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80px;
  height: 40px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  opacity: 0;
  transition: all 0.3s ease;
}

.toggle-text {
  position: relative;
  z-index: 2;
}

.toggle-btn:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.5);
  transform: scale(1.05);
}

.toggle-btn:hover .toggle-magnetic-field {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1.1);
}

.toggle-btn.active {
  background: rgba(255, 255, 255, 0.3);
  border-color: #ffffff;
  box-shadow: 0 0 20px rgba(255, 255, 255, 0.4);
}

.toggle-btn.active .toggle-magnetic-field {
  opacity: 1;
  animation: magnetic-field-pulse 2s ease-in-out infinite;
}

.magnetic-cursor {
  position: fixed;
  width: 20px;
  height: 20px;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0.3) 50%, transparent 100%);
  border-radius: 50%;
  pointer-events: none;
  z-index: 9999;
  transition: all 0.1s ease;
  mix-blend-mode: difference;
}

.magnetic-cursor.attracted {
  transform: scale(1.5);
  background: radial-gradient(circle, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.6) 50%, transparent 100%);
}

@keyframes magnetic-pulse {
  0%, 100% {
    opacity: 0.2;
    transform: translate(-50%, -50%) scale(1);
  }
  50% {
    opacity: 0.6;
    transform: translate(-50%, -50%) scale(1.2);
  }
}

@keyframes magnetic-field-pulse {
  0%, 100% {
    opacity: 0.3;
    transform: translate(-50%, -50%) scale(1.2);
  }
  50% {
    opacity: 0.8;
    transform: translate(-50%, -50%) scale(1.4);
  }
}

@keyframes attraction-ripple {
  0% {
    width: 0;
    height: 0;
    opacity: 0.8;
  }
  50% {
    width: 100px;
    height: 100px;
    opacity: 0.4;
  }
  100% {
    width: 150px;
    height: 150px;
    opacity: 0;
  }
}

@media (max-width: 768px) {
  .menu-container {
    flex-direction: column;
    gap: 20px;
    padding: 20px;
  }
  
  .menu-items {
    gap: 20px;
    flex-wrap: wrap;
    justify-content: center;
  }
  
  .menu-link {
    padding: 12px 20px;
    font-size: 0.9rem;
  }
  
  .brand-text {
    font-size: 1.5rem;
    letter-spacing: 1px;
  }
  
  body {
    cursor: auto;
  }
  
  .magnetic-cursor {
    display: none;
  }
}

@media (max-width: 480px) {
  .menu-items {
    flex-direction: column;
    width: 100%;
  }
  
  .menu-link {
    text-align: center;
    width: 100%;
  }
  
  .magnetic-toggle {
    width: 100%;
  }
  
  .toggle-btn {
    width: 100%;
  }
}

document.addEventListener('DOMContentLoaded', function() {
  const menuLinks = document.querySelectorAll('.menu-link[data-magnetic="true"]');
  const toggleBtn = document.getElementById('magneticToggle');
  const magneticCursor = document.getElementById('magneticCursor');
  const brandLogo = document.querySelector('.brand-logo');
  
  let magneticEnabled = true;
  let mouseX = 0;
  let mouseY = 0;
  
  // Configuración de atracción magnética
  const magneticConfig = {
    strength: 0.3,
    radius: 100,
    smoothing: 0.1
  };
  
  // Actualizar posición del cursor personalizado
  function updateCursor(e) {
    mouseX = e.clientX;
    mouseY = e.clientY;
    
    if (magneticCursor) {
      magneticCursor.style.left = mouseX - 10 + 'px';
      magneticCursor.style.top = mouseY - 10 + 'px';
    }
  }
  
  // Calcular distancia entre dos puntos
  function getDistance(x1, y1, x2, y2) {
    return Math.sqrt(Math.pow(x2 - x1, 2) + Math.pow(y2 - y1, 2));
  }
  
  // Aplicar efecto magnético
  function applyMagneticEffect(element, mouseX, mouseY) {
    if (!magneticEnabled) return;
    
    const rect = element.getBoundingClientRect();
    const centerX = rect.left + rect.width / 2;
    const centerY = rect.top + rect.height / 2;
    
    const distance = getDistance(mouseX, mouseY, centerX, centerY);
    
    if (distance < magneticConfig.radius) {
      const force = (magneticConfig.radius - distance) / magneticConfig.radius;
      const pullX = (mouseX - centerX) * force * magneticConfig.strength;
      const pullY = (mouseY - centerY) * force * magneticConfig.strength;
      
      element.style.transform = `translate(${pullX}px, ${pullY}px) scale(${1 + force * 0.1})`;
      element.classList.add('magnetic-active');
      
      if (magneticCursor) {
        magneticCursor.classList.add('attracted');
      }
    } else {
      element.style.transform = 'translate(0px, 0px) scale(1)';
      element.classList.remove('magnetic-active');
      
      if (magneticCursor) {
        magneticCursor.classList.remove('attracted');
      }
    }
  }
  
  // Manejar movimiento del mouse
  document.addEventListener('mousemove', function(e) {
    updateCursor(e);
    
    if (!magneticEnabled) return;
    
    // Aplicar efecto magnético a los enlaces del menú
    menuLinks.forEach(link => {
      applyMagneticEffect(link, e.clientX, e.clientY);
    });
    
    // Aplicar efecto magnético al logo de marca
    if (brandLogo) {
      applyMagneticEffect(brandLogo, e.clientX, e.clientY);
    }
    
    // Aplicar efecto magnético al botón de alternancia
    if (toggleBtn) {
      applyMagneticEffect(toggleBtn, e.clientX, e.clientY);
    }
  });
  
  // Funcionalidad del botón de alternancia
  toggleBtn.addEventListener('click', function() {
    magneticEnabled = !magneticEnabled;
    this.classList.toggle('active');
    
    if (magneticEnabled) {
      this.querySelector('.toggle-text').textContent = 'Magnético';
    } else {
      this.querySelector('.toggle-text').textContent = 'Deshabilitado';
      
      // Restablecer todas las transformaciones
      menuLinks.forEach(link => {
        link.style.transform = 'translate(0px, 0px) scale(1)';
        link.classList.remove('magnetic-active');
      });
      
      if (brandLogo) {
        brandLogo.style.transform = 'translate(0px, 0px) scale(1)';
      }
      
      this.style.transform = 'translate(0px, 0px) scale(1)';
      
      if (magneticCursor) {
        magneticCursor.classList.remove('attracted');
      }
    }
  });
  
  // Efectos de clic
  menuLinks.forEach(link => {
    link.addEventListener('click', function(e) {
      e.preventDefault();
      
      // Crear efecto de ondas magnéticas
      const rect = this.getBoundingClientRect();
      const centerX = rect.left + rect.width / 2;
      const centerY = rect.top + rect.height / 2;
      
      // Crear elemento de onda
      const wave = document.createElement('div');
      wave.style.position = 'fixed';
      wave.style.left = centerX - 25 + 'px';
      wave.style.top = centerY - 25 + 'px';
      wave.style.width = '50px';
      wave.style.height = '50px';
      wave.style.border = '2px solid rgba(255, 255, 255, 0.6)';
      wave.style.borderRadius = '50%';
      wave.style.pointerEvents = 'none';
      wave.style.zIndex = '9998';
      wave.style.animation = 'magnetic-wave 0.6s ease-out forwards';
      
      document.body.appendChild(wave);
      
      // Remover el elemento después de la animación
      setTimeout(() => {
        wave.remove();
      }, 600);
      
      // Efecto de vibración
      this.style.animation = 'magnetic-vibrate 0.3s ease-in-out';
      setTimeout(() => {
        this.style.animation = '';
      }, 300);
    });
  });
  
  // Interacción del logo de marca
  brandLogo.addEventListener('click', function() {
    // Crear múltiples ondas magnéticas
    const rect = this.getBoundingClientRect();
    const centerX = rect.left + rect.width / 2;
    const centerY = rect.top + rect.height / 2;
    
    for (let i = 0; i < 3; i++) {
      setTimeout(() => {
        const wave = document.createElement('div');
        wave.style.position = 'fixed';
        wave.style.left = centerX - 30 + 'px';
        wave.style.top = centerY - 30 + 'px';
        wave.style.width = '60px';
        wave.style.height = '60px';
        wave.style.border = '3px solid rgba(255, 255, 255, 0.8)';
        wave.style.borderRadius = '50%';
        wave.style.pointerEvents = 'none';
        wave.style.zIndex = '9998';
        wave.style.animation = 'magnetic-wave 1s ease-out forwards';
        
        document.body.appendChild(wave);
        
        setTimeout(() => {
          wave.remove();
        }, 1000);
      }, i * 200);
    }
  });
  
  // Agregar CSS para animaciones adicionales
  const style = document.createElement('style');
  style.textContent = `
    @keyframes magnetic-wave {
      0% {
        transform: scale(1);
        opacity: 0.8;
      }
      100% {
        transform: scale(4);
        opacity: 0;
      }
    }
    
    @keyframes magnetic-vibrate {
      0%, 100% { transform: translate(0px, 0px); }
      25% { transform: translate(-2px, 0px); }
      75% { transform: translate(2px, 0px); }
    }
  `;
  document.head.appendChild(style);
  
  // Optimización de rendimiento
  let ticking = false;
  
  function optimizedMouseMove(e) {
    if (!ticking) {
      requestAnimationFrame(() => {
        updateCursor(e);
        
        if (magneticEnabled) {
          menuLinks.forEach(link => {
            applyMagneticEffect(link, e.clientX, e.clientY);
          });
          
          if (brandLogo) {
            applyMagneticEffect(brandLogo, e.clientX, e.clientY);
          }
          
          if (toggleBtn) {
            applyMagneticEffect(toggleBtn, e.clientX, e.clientY);
          }
        }
        
        ticking = false;
      });
      ticking = true;
    }
  }
  
  // Reemplazar el event listener original con la versión optimizada
  document.removeEventListener('mousemove', updateCursor);
  document.addEventListener('mousemove', optimizedMouseMove);
  
  // Manejar salida del mouse de la ventana
  document.addEventListener('mouseleave', function() {
    if (magneticCursor) {
      magneticCursor.style.opacity = '0';
    }
  });
  
  document.addEventListener('mouseenter', function() {
    if (magneticCursor) {
      magneticCursor.style.opacity = '1';
    }
  });
});