html.is-changing .transition-main {
  transition: opacity 250ms ease-in-out;
}

html.is-leaving .transition-main {
  transition: opacity 250ms ease-in-out;
}

html.is-animating .transition-main {
  opacity: 0;
}

html.is-changing .transition-fade {
  view-transition-name: main;
}

::view-transition-old(main) {
  animation: fade-blur 0.5s ease-in-out both;
}

::view-transition-new(main) {
  animation: fade-blur 0.5s ease-in-out both reverse;
}

@keyframes fade-blur {
  from {
    opacity: 1;
    filter: blur(0px);
  }
  to {
    opacity: 0;
    filter: blur(0px);
  }
}