/* Mesh-rendered leaf; all coordinates refer to the unchanged source photo. */
.notebook-transit{
  --notebook-source-ratio:1.5;
  position:fixed;inset:0;z-index:125;overflow:hidden;isolation:isolate;
  pointer-events:none;background:transparent;opacity:0;will-change:opacity;
}
.notebook-transit-scene{
  position:absolute;left:0;top:0;
  width:max(100vw,calc(100vh * var(--notebook-source-ratio)));
  height:max(100vh,calc(100vw / var(--notebook-source-ratio)));
  transform-origin:0 0;will-change:transform;
}
.notebook-transit-image,.notebook-transit-leaf{
  position:absolute;inset:0;width:100%;height:100%;max-width:none;
  object-fit:cover;object-position:center;user-select:none;-webkit-user-drag:none;
}
/* Keep the photographed page stack intact; the opaque lower leaf covers
   the drawing beneath it without cutting a polygonal hole in the photo. */
.notebook-transit-leaf{z-index:1}
.notebook-transition-active .ambient-image{animation-play-state:paused}
.motion-paused .notebook-transit{display:none}
@media(prefers-reduced-motion:reduce){.notebook-transit{display:none}}