/* Load only on non-admin pages, after studio.css.
   Cross-document transitions keep normal links, forms and browser history.
   Browsers without this opt-in continue using ordinary document navigation. */
@media screen and (prefers-reduced-motion: no-preference) {
  @view-transition {
    navigation: auto;
  }

  /* Keep the browser's composited crossfade; no custom overlay or movement. */
  :root:has(> body.software-studio:not(.studio-admin))::view-transition-group(root),
  :root:has(> body.software-studio:not(.studio-admin))::view-transition-old(root),
  :root:has(> body.software-studio:not(.studio-admin))::view-transition-new(root) {
    animation-duration: 140ms;
    animation-timing-function: ease-out;
  }

  /* The fallback never hides content or changes its dimensions or position.
     Partial API implementations simply retain their normal navigation. */
  @supports not (view-transition-name: root) {
    .software-studio:not(.studio-admin) > main {
      animation: mkn-page-enter 140ms ease-out;
    }
  }
}

@media screen and (prefers-reduced-motion: no-preference) and (max-width: 640px) {
  :root:has(> body.software-studio:not(.studio-admin))::view-transition-group(root),
  :root:has(> body.software-studio:not(.studio-admin))::view-transition-old(root),
  :root:has(> body.software-studio:not(.studio-admin))::view-transition-new(root) {
    animation-duration: 120ms;
  }
}

@keyframes mkn-page-enter {
  from { opacity: .96; }
  to { opacity: 1; }
}

/* Defense in depth if this stylesheet is ever included on an admin page. */
:root:has(> body.studio-admin) {
  view-transition-name: none;
}

@media (prefers-reduced-motion: reduce) {
  @view-transition {
    navigation: none;
  }

  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation: none !important;
  }

  .software-studio:not(.studio-admin) > main {
    animation: none !important;
  }
}