::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 300ms;
  animation-timing-function: ease-in-out;
}

::view-transition-old(root) {
  opacity: 1;
  animation-name: fade-out;
}

::view-transition-new(root) {
  opacity: 0;
  animation-name: fade-in;
}

@keyframes fade-in {
  to { opacity: 1; }
}

@keyframes fade-out {
  to { opacity: 0; }
}

[data-fade] {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
  }
  
  [data-fade].visible {
    opacity: 1;
    transform: none;
  }