@view-transition {
  navigation: auto;
}

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

::view-transition-image-pair(root) {
  isolation: isolate;
}

::view-transition-old(root) {
  animation: mr99-page-exit .8s cubic-bezier(.25, 1, .5, 1) both;
  mix-blend-mode: normal;
}

::view-transition-new(root) {
  animation: mr99-page-enter .8s cubic-bezier(.76, 0, .24, 1) both;
  mix-blend-mode: normal;
}

@keyframes mr99-page-exit {
  from { filter: brightness(1); }
  to { filter: brightness(.25); }
}

@keyframes mr99-page-enter {
  from { clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0 100%); }
  to { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
}

html.page-move-transition::view-transition-old(root) {
  animation: mr99-move-exit .45s ease both;
}

html.page-move-transition::view-transition-new(root) {
  animation: mr99-move-enter .7s cubic-bezier(.16, 1, .3, 1) both;
}

html:active-view-transition-type(move)::view-transition-old(root) {
  animation: mr99-move-exit .45s ease both;
}

html:active-view-transition-type(move)::view-transition-new(root) {
  animation: mr99-move-enter .7s cubic-bezier(.16, 1, .3, 1) both;
}

@keyframes mr99-move-exit {
  from { opacity: 1; }
  to { opacity: 0; }
}

@keyframes mr99-move-enter {
  from { opacity: 0; transform: translateY(40px); }
  to { opacity: 1; transform: translateY(0); }
}

html.page-move-arrival body {
  animation: mr99-move-enter .7s cubic-bezier(.16, 1, .3, 1) both;
}

html.page-title-pending :is(.hero-message, .about-hero h1, .detail-hero h1) {
  opacity: 0;
  translate: 0 20rem;
}

html.page-title-entering :is(.hero-message, .about-hero h1, .detail-hero h1) {
  animation: mr99-title-slide 1.4s cubic-bezier(.16, 1, .3, 1) both,
    mr99-title-fade 1.4s ease both;
}

@keyframes mr99-title-slide {
  from { translate: 0 20rem; }
  to { translate: 0 0; }
}

@keyframes mr99-title-fade {
  from { opacity: 0; }
  to { opacity: var(--hero-copy-opacity, 1); }
}

/* Scroll movement and arrival use separate transform properties. */
:is(.about-hero, .detail-hero) h1 {
  transform: translate3d(0, var(--page-title-parallax, 0px), 0);
}

html.page-transition-fallback::after {
  content: '';
  position: fixed;
  z-index: 10000;
  inset: 0;
  pointer-events: none;
  background: #021d46;
  animation: mr99-fallback-veil .8s cubic-bezier(.76, 0, .24, 1) both;
}

@keyframes mr99-fallback-veil {
  from { transform: translateY(0); }
  to { transform: translateY(-100%); }
}

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

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

  html.page-title-pending :is(.hero-message, .about-hero h1, .detail-hero h1) {
    opacity: 1;
    translate: none;
  }

  html.page-title-entering :is(.hero-message, .about-hero h1, .detail-hero h1),
  html.page-transition-fallback::after,
  html.page-move-arrival body,
  html.page-move-transition::view-transition-old(root),
  html.page-move-transition::view-transition-new(root) {
    animation: none;
  }

  html:active-view-transition-type(move)::view-transition-old(root),
  html:active-view-transition-type(move)::view-transition-new(root) {
    animation: none;
  }

  :is(.about-hero, .detail-hero) h1 {
    transform: none;
  }
}