html.is-changing .transition--main {
    transition: all 500ms ease-in-out;
  }

  html.is-changing body {
    transition: all 100ms;
  }
  
  html.is-animating.is-leaving .transition--main {
    transform: translateY(10rem);
  }
  
  html.is-animating.is-rendering .transition--main {
    transform: translateY(-10rem);
  }

  .transition--overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 999;
    background-color: var(--clr-dark);
    opacity: 0;
    transform: translateY(-100%);
    pointer-events: none;
  }
  
  html.is-changing .transition--overlay {
    transition: transform 500ms ease-in-out;
    opacity: 1;
  }
  
  html.is-animating .transition--overlay {
    transform: translateY(0);
  }
  
  html.is-rendering .transition--overlay {
    transform: translateY(100%);
  }