/* The folio keeps its layout size while scrolling. Movement and lighting use
   transforms and opacity, and sizing is refreshed after layout changes. */
.folio-rig[data-renderer='transform'] .folio-book {
  left: 0;
  top: 0;
  width: var(--book-width);
  transform-origin: 50% 50%;
}

/* The driver supplies the final size before revealing either page. */
.folio-rig[data-renderer='transform'] .folio-page-content {
  opacity: 1;
}

@media (prefers-reduced-motion: no-preference) {
  .folio-rig[data-phase='unfolding'] .folio-right-page::after {
    will-change: transform, opacity;
  }
}

@media (max-width: 760px) {
  .opening-scroll {
    left: auto;
    right: 16px;
    bottom: 20px;
    max-width: calc(100vw - 32px);
  }
}