html { background: #f7f3ed; }

body {
  animation: page-arrive .62s cubic-bezier(.2, .75, .25, 1) both;
}

body.is-page-leaving {
  pointer-events: none;
  animation: page-leave .48s cubic-bezier(.2, .75, .25, 1) forwards;
}

.page-transition-curtain {
  position: fixed;
  z-index: 9999;
  inset: 0;
  pointer-events: none;
  background: #d92d32;
  transform: translate3d(0, 100%, 0);
  transition: transform .48s cubic-bezier(.72, 0, .18, 1);
  will-change: transform;
}

body.is-page-leaving .page-transition-curtain {
  transform: translate3d(0, 0, 0);
}

body.is-page-arriving .page-transition-curtain {
  transition: none;
  transform: translate3d(0, 0, 0);
}

body.is-page-arriving.is-page-ready .page-transition-curtain {
  transition: transform .56s cubic-bezier(.72, 0, .18, 1);
  transform: translate3d(0, -100%, 0);
}

.page-transition-curtain.is-resetting {
  transition: none !important;
  transform: translate3d(0, 100%, 0) !important;
}

@keyframes page-arrive {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes page-leave {
  from { opacity: 1; }
  to { opacity: .94; }
}