html.is-changing .transition-main {
  transition: opacity 280ms ease, transform 320ms ease, filter 320ms ease;
}

html.is-leaving .transition-main {
  transition: opacity 280ms ease, transform 320ms ease, filter 320ms ease;
}

html.is-animating .transition-main {
  opacity: 0;
  filter: saturate(0.92);
}

html.is-animating.is-leaving .transition-main {
  transform: translateY(12px) scale(0.996);
}

html.is-animating.is-rendering .transition-main {
  transform: translateY(-12px) scale(0.996);
}

.logo {
  transition: opacity 250ms, transform 250ms;
}

html.is-animating .logo {
  opacity: 0.3;
  transform: scale(0.9);
}

h1 {
  transition: transform 300ms, opacity 300ms;
}

html.is-animating.is-leaving h1 {
  transform: translateY(2rem);
  opacity: 0;
}

html.is-animating.is-rendering h1 {
  transform: translateY(-2rem);
  opacity: 0;
}

@media (prefers-reduced-motion: reduce) {

  html.is-changing .transition-main,
  html.is-leaving .transition-main,
  .logo,
  h1 {
    transition: none !important;
  }

  html.is-animating .transition-main,
  html.is-animating.is-leaving .transition-main,
  html.is-animating.is-rendering .transition-main,
  html.is-animating.is-leaving h1,
  html.is-animating.is-rendering h1,
  html.is-animating .logo {
    transform: none !important;
    filter: none !important;
    opacity: 1 !important;
  }
}