.book-spread {
  position: relative;
  display: none;
  align-items: center;
  justify-content: center;
  gap: 0;
  max-width: 100%;
  perspective: 2200px;
  filter: drop-shadow(0 24px 34px rgba(0, 0, 0, 0.42));
}

.book-spread.ready { display: flex; }

.reader-page {
  position: relative;
  flex: none;
  overflow: hidden;
  background: #fff;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  will-change: transform, filter;
}

.reader-page canvas { display: block; max-width: none; background: #fff; }
.reader-page.left { transform-origin: right center; box-shadow: inset -12px 0 18px -16px rgba(0, 0, 0, 0.55); }
.reader-page.right { transform-origin: left center; box-shadow: inset 12px 0 18px -16px rgba(0, 0, 0, 0.55); }

.book-spread:not(.single)::after {
  content: "";
  position: absolute;
  z-index: 8;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 12px;
  transform: translateX(-50%);
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.23), rgba(255, 255, 255, 0.12), rgba(0, 0, 0, 0.2), transparent);
}

.book-spread.single .reader-page.left { box-shadow: 0 25px 60px rgba(0, 0, 0, 0.48); }
.book-spread.single .reader-page.right { display: none; }
.reader-page.is-empty { visibility: hidden; }

.book-spread.turn-next .reader-page.left { animation: page-settle-left 0.68s cubic-bezier(0.2, 0.72, 0.2, 1); }
.book-spread.turn-next .reader-page.right:not(.is-empty) { z-index: 6; animation: page-open-right 0.68s cubic-bezier(0.16, 0.78, 0.22, 1); }
.book-spread.turn-prev .reader-page.right:not(.is-empty) { animation: page-settle-right 0.68s cubic-bezier(0.2, 0.72, 0.2, 1); }
.book-spread.turn-prev .reader-page.left { z-index: 6; animation: page-open-left 0.68s cubic-bezier(0.16, 0.78, 0.22, 1); }

.reader-footer button:disabled,
.page-nav:disabled { cursor: default; opacity: 0.3; }
[data-page-pair]:empty { display: none; }

@keyframes page-open-right {
  0% { transform: rotateY(-88deg) scaleX(0.96); filter: brightness(0.48); box-shadow: -28px 10px 38px rgba(0, 0, 0, 0.48); }
  55% { filter: brightness(0.82); }
  100% { transform: rotateY(0) scaleX(1); filter: brightness(1); box-shadow: inset 12px 0 18px -16px rgba(0, 0, 0, 0.55); }
}

@keyframes page-open-left {
  0% { transform: rotateY(88deg) scaleX(0.96); filter: brightness(0.48); box-shadow: 28px 10px 38px rgba(0, 0, 0, 0.48); }
  55% { filter: brightness(0.82); }
  100% { transform: rotateY(0) scaleX(1); filter: brightness(1); box-shadow: inset -12px 0 18px -16px rgba(0, 0, 0, 0.55); }
}

@keyframes page-settle-left {
  0% { transform: translateX(8px); filter: brightness(0.72); }
  100% { transform: translateX(0); filter: brightness(1); }
}

@keyframes page-settle-right {
  0% { transform: translateX(-8px); filter: brightness(0.72); }
  100% { transform: translateX(0); filter: brightness(1); }
}

@media (prefers-reduced-motion: reduce) {
  .book-spread.turn-next .reader-page,
  .book-spread.turn-prev .reader-page { animation-duration: 0.01ms; }
}