body {
  background-color: black;
}

@view-transition {
  navigation: auto;
}

::view-transition-old(root) {
  animation: scale-out 1s ease-in-out, move-out-y 1.25s ease-in-out 0.25s;
}

::view-transition-new(root) {
  animation: show-anim 0.26s, move-in-y 1s ease-in-out 0.25s,
    scale-in 1s ease-in-out 0.5s;
}

@keyframes show-anim {
  0% {
    opacity: 0;
  }

  99% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes scale-out {
  to {
    scale: 0.8;
  }
}

@keyframes scale-in {
  from {
    scale: 0.8;
  }
}

@keyframes move-out-y {
  to {
    translate: 0 -150vh;
  }
}

@keyframes move-in-y {
  from {
    translate: 0 120vh;
  }
}