/* transition.css
 *
 * The template drove these two panels with framer-motion's <AnimatePresence>:
 * .slide-out lifts away as a page arrives, .slide-in rises as one leaves.
 * Two CSS animations do the same, which also means the arrival wipe still
 * plays with JavaScript off instead of leaving the page behind a curtain.
 */

.slide-in,
.slide-out {
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  width: 100%;
  background: var(--color-accent);
  z-index: 10000;
  pointer-events: none;
}

.slide-in {
  transform-origin: bottom;
  transform: scaleY(0);
  transition: transform 0.75s cubic-bezier(0.83, 0, 0.17, 1);
}

.slide-in.is-covering {
  transform: scaleY(1);
}

.slide-out {
  transform-origin: top;
  transform: scaleY(1);
  animation: slide-out 0.75s cubic-bezier(0.83, 0, 0.17, 1) forwards;
}

@keyframes slide-out {
  to {
    transform: scaleY(0);
  }
}