html.fa-ms-pt-enabled {
  --fa-ms-page-transition-duration: 120ms;
  --fa-ms-page-transition-easing: cubic-bezier(0.22, 1, 0.36, 1);
  --fa-ms-page-transition-overlay: #0b0d10;
}

html {
  background: var(--fa-ms-page-transition-overlay, #0b0d10);
}

html.fa-ms-pt-enabled::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 2147483646;
  background: var(--fa-ms-page-transition-overlay);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--fa-ms-page-transition-duration) var(--fa-ms-page-transition-easing);
  will-change: opacity;
}

html.fa-ms-pt-enabled body {
  opacity: 1;
  transition: opacity var(--fa-ms-page-transition-duration) var(--fa-ms-page-transition-easing);
}

html.fa-ms-pt-enabled.fa-ms-pt-leaving::before {
  opacity: 0.22;
}

html.fa-ms-pt-enabled.fa-ms-pt-leaving body {
  opacity: 1;
}

html.fa-ms-pt-enabled.fa-ms-pt-entering::before {
  opacity: 0.22;
}

html.fa-ms-pt-enabled.fa-ms-pt-entering body {
  opacity: 1;
}

html.fa-ms-pt-enabled.fa-ms-pt-entering.fa-ms-pt-entering-active::before {
  opacity: 0;
}

@view-transition {
  navigation: auto;
}

html.fa-ms-pt-native {
  view-transition-name: root;
}

html.fa-ms-pt-native::before {
  display: none;
}

html.fa-ms-pt-native body {
  transition: none;
}

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: var(--fa-ms-page-transition-duration);
  animation-timing-function: var(--fa-ms-page-transition-easing);
}

::view-transition-group(root) {
  background: var(--fa-ms-page-transition-overlay);
}

::view-transition-old(root) {
  animation-name: fa-ms-pt-snapshot-out;
}

::view-transition-new(root) {
  animation-name: fa-ms-pt-snapshot-in;
}

@keyframes fa-ms-pt-snapshot-out {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

@keyframes fa-ms-pt-snapshot-in {
  from {
    opacity: 0.18;
  }

  to {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  html.fa-ms-pt-enabled::before {
    display: none;
    transition: none;
  }

  html.fa-ms-pt-enabled body {
    transition: none;
  }

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