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

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

html.is-changing .transition-main {
  transition: transform 400ms ease-in-out;
}

html.is-animating.is-leaving .transition-main {
  transform: translateY(calc(1 * 5vh * var(--overlay-direction, 1)));
}

html.is-animating.is-rendering .transition-main {
  transform: translateY(calc(-1 * 5vh * var(--overlay-direction, 1)));
}