/* Soft page transitions: View Transitions where supported, CSS fade fallback otherwise */
@supports (view-transition-name: none) {
  @view-transition { navigation: auto; }
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation-duration: .38s;
    animation-timing-function: cubic-bezier(.22, 1, .36, 1);
  }
  ::view-transition-old(root) {
    animation-name: px-vt-fade-out;
  }
  ::view-transition-new(root) {
    animation-name: px-vt-fade-in;
  }
  @keyframes px-vt-fade-out {
    to { opacity: 0; filter: blur(2px); }
  }
  @keyframes px-vt-fade-in {
    from { opacity: 0; filter: blur(2px); }
    to { opacity: 1; filter: blur(0); }
  }
}

html.px-no-vt body {
  /* Keep readable immediately; animate only on leave */
  opacity: 1;
  transform: none;
}
html.px-no-vt body.px-page-ready {
  opacity: 1;
  transform: none;
}
html.px-no-vt body.px-page-leaving {
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  @supports (view-transition-name: none) {
    ::view-transition-old(root),
    ::view-transition-new(root) { animation: none !important; }
  }
  html.px-no-vt body,
  html.px-no-vt body.px-page-ready,
  html.px-no-vt body.px-page-leaving {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}