/* book3d.css: the stage for book3d.js. The stage keeps one aspect ratio, so the poster
   (rendered from the same model at the same framing) and the live canvas line up exactly
   and the swap is invisible. Sites set the width and the hint's type. */
.book3d {
  position: relative;
  aspect-ratio: 4 / 5;
  width: 100%;
  margin: 0 auto;
  touch-action: pan-y pinch-zoom; /* a tap turns the book; a swipe still scrolls the page */
  -webkit-tap-highlight-color: transparent;
  cursor: pointer;
  outline-offset: 4px;
}
.book3d-poster, .book3d-canvas {
  position: absolute; inset: 0;
  width: 100% !important; height: 100% !important;
  display: block;
}
.book3d-poster { object-fit: contain; transition: opacity .35s ease; }
.book3d-canvas { opacity: 0; transition: opacity .35s ease; }
.book3d.is-live .book3d-canvas { opacity: 1; }
.book3d.is-live .book3d-poster { opacity: 0; }
.book3d-hint {
  position: absolute; left: 0; right: 0; bottom: 2%;
  margin: 0; text-align: center; pointer-events: none;
}
.book3d-hint[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) {
  .book3d-poster, .book3d-canvas { transition: none; }
}