@view-transition {
  navigation: auto;
}

::view-transition-old(root) {
  animation: fade-slide-out 0.4s cubic-bezier(0.4, 0, 0.2, 1) both;
}

::view-transition-new(root) {
  animation: fade-slide-in 0.4s cubic-bezier(0.4, 0, 0.2, 1) both;
}

@keyframes fade-slide-out {
  to {
    opacity: 0;
    transform: translateY(-20px);
  }
}

@keyframes fade-slide-in {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
}

.pill-nav-container {
  view-transition-name: pill-nav;
}

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