.page-transition {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: var(--ink, #071815);
  transform: translateX(100%);
  pointer-events: none;
  will-change: transform;
}

.page-transition.is-entering {
  animation: page-transition-enter .38s cubic-bezier(.77, 0, .18, 1) both;
}

.page-transition.is-leaving {
  transform: translateX(-100%);
  animation: page-transition-leave .38s cubic-bezier(.77, 0, .18, 1) both;
}

@keyframes page-transition-enter {
  from { transform: translateX(0); }
  to { transform: translateX(100%); }
}

@keyframes page-transition-leave {
  from { transform: translateX(-100%); }
  to { transform: translateX(0); }
}

@media (prefers-reduced-motion: reduce) {
  .page-transition { display: none; }
}