Menú Flotante Glassmorphism

@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;
}

body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: 
    radial-gradient(circle at 20% 80%, rgba(120, 119, 198, 0.3) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(255, 119, 198, 0.3) 0%, transparent 50%),
    radial-gradient(circle at 40% 40%, rgba(120, 219, 255, 0.3) 0%, transparent 50%);
  pointer-events: none;
  z-index: -1;
}

.glassmorphism-menu {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1000;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 20px;
  box-shadow: 
    0 8px 32px rgba(0, 0, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
  transition: all 0.3s ease;
}

.glassmorphism-menu:hover {
  background: rgba(255, 255, 255, 0.15);
  box-shadow: 
    0 12px 40px rgba(0, 0, 0, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.menu-container {
  display: flex;
  align-items: center;
  padding: 15px 25px;
  gap: 30px;
  position: relative;
}

.brand-logo {
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.logo-icon {
  position: relative;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.glass-sphere {
  width: 30px;
  height: 30px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.1) 100%);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 
    0 4px 15px rgba(0, 0, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.4);
  transition: all 0.3s ease;
}

.brand-logo:hover .glass-sphere {
  transform: scale(1.1);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0.2) 100%);
  box-shadow: 
    0 6px 20px rgba(0, 0, 0, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

.brand-text {
  font-size: 1.5rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.9);
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.brand-logo:hover .brand-text {
  color: rgba(255, 255, 255, 1);
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

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

.menu-item {
  position: relative;
}

.menu-link {
  position: relative;
  display: block;
  color: rgba(255, 255, 255, 0.8);
  text-decoration: none;
  font-weight: 500;
  font-size: 0.95rem;
  padding: 12px 20px;
  border-radius: 12px;
  transition: all 0.3s ease;
  overflow: hidden;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.glass-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 12px;
  opacity: 0;
  transition: all 0.3s ease;
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
}

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

.hover-effect {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 0;
  height: 0;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.3) 0%, transparent 70%);
  border-radius: 50%;
  opacity: 0;
  transition: all 0.4s ease;
  pointer-events: none;
}

.menu-link:hover {
  color: rgba(255, 255, 255, 1);
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  transform: translateY(-2px);
}

.menu-link:hover .glass-bg {
  opacity: 1;
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.3);
  box-shadow: 
    0 8px 25px rgba(0, 0, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.menu-link:hover .hover-effect {
  width: 100px;
  height: 100px;
  opacity: 1;
}

.menu-toggle {
  position: relative;
  display: none;
}

.toggle-btn {
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.8);
  font-size: 1.2rem;
  padding: 12px;
  border-radius: 12px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.toggle-icon {
  position: relative;
  z-index: 2;
  transition: all 0.3s ease;
}

.toggle-btn:hover {
  color: rgba(255, 255, 255, 1);
  transform: scale(1.05);
}

.toggle-btn:hover .glass-bg {
  opacity: 1;
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.3);
}

.glass-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
  border-radius: 20px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.glassmorphism-menu:hover .glass-overlay {
  opacity: 1;
}

@media (max-width: 768px) {
  .glassmorphism-menu {
    top: 10px;
    left: 10px;
    right: 10px;
    transform: none;
    border-radius: 15px;
  }
  
  .menu-container {
    padding: 12px 20px;
    gap: 20px;
  }
  
  .menu-items {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 15px;
    margin-top: 10px;
    padding: 15px;
    flex-direction: column;
    gap: 8px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  }
  
  .menu-items.active {
    display: flex;
  }
  
  .menu-toggle {
    display: block;
    margin-left: auto;
  }
  
  .menu-link {
    padding: 15px 20px;
    text-align: center;
    border-radius: 10px;
  }
  
  .brand-text {
    font-size: 1.3rem;
  }
  
  .glass-sphere {
    width: 25px;
    height: 25px;
  }
}

@media (max-width: 480px) {
  .menu-container {
    padding: 10px 15px;
    gap: 15px;
  }
  
  .brand-text {
    font-size: 1.2rem;
  }
  
  .menu-link {
    padding: 12px 15px;
    font-size: 0.9rem;
  }
}

document.addEventListener('DOMContentLoaded', function() {
  const menuToggle = document.getElementById('menuToggle');
  const menuItems = document.querySelector('.menu-items');
  const menuLinks = document.querySelectorAll('.menu-link');
  const glassmorphismMenu = document.querySelector('.glassmorphism-menu');
  
  // Configuración de efectos
  const effectConfig = {
    rippleDuration: 600,
    hoverDelay: 100,
    glassIntensity: 0.2
  };
  
  // Toggle del menú móvil
  if (menuToggle) {
    menuToggle.addEventListener('click', function() {
      menuItems.classList.toggle('active');
      
      // Animar icono del toggle
      const icon = this.querySelector('.toggle-icon');
      if (menuItems.classList.contains('active')) {
        icon.style.transform = 'rotate(90deg)';
      } else {
        icon.style.transform = 'rotate(0deg)';
      }
    });
  }
  
  // Efectos de ripple en los enlaces
  menuLinks.forEach(link => {
    link.addEventListener('click', function(e) {
      e.preventDefault();
      
      // Crear efecto ripple
      createRippleEffect(this, e);
      
      // Simular navegación
      setTimeout(() => {
        console.log('Navegando a:', this.querySelector('.link-text').textContent);
      }, 300);
    });
    
    // Efecto de hover mejorado
    link.addEventListener('mouseenter', function() {
      createGlassEffect(this);
    });
    
    link.addEventListener('mouseleave', function() {
      removeGlassEffect(this);
    });
  });
  
  // Crear efecto ripple
  function createRippleEffect(element, event) {
    const rect = element.getBoundingClientRect();
    const size = Math.max(rect.width, rect.height);
    const x = event.clientX - rect.left - size / 2;
    const y = event.clientY - rect.top - size / 2;
    
    const ripple = document.createElement('div');
    ripple.style.position = 'absolute';
    ripple.style.left = x + 'px';
    ripple.style.top = y + 'px';
    ripple.style.width = size + 'px';
    ripple.style.height = size + 'px';
    ripple.style.background = 'radial-gradient(circle, rgba(255, 255, 255, 0.6) 0%, transparent 70%)';
    ripple.style.borderRadius = '50%';
    ripple.style.pointerEvents = 'none';
    ripple.style.transform = 'scale(0)';
    ripple.style.opacity = '1';
    ripple.style.transition = `transform ${effectConfig.rippleDuration}ms ease-out, opacity ${effectConfig.rippleDuration}ms ease-out`;
    ripple.style.zIndex = '1';
    
    element.appendChild(ripple);
    
    // Animar ripple
    requestAnimationFrame(() => {
      ripple.style.transform = 'scale(2)';
      ripple.style.opacity = '0';
    });
    
    // Limpiar ripple
    setTimeout(() => {
      ripple.remove();
    }, effectConfig.rippleDuration);
  }
  
  // Crear efecto de vidrio mejorado
  function createGlassEffect(element) {
    const glassLayer = document.createElement('div');
    glassLayer.className = 'dynamic-glass';
    glassLayer.style.position = 'absolute';
    glassLayer.style.top = '0';
    glassLayer.style.left = '0';
    glassLayer.style.width = '100%';
    glassLayer.style.height = '100%';
    glassLayer.style.background = `linear-gradient(135deg, rgba(255, 255, 255, ${effectConfig.glassIntensity}) 0%, rgba(255, 255, 255, ${effectConfig.glassIntensity * 0.5}) 100%)`;
    glassLayer.style.backdropFilter = 'blur(20px)';
    glassLayer.style.webkitBackdropFilter = 'blur(20px)';
    glassLayer.style.border = '1px solid rgba(255, 255, 255, 0.3)';
    glassLayer.style.borderRadius = '12px';
    glassLayer.style.opacity = '0';
    glassLayer.style.transition = 'opacity 0.3s ease';
    glassLayer.style.pointerEvents = 'none';
    glassLayer.style.zIndex = '0';
    
    element.appendChild(glassLayer);
    
    requestAnimationFrame(() => {
      glassLayer.style.opacity = '1';
    });
  }
  
  // Remover efecto de vidrio
  function removeGlassEffect(element) {
    const glassLayer = element.querySelector('.dynamic-glass');
    if (glassLayer) {
      glassLayer.style.opacity = '0';
      setTimeout(() => {
        glassLayer.remove();
      }, 300);
    }
  }
  
  // Efecto de paralaje suave
  let ticking = false;
  
  function updateParallax() {
    if (!ticking) {
      requestAnimationFrame(() => {
        const scrolled = window.pageYOffset;
        const rate = scrolled * -0.5;
        
        glassmorphismMenu.style.transform = `translateX(-50%) translateY(${rate * 0.1}px)`;
        
        ticking = false;
      });
      ticking = true;
    }
  }
  
  window.addEventListener('scroll', updateParallax);
  
  // Efecto de mouse tracking
  document.addEventListener('mousemove', function(e) {
    const rect = glassmorphismMenu.getBoundingClientRect();
    const centerX = rect.left + rect.width / 2;
    const centerY = rect.top + rect.height / 2;
    
    const deltaX = (e.clientX - centerX) / window.innerWidth;
    const deltaY = (e.clientY - centerY) / window.innerHeight;
    
    const rotateX = deltaY * 2;
    const rotateY = deltaX * 2;
    
    glassmorphismMenu.style.transform = `translateX(-50%) rotateX(${rotateX}deg) rotateY(${rotateY}deg)`;
  });
  
  // Cerrar menú móvil al hacer clic fuera
  document.addEventListener('click', function(e) {
    if (!glassmorphismMenu.contains(e.target) && menuItems.classList.contains('active')) {
      menuItems.classList.remove('active');
      const icon = menuToggle.querySelector('.toggle-icon');
      icon.style.transform = 'rotate(0deg)';
    }
  });
  
  // Efectos de entrada
  setTimeout(() => {
    glassmorphismMenu.style.opacity = '1';
    glassmorphismMenu.style.transform = 'translateX(-50%) translateY(0)';
  }, 100);
  
  // Optimización de rendimiento para efectos de vidrio
  const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        entry.target.style.backdropFilter = 'blur(20px)';
      } else {
        entry.target.style.backdropFilter = 'blur(10px)';
      }
    });
  });
  
  observer.observe(glassmorphismMenu);
});