/* ============ SWIPE FEEDBACK ============ */
.book-viewport.swiping { transition: none; }

/* Reader-style swipe visual: dim overlay + stage-wide drag translate on book-viewport. */
.reader-stage {
  --swipe-shift-x: 0px;
  --swipe-shift-y: 0px;
  --swipe-scale: 1;
  --swipe-dim: 0;
}

.reader-stage::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background-color: rgba(15, 23, 42, var(--swipe-dim));
  opacity: 0;
  transition: opacity 140ms ease;
}

.reader-stage.swipe-resetting::before {
  transition: opacity 140ms ease, background-color 180ms ease;
}

.reader-stage.is-swiping::before,
.reader-stage.swipe-resetting::before {
  opacity: 1;
}

.book-viewport {
  transform: translate3d(var(--swipe-shift-x), var(--swipe-shift-y), 0)
    scale(var(--swipe-scale));
  will-change: transform;
}

.reader-stage.swipe-resetting .book-viewport {
  transition: transform 180ms cubic-bezier(0.22, 0.9, 0.24, 1);
}