@view-transition {
  navigation: auto;
}

main,
.hero,
.status-shell,
.error-card {
  view-transition-name: site-content;
}

::view-transition-old(site-navigation),
::view-transition-new(site-navigation),
::view-transition-old(site-brand),
::view-transition-new(site-brand) {
  animation-duration: 320ms;
  animation-timing-function: var(--ease-standard);
}

::view-transition-old(site-content) {
  animation: maixx-content-out 220ms ease both;
}

::view-transition-new(site-content) {
  animation: maixx-content-in 420ms var(--ease-standard) both;
}

@keyframes maixx-content-out {
  to { opacity: 0; transform: translateY(-8px) scale(.995); filter: blur(3px); }
}

@keyframes maixx-content-in {
  from { opacity: 0; transform: translateY(12px) scale(.992); filter: blur(4px); }
}

.page-transition {
  z-index: var(--z-transition) !important;
}

html.page-leaving .page-transition {
  opacity: 1;
  pointer-events: auto;
}

html.page-entering body {
  animation: maixx-page-enter 360ms var(--ease-standard) both;
}

@keyframes maixx-page-enter {
  from { opacity: 0; transform: translateY(8px); }
}

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

  html.page-entering body {
    animation-duration: 1ms;
  }
}

html[data-motion="reduced"] ::view-transition-group(*),
html[data-motion="reduced"] ::view-transition-old(*),
html[data-motion="reduced"] ::view-transition-new(*) {
  animation-duration: 1ms !important;
}