/* ==========================================================================
   ARTEFACTO VISUAL — View Transitions
   transitions.css v1.0 2026

   Transiciones entre páginas usando la View Transitions API nativa.
   Solo requiere CSS — sin JavaScript, sin librerías externas.

   Compatibilidad:
   - Chrome / Edge 111+  → transición completa
   - Safari 18+          → transición completa
   - Firefox             → degrada sin error (navegación normal)
   - Navegadores viejos  → degrada sin error (navegación normal)

   Cómo funciona:
   El navegador captura una foto de la página actual (old), navega a la
   nueva página (new) y anima el cruce entre ambas capturas.
   La directiva @view-transition { navigation: auto } activa este
   comportamiento automáticamente en todas las navegaciones normales.

   IMPORTANTE: este archivo debe cargarse en TODAS las páginas del sitio,
   tanto en la página de origen como en la de destino. Si falta en alguna,
   esa transición concreta no se aplicará.
   ========================================================================== */


/* --------------------------------------------------------------------------
   ACTIVAR TRANSICIONES ENTRE DOCUMENTOS
   Con navigation: auto el navegador aplica la transición en cualquier
   clic en enlace, navegación con botones atrás/adelante del navegador
   y cualquier navegación iniciada por el usuario.
   -------------------------------------------------------------------------- */

@view-transition {
  navigation: auto;
}


/* --------------------------------------------------------------------------
   ANIMACIONES PERSONALIZADAS

   ::view-transition-old(root) → página que sale
   ::view-transition-new(root) → página que entra

   La página saliente desaparece con un leve desplazamiento hacia arriba.
   La página entrante aparece desde ligeramente abajo.
   El solapamiento breve (delay en la entrada) evita un corte seco.
   -------------------------------------------------------------------------- */

@keyframes vt-salida {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(-8px);
  }
}

@keyframes vt-entrada {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Página saliente */
::view-transition-old(root) {
  animation: 180ms ease-in vt-salida forwards;
}

/* Página entrante — comienza 60ms después para que no se solapen */
::view-transition-new(root) {
  animation: 300ms ease-out vt-entrada both;
  animation-delay: 60ms;
}


/* --------------------------------------------------------------------------
   HEADER ESTABLE
   Sin este bloque el header parpadea durante la transición porque
   desaparece con la página antigua y reaparece con la nueva.
   Asignándole un nombre propio queda excluido del crossfade global
   y permanece visible sin animar durante toda la navegación.
   -------------------------------------------------------------------------- */

.site-header {
  view-transition-name: site-header;
}

::view-transition-old(site-header),
::view-transition-new(site-header) {
  animation: none;
  /* normal evita el modo de mezcla plus-lighter que aplica el navegador
     por defecto y que puede hacer el header más claro de lo esperado */
  mix-blend-mode: normal;
}


/* --------------------------------------------------------------------------
   PREFERS-REDUCED-MOTION
   Si el usuario tiene activada la preferencia de movimiento reducido
   en su sistema, desactivamos todas las animaciones de transición.
   La navegación ocurre igualmente pero sin efectos visuales.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation: none;
  }
}