/** =============================================================================
 * assets/css/mobile-menu-visuals.css
 * Estilos para el icono hamburguesa animado y overlay de blur
 * =========================================================================== */

/* === Variables CSS personalizables === */
:root {
  --hamburger-w: 30px;      /* ancho total del icono */
  --hamburger-h: 5px;       /* grosor de cada barra */
  --hamburger-gap: 6px;     /* separación vertical entre barras */
  --hamburger-time: .3s;    /* duración de animación */
  --hamburger-ease: cubic-bezier(.25, .8, .25, 1);
  
  --menu-blur-amount: 12px; /* intensidad de desenfoque */
  --menu-dim-opacity: .25;  /* oscurecimiento del fondo */
  --menu-fade-time: .3s;    /* duración del fade */
}

/* === Ocultar icono nativo (solo cuando el nuevo está listo) === */
.hamburger-enhanced svg,
.hamburger-enhanced .ast-mobile-svg,
.hamburger-enhanced .ast-icon,
.hamburger-enhanced .menu-toggle-icon,
.hamburger-enhanced .ast-menu-toggle-icon {
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  width: 0 !important;
  height: 0 !important;
  display: none !important;
}

/* === Contenedor del botón mejorado === */
.has-animated-hamburger {
  position: relative;
  min-width: 44px;  /* Área táctil mínima accesible */
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* === Caja del icono animado === */
.has-animated-hamburger .hamburger-box {
  position: relative;
  width: var(--hamburger-w);
  height: calc(var(--hamburger-h) * 3 + var(--hamburger-gap) * 2);
  pointer-events: none;
  z-index: 100001; /* Asegurar que esté siempre visible */
  display: block;
}

/* === Barras del hamburguesa === */
.has-animated-hamburger .hamburger-bar {
  position: absolute;
  left: 0;
  width: 100%;
  height: var(--hamburger-h);
  background: currentColor;
  border-radius: calc(var(--hamburger-h) / 2);
  transform-origin: center;
  transition: 
    transform var(--hamburger-time) var(--hamburger-ease),
    top var(--hamburger-time) var(--hamburger-ease),
    bottom var(--hamburger-time) var(--hamburger-ease),
    opacity calc(var(--hamburger-time) * 0.8) var(--hamburger-ease);
}

/* Posiciones iniciales de las barras */
.has-animated-hamburger .hamburger-bar:nth-child(1) {
  top: 0;
}

.has-animated-hamburger .hamburger-bar:nth-child(2) {
  top: calc(50% - var(--hamburger-h) / 2);
}

.has-animated-hamburger .hamburger-bar:nth-child(3) {
  bottom: 0;
  top: auto;
}

/* === Estado activo: transformación a X === */
.has-animated-hamburger.is-active .hamburger-bar:nth-child(1) {
  top: calc(50% - var(--hamburger-h) / 2);
  transform: rotate(45deg);
}

.has-animated-hamburger.is-active .hamburger-bar:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}

.has-animated-hamburger.is-active .hamburger-bar:nth-child(3) {
  bottom: auto;
  top: calc(50% - var(--hamburger-h) / 2);
  transform: rotate(-45deg);
}

/* === Mejoras de accesibilidad === */
.has-animated-hamburger {
  -webkit-tap-highlight-color: transparent;
}

.has-animated-hamburger:focus {
  outline: none;
}

.has-animated-hamburger:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 4px;
  border-radius: 4px;
}



/* === Animación adicional para el menú móvil === */
@media (max-width: 921px) {
  /* Transición suave del drawer del menú */
  .ast-mobile-popup-drawer,
  .ast-mobile-popup-inner {
    transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1),
                opacity 0.3s ease;
  }
  
  /* Animación escalonada de items del menú */
  .is-mobile-menu-open .ast-mobile-popup-drawer li,
  .ast-mobile-popup-visible .ast-mobile-popup-inner li {
    animation: menuItemSlideIn 0.4s ease backwards;
  }
  
  /* Delays escalonados para cada item */
  .is-mobile-menu-open .ast-mobile-popup-drawer li:nth-child(1),
  .ast-mobile-popup-visible .ast-mobile-popup-inner li:nth-child(1) {
    animation-delay: 0.05s;
  }
  
  .is-mobile-menu-open .ast-mobile-popup-drawer li:nth-child(2),
  .ast-mobile-popup-visible .ast-mobile-popup-inner li:nth-child(2) {
    animation-delay: 0.1s;
  }
  
  .is-mobile-menu-open .ast-mobile-popup-drawer li:nth-child(3),
  .ast-mobile-popup-visible .ast-mobile-popup-inner li:nth-child(3) {
    animation-delay: 0.15s;
  }
  
  .is-mobile-menu-open .ast-mobile-popup-drawer li:nth-child(4),
  .ast-mobile-popup-visible .ast-mobile-popup-inner li:nth-child(4) {
    animation-delay: 0.2s;
  }
  
  .is-mobile-menu-open .ast-mobile-popup-drawer li:nth-child(5),
  .ast-mobile-popup-visible .ast-mobile-popup-inner li:nth-child(5) {
    animation-delay: 0.25s;
  }
}

/* Keyframe para animación de entrada */
@keyframes menuItemSlideIn {
  from {
    opacity: 0;
    transform: translateX(-20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}