/* A folha tem frente e verso reais; a dobra atravessa a lombada do livro. */
.reader-stage .reader-flip {
  position: absolute;
  z-index: 5;
  top: .4rem;
  bottom: .4rem;
  left: auto;
  right: .4rem;
  width: calc(50% - .4rem);
  transform-origin: left center;
  transform-style: preserve-3d;
  backface-visibility: visible;
  opacity: 0;
  pointer-events: none;
  box-shadow: none;
}
.reader-stage.is-single .reader-flip { width: calc(100% - .8rem); }
.reader-stage .reader-flip-front,
.reader-stage .reader-flip-back {
  position: absolute;
  inset: 0;
  display: block;
  overflow: hidden;
  background: #f0eadc;
  box-shadow: inset -.35rem 0 .7rem #39281935, 0 0 1rem #1b0d0844;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.reader-stage .reader-flip-back { transform: rotateY(180deg); }
.reader-stage .reader-flip img { width: 100%; height: 100%; object-fit: contain; }
.reader-stage .reader-flip-front::after,
.reader-stage .reader-flip-back::after {
  position: absolute;
  inset: 0;
  content: '';
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(90deg, #20110965, transparent 40%, #fff9e823);
}
.reader-stage:is(.is-turning-next, .is-turning-prev) .reader-flip {
  will-change: transform;
}
.reader-stage:is(.is-turning-next, .is-turning-prev) :is(.reader-flip-front, .reader-flip-back)::after {
  animation: ag-page-light 960ms ease-in-out both;
}
.reader-stage.is-turning-next .reader-flip {
  left: auto;
  right: .4rem;
  transform-origin: left center;
  animation: ag-page-forward 960ms cubic-bezier(.42, 0, .28, 1) both;
}
.reader-stage.is-turning-prev .reader-flip {
  left: .4rem;
  right: auto;
  transform-origin: right center;
  animation: ag-page-backward 960ms cubic-bezier(.42, 0, .28, 1) both;
}
@keyframes ag-page-forward {
  from { opacity: 1; transform: rotateY(0deg); }
  to { opacity: 1; transform: rotateY(-180deg); }
}
@keyframes ag-page-backward {
  from { opacity: 1; transform: rotateY(0deg); }
  to { opacity: 1; transform: rotateY(180deg); }
}
@keyframes ag-page-light {
  0%, 100% { opacity: 0; }
  45%, 55% { opacity: .55; }
}
@media (prefers-reduced-motion: reduce) {
  .reader-stage .reader-flip,
  .reader-stage :is(.reader-flip-front, .reader-flip-back)::after { animation: none !important; }
}
.reader-stage.is-loading-turn::before {
  position: absolute;
  z-index: 8;
  left: 50%;
  top: .8rem;
  transform: translateX(-50%);
  content: 'Preparando página…';
  padding: .3rem .65rem;
  border-radius: 1rem;
  background: #112018e8;
  color: #f8edda;
  font-size: .75rem;
  font-weight: 600;
  white-space: nowrap;
  pointer-events: none;
}