:root {
  --np-page-transition-color: #0e1b14;
  --np-page-transition-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

html.np-page-transition::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 2147483647;
  pointer-events: none;
  background: var(--np-page-transition-color);
  opacity: 0;
  animation: np-page-arrive 420ms var(--np-page-transition-ease) both;
}

html.np-page-transition.np-page-leaving::before {
  animation: np-page-depart 220ms ease-in both;
}

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

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

@media (prefers-reduced-motion: reduce) {
  html.np-page-transition::before,
  html.np-page-transition.np-page-leaving::before {
    animation: none;
    opacity: 0;
  }
}