/* PushPull_V3/css/transitions.css
   Transiciones entre páginas — View Transitions API (navegación MPA).
   Progresivo: los navegadores sin soporte navegan normal (sin regresión).
   Fundido + micro-desplazamiento, corto (~0.4s) para que se sienta premium
   y nunca lento. La cabecera (.topnav) persiste entre páginas: no parpadea,
   da sensación de "app", no de recarga. Respeta prefers-reduced-motion. */

@view-transition {
  navigation: auto;
}

/* La página saliente se va hacia arriba y se apaga; la entrante llega desde
   abajo. Curva expo (la misma que usa toda la web) para que "aterrice". */
::view-transition-old(root) {
  animation: pp-page-out 0.26s cubic-bezier(0.16, 1, 0.3, 1) both;
}
::view-transition-new(root) {
  animation: pp-page-in 0.44s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes pp-page-out {
  to { opacity: 0; transform: translateY(-10px); }
}
@keyframes pp-page-in {
  from { opacity: 0; transform: translateY(14px); }
}

/* Cabecera continua: al nombrarla, no se captura en el fundido del root y
   el navegador la mantiene fija entre páginas (efecto "no recarga"). */
.topnav { view-transition-name: pp-topnav; }

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