/* A brief dissolve for real page navigations and immersive route changes. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition {
    navigation: auto;
  }

  ::view-transition {
    pointer-events: none;
  }

  ::view-transition-group(root) {
    animation-duration: 200ms;
    animation-timing-function: ease-out;
  }

  ::view-transition-old(root) {
    animation: aervik-page-out 200ms ease-out both;
    mix-blend-mode: normal;
  }

  ::view-transition-new(root) {
    animation: aervik-page-in 200ms ease-out both;
    mix-blend-mode: normal;
  }

  @supports not (view-transition-name: root) {
    main {
      animation: aervik-page-entry 200ms ease-out;
    }
  }
}

@keyframes aervik-page-out {
  to { opacity: 0; }
}

@keyframes aervik-page-in {
  from { opacity: 0; }
}

@keyframes aervik-page-entry {
  from { opacity: .75; }
  to { opacity: 1; }
}

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

  ::view-transition-group(root),
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation: none;
  }
}