/* Persistent two-sided book geometry for the PageKeep entrance. */
.book-stage {
  width: min(570px, 78vw);
  aspect-ratio: 1.44;
  transform: translateX(-25%);
  transition: transform .8s cubic-bezier(.22, .8, .2, 1);
}

.book-shadow {
  inset: 12% -8% -7%;
}

.back-cover,
.front-cover,
.endpaper,
.turning-page {
  inset: auto;
  top: 0;
  left: 50%;
  width: 50%;
  height: 100%;
  transform-origin: left center;
}

.left-endpaper {
  transform: rotateY(180deg) translateZ(2px);
}

.back-cover,
.front-cover {
  top: -6px;
  width: calc(50% + 6px);
  height: calc(100% + 12px);
}

.front-cover {
  display: block;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  transform-style: preserve-3d;
  backface-visibility: visible;
}

.cover-front,
.cover-inside {
  position: absolute;
  inset: 0;
  border: 1px solid #342f2d;
  backface-visibility: hidden;
}

.cover-front {
  z-index: 2;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 13px;
  padding: 32px;
  border-radius: 8px 18px 18px 8px;
  background: linear-gradient(145deg, #171719, #050506);
  box-shadow:
    inset 0 0 0 2px #050506,
    inset 0 0 0 4px rgba(245, 180, 0, .32),
    10px 24px 60px rgba(0, 0, 0, .65);
  transform: translateZ(14px);
}

.cover-inside {
  z-index: 1;
  border-radius: 18px 8px 8px 18px;
  background: linear-gradient(215deg, #171719, #050506);
  box-shadow:
    inset 0 0 0 2px #050506,
    inset 0 0 0 4px rgba(245, 180, 0, .18);
  transform: rotateY(180deg) translateZ(14px);
}

.turning-page {
  transform-style: preserve-3d;
  backface-visibility: visible;
}

.turning-page::after {
  content: "";
  position: absolute;
  z-index: 2;
  inset: 0;
  border: 1px solid #d8d0bf;
  border-radius: 18px 8px 8px 18px;
  background: linear-gradient(270deg, #d8d1c3, #fffdf5 10%, #f5efdf 96%);
  transform: rotateY(180deg) translateZ(.5px);
  backface-visibility: hidden;
}

.turning-page p {
  position: relative;
  z-index: 1;
  backface-visibility: hidden;
}

body[data-entrance-state="opening"] .book-stage {
  width: min(570px, 78vw);
  transform: translateX(0);
}

body[data-entrance-state="opening"] .front-cover {
  z-index: 1;
  transform: rotateY(-172deg) translateZ(1px);
}

body[data-entrance-state="opening"] .turning-page {
  opacity: 0;
}

body[data-entrance-state="opening"] .rapid-page {
  animation: pagekeep-rapid-turn .24s calc(.78s + (var(--page-index) * .12s)) forwards;
}

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

.rapid-page:nth-of-type(3n) {
  background: linear-gradient(90deg, #d7d0c2, #fffdf6 10%, #f3ecdc 96%);
}

.rapid-page:nth-of-type(3n + 1) {
  background: linear-gradient(90deg, #d9d2c5, #fffef8 10%, #f7f0e1 96%);
}

@keyframes pagekeep-rapid-turn {
  0% {
    transform: translateZ(18px) rotateY(0);
    opacity: 1;
  }
  48% {
    transform: translateZ(20px) rotateY(-92deg);
    opacity: 1;
  }
  100% {
    transform: translateZ(20px) rotateY(-172deg);
    opacity: 1;
  }
}

@media (max-width: 620px) {
  .book-stage,
  body[data-entrance-state="opening"] .book-stage {
    width: min(420px, 82vw);
  }

  .book-stage {
    transform: translateX(-25%);
  }

  body[data-entrance-state="opening"] .book-stage {
    transform: translateX(0);
  }
}