/**
 * Swup Transitions CSS
 * 
 * Estilos para las transiciones smooth entre páginas
 * 
 * IMPORTANTE: Este es el ÚNICO CSS compartido en todo el proyecto
 * Razón: Las transiciones son universales (no específicas de módulos)
 * 
 * Versión: 4.0.0
 */

/* ==========================================
   TRANSICIÓN FADE
   ========================================== */

/**
 * Estado normal del contenedor
 */
.swup-transition {
  opacity: 1;
  transition: opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

/**
 * Durante la animación (fade out/in)
 */
html.is-animating .swup-transition {
  opacity: 0;
}

/* ==========================================
   LOADING STATE (opcional)
   ========================================== */

/**
 * Cursor de espera durante el cambio
 */
body.is-changing {
  cursor: wait;
}

/**
 * Deshabilitar interacciones durante el cambio
 */
body.is-changing * {
  pointer-events: none;
}

/* ==========================================
   ANIMACIONES ADICIONALES (opcional)
   ========================================== */

/**
 * Smooth scroll behavior (cuando NO está cambiando)
 */
html:not(.is-animating) {
  scroll-behavior: smooth;
}

/**
 * Animación sutil de entrada
 */
html.is-animating .swup-transition {
  transform: translateY(10px);
}

.swup-transition {
  transform: translateY(0);
  transition: 
    opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1),
    transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ==========================================
   PRELOAD INDICATOR (opcional)
   ========================================== */

/**
 * Indicador visual de preload en enlaces
 * (cuando haces hover, Swup precarga la página)
 */
a[href]:hover {
  /* Puedes añadir un efecto visual sutil si quieres */
  /* transition: opacity 0.15s ease; */
}

/* ==========================================
   RESPONSIVE
   ========================================== */

/**
 * En móvil, transiciones más rápidas
 */
@media (max-width: 640px) {
  .swup-transition {
    transition-duration: 0.2s;
  }
}

/**
 * Reducir movimiento si el usuario lo prefiere
 */
@media (prefers-reduced-motion: reduce) {
  .swup-transition {
    transition-duration: 0.01s !important;
    transform: none !important;
  }
  
  body.is-changing {
    cursor: default;
  }
}