/* Navigation only. Loaded early, but enabled only after the safety hooks exist.
   See docs/page-transitions.md. Keep page animations in their existing styles. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
}

:root {
  --ap-navigation-duration: 230ms;
  --ap-navigation-easing: cubic-bezier(0.22, 1, 0.36, 1);
}

/* Do not let the UA interpolate the root's geometry on viewport changes. */
::view-transition-group(root) { animation: none; }
::view-transition-image-pair(root) { isolation: isolate; }
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: var(--ap-navigation-duration);
  animation-timing-function: var(--ap-navigation-easing);
  animation-fill-mode: both;
  mix-blend-mode: plus-lighter;
}
::view-transition-old(root) { animation-name: ap-navigation-out; }
::view-transition-new(root) { animation-name: ap-navigation-in; }

/* Only forward editorial navigation lifts. History stays spatially still. */
html[data-page-transition="editorial"][data-ap-navigation="push"] {
  --ap-navigation-duration: 260ms;
}
html[data-page-transition="editorial"][data-ap-navigation="push"]::view-transition-new(root) {
  animation-name: ap-navigation-editorial;
}

@keyframes ap-navigation-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes ap-navigation-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes ap-navigation-editorial {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

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