/* Photo loupe: a round glass lens follows the cursor over a photo and shows that spot enlarged — like a phone's
   zoom lens. The photo itself stays still. glass-photos.js positions the lens and sets its magnified background;
   for [data-glass="fit"] it also sizes the frame to the photo it holds. */
.glass-photo { position: relative; display: block; border-radius: 10px; cursor: zoom-in; --lx: -999px; --ly: -999px; --lsize: 170px; --zoom: 2.2; }
.glass-photo > img { display: block; border-radius: inherit; }
/* The Process page clips its frames; the lens must be free to cross the photo's edge. */
.process-photo-frame.glass-photo { overflow: visible; }
.glass-photo .loupe {
  position: absolute; z-index: 3; left: var(--lx); top: var(--ly); width: var(--lsize); height: var(--lsize);
  transform: translate(-50%, -50%) scale(.6); border-radius: 50%; pointer-events: none; opacity: 0;
  background: var(--lens-img) no-repeat; background-size: var(--bgw) var(--bgh); background-position: var(--bgx) var(--bgy);
  border: 2px solid rgba(255, 255, 255, .85);
  box-shadow: 0 0 0 1px rgba(60, 45, 30, .18), 0 18px 40px -14px rgba(60, 45, 30, .55), inset 0 0 0 1px rgba(255, 255, 255, .35), inset 0 -14px 24px -16px rgba(0, 0, 0, .25), inset 0 12px 18px -12px rgba(255, 255, 255, .55);
  transition: opacity .25s ease, transform .35s cubic-bezier(.22, 1, .36, 1);
}
.glass-photo .loupe::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(circle at 32% 26%, rgba(255, 255, 255, .32), rgba(255, 255, 255, 0) 42%); pointer-events: none; }
.glass-photo.is-lensing .loupe { opacity: 1; transform: translate(-50%, -50%) scale(1); }
@media (hover: none) { .glass-photo { cursor: default; } .glass-photo .loupe { display: none; } }
@media (prefers-reduced-motion: reduce) { .glass-photo .loupe { transition: opacity .2s ease; } }