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

[data-turn-exit],
[data-turn-enter] {
  animation-timing-function: cubic-bezier(0.65, 0.05, 0.35, 1);
  animation-fill-mode: forwards;
}

html.turn-before-exit [data-turn-exit],
html.turn-exit [data-turn-exit] {
  will-change: transform, opacity;
}

html.turn-advance.turn-before-transition [data-turn-enter="scale-fade-up"],
html.turn-advance.turn-transition [data-turn-enter="scale-fade-up"] {
  opacity: 0;
}

html.turn-advance.turn-enter [data-turn-enter="scale-fade-up"] {
  animation-name: scale-fade-up;
  animation-duration: 0.6s;
}

@keyframes scale-fade-up {
  from {
    opacity: 0;
    transform: scale(0.95) translateY(10px);
  }

  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

html.turn-advance.turn-enter [data-turn-enter="scale-fade-up-slower"] {
  animation-name: scale-fade-up-slower;
  animation-duration: 1s;
}

@keyframes scale-fade-up-slower {
  from {
    opacity: 0;
    transform: scale(0.95) translateY(10px);
  }

  to {
    opacity: 0.4;
    transform: scale(1) translateY(0);
  }
}