/* ---- v16: paper placeholders, no white flash, crossfade canvases ---- */

/* page shell always matches book paper (never stark #fff) */
#pdfView .page,
#pdfView .page.ready,
#pdfView .page:not(.ready) {
  background: var(--paper) !important;
  animation: none; /* replace white shimmer with paper shimmer on .ph */
}
[data-theme=dark] #pdfView .page,
[data-theme=dark] #pdfView .page.ready { background: var(--paper) !important; }

/* placeholder layer under canvas */
#pdfView .page .ph {
  position: absolute; inset: 0; z-index: 0; pointer-events: none; border-radius: inherit;
  background-color: var(--paper);
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
}
#pdfView .page .ph:not(.has-thumb) {
  background-image: linear-gradient(
    90deg,
    color-mix(in srgb, var(--fg) 3%, var(--paper)) 0%,
    color-mix(in srgb, var(--fg) 7%, var(--paper)) 45%,
    color-mix(in srgb, var(--fg) 3%, var(--paper)) 90%
  );
  background-size: 200% 100%;
  animation: phShimmer 1.2s ease-in-out infinite;
}
#pdfView .page .ph.has-thumb { animation: none; filter: none; opacity: 1; }
#pdfView .page.ready .ph:not(.has-thumb) { animation: none; opacity: 0; transition: opacity .2s; }

@keyframes phShimmer {
  0% { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}

/* canvas crossfade — never remove old until new is shown */
#pdfView .page canvas {
  position: relative; z-index: 1;
  opacity: 0;
  transition: opacity .18s ease;
  display: block; width: 100% !important; height: 100% !important;
}
#pdfView .page canvas.shown,
#pdfView .page canvas.full:not(.incoming),
#pdfView .page canvas.lite:not(.incoming) { opacity: 1; }
#pdfView .page canvas.incoming { opacity: 0; }

/* stack: ph (0) → canvas (1) → hl (1) → text (2) already set in app.css */
#pdfView .page .hlLayer { z-index: 2; }
#pdfView .page .textLayer { z-index: 3; }