/* Keep the first message physically on top, then reveal each later page below it. */
.page-one {
  z-index: 7;
  transform: translateZ(8px);
}

.page-two {
  z-index: 6;
  transform: translateZ(6px);
}

.page-three {
  z-index: 5;
  transform: translateZ(4px);
}

body[data-entrance-state="opening"] .page-one {
  animation: pk-page-turn-front .82s 1.15s forwards;
}

body[data-entrance-state="opening"] .page-two {
  animation: pk-page-turn-middle .82s 2.05s forwards;
}

body[data-entrance-state="opening"] .page-three {
  animation: pk-final-page-back .9s 2.95s forwards;
}

body[data-entrance-state="opening"] .pk-entrance {
  animation: pk-entrance-away .45s 4s forwards;
}

@keyframes pk-page-turn-front {
  0% { transform: translateZ(8px) rotateY(0); opacity: 1; }
  88% { opacity: 1; }
  100% { transform: translateZ(8px) rotateY(-168deg); opacity: 0; }
}

@keyframes pk-page-turn-middle {
  0% { transform: translateZ(6px) rotateY(0); opacity: 1; }
  88% { opacity: 1; }
  100% { transform: translateZ(6px) rotateY(-168deg); opacity: 0; }
}

@keyframes pk-final-page-back {
  0% { transform: translateZ(4px) rotateY(0); opacity: 1; }
  58% { transform: translateZ(4px) rotateY(-12deg); opacity: 1; }
  100% { transform: translateZ(4px) rotateY(0); opacity: 1; }
}