@view-transition {
  navigation: auto;
}

::view-transition-old(root) {
  animation: velo-sale 170ms cubic-bezier(0.4, 0, 1, 1) both;
}

::view-transition-new(root) {
  animation: velo-entra 260ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes velo-sale {
  to { opacity: 0; }
}

@keyframes velo-entra {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

html.cambiando-tema::view-transition-old(root) {
  animation: velo-sale 200ms linear both;
}

html.cambiando-tema::view-transition-new(root) {
  animation: velo-opacidad 200ms linear both;
}

html.sin-transicion-vista body.app {
  animation: velo-opacidad 240ms ease-out both;
}

html.sin-transicion-vista body.app .contenido {
  animation: velo-desplaza 280ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes velo-opacidad {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes velo-desplaza {
  from { transform: translateY(8px); }
  to { transform: none; }
}

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

  html.sin-transicion-vista body.app,
  html.sin-transicion-vista body.app .contenido {
    animation: none;
  }
}