/* ============================================================
   TRANSICIONES CINEMATOGRÁFICAS ENTRE PÁGINAS
   Cross-Document View Transitions API nativa. Sin soporte del navegador,
   esta regla se ignora y la navegación es la normal (fallback automático).
   ============================================================ */
@view-transition {
  navigation: auto;
}

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 400ms;
  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

::view-transition-old(root) {
  animation-name: eb-salida;
}
::view-transition-new(root) {
  animation-name: eb-entrada;
}

@keyframes eb-salida {
  from { opacity: 1; transform: translateX(0); }
  to { opacity: 0; transform: translateX(-24px); }
}
@keyframes eb-entrada {
  from { opacity: 0; transform: translateX(24px); }
  to { opacity: 1; transform: translateX(0); }
}

/* Logo: morph consistente entre las 3 páginas (misma view-transition-name
   en .hero-logo del landing y .header-logo de about/tienda, ver styles.css) */
::view-transition-group(site-logo) {
  animation-duration: 400ms;
  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

@media (prefers-reduced-motion: reduce) {
  @view-transition {
    navigation: none;
  }
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation: none !important;
  }
}