.root {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 200;
}

.root,
.root * {
  pointer-events: none;
}

.lens {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--magnifier-size);
  height: var(--magnifier-size);
  border-radius: 50%;
  overflow: hidden;
  visibility: hidden;
  border: 2px solid rgba(255, 255, 255, 0.85);
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.28),
    0 2px 8px rgba(0, 0, 0, 0.16),
    inset 0 0 0 1px rgba(0, 0, 0, 0.08);
  background-color: #fff;
  will-change: transform;
  -webkit-font-smoothing: antialiased;
  backface-visibility: hidden;
}

/* پنجرهٔ دید ثابت (به‌اندازهٔ لنز)؛ محتوای بزرگ‌نمایی‌شده داخلش clip می‌شود */
.content {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

/* لایه‌ای که BookPage با مقیاس بزرگ داخلش رندر می‌شود و فقط translate می‌گیرد */
.mirror {
  position: absolute;
  top: 0;
  left: 0;
  transform-origin: 0 0;
  will-change: transform;
}
