/* Three overlapping sheets move over the document; its layout stays untouched. */
.page-shuffle {
  position: fixed;
  inset: 0;
  z-index: 9999;
  overflow: hidden;
  isolation: isolate;
  contain: layout paint style;
  pointer-events: none;
}

.page-shuffle[hidden] {
  display: none !important;
}

.shuffle-sheet {
  position: absolute;
  inset: 0;
  transform: translate3d(100%, 0, 0);
  background: var(--stone, #eaeae6);
  backface-visibility: hidden;
}

.shuffle-sheet:nth-child(1) {
  z-index: 1;
  --depart-delay: 0ms;
  --arrival-delay: 90ms;
  --arrival-duration: 560ms;
}

.shuffle-sheet:nth-child(2) {
  z-index: 2;
  background: var(--ink, #171717);
  --depart-delay: 40ms;
  --arrival-delay: 45ms;
  --arrival-duration: 560ms;
}

.shuffle-sheet:nth-child(3) {
  z-index: 3;
  background: var(--paper, #f7f7f5);
  --depart-delay: 80ms;
  --arrival-delay: 0ms;
  --arrival-duration: 550ms;
}

.page-shuffle.is-leaving .shuffle-sheet {
  will-change: transform;
  animation: shuffle-cover 400ms cubic-bezier(.76, 0, .24, 1) var(--depart-delay) both;
}

.page-shuffle.is-entering .shuffle-sheet {
  will-change: transform;
  animation: shuffle-reveal var(--arrival-duration) cubic-bezier(.76, 0, .24, 1) var(--arrival-delay) both;
}

body.shuffle-departing,
body.shuffle-departing a {
  cursor: progress;
}

@keyframes shuffle-cover {
  from { transform: translate3d(100%, 0, 0); }
  to { transform: translate3d(0, 0, 0); }
}

@keyframes shuffle-reveal {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-100%, 0, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .page-shuffle { display: none !important; }
  .shuffle-sheet { animation: none !important; }
  body.shuffle-departing { cursor: auto; }
  body.shuffle-departing a { cursor: pointer; }
}

@media print {
  .page-shuffle { display: none !important; }
}