/* Gallery lightbox (Update 8, Drue 111126).
   The photo flies from its thumbnail to the middle of the screen (about 90vw x 88vh max,
   whole photo, no crop). The backdrop dims only after it lands. On close the dim fades
   first, then the photo shrinks back into its thumbnail. Drift is paused while open. */

.gallery-strip-track img,
.gallery-track img {
  cursor: pointer;
}

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 9999;
  margin: 0;
  padding: 0;
  cursor: pointer;
}

.lightbox:focus { outline: none; }

.lightbox[hidden] {
  display: none !important;
}

.lightbox-backdrop {
  position: absolute;
  inset: 0;
  background: #000;
  opacity: 0;
}

.lightbox-image {
  position: fixed;
  display: block;
  margin: 0;
  max-width: none;
  max-height: none;
  object-fit: cover;          /* matches the thumbnail on take-off; exact fit on landing */
  border-radius: 4px;
  pointer-events: none;
  user-select: none;
  will-change: left, top, width, height;
  z-index: 1;
}

.lightbox-back {
  position: absolute;
  top: max(12px, env(safe-area-inset-top));
  left: max(12px, env(safe-area-inset-left));
  z-index: 2;
  opacity: 0;
}

/* No white focus box after a mouse click or tap; keyboard users keep a soft ring. */
.ui-back:focus,
.ui-back:focus:not(:focus-visible) {
  outline: none;
}
.ui-back:focus-visible {
  outline: 2px solid rgba(150, 180, 210, 0.75);
  outline-offset: 3px;
  border-radius: 50%;
}

body.lightbox-open {
  overflow: hidden;
}

body.lightbox-paused .gallery-strip-track,
body.lightbox-paused .gallery-track,
body.lightbox-open .gallery-strip-track,
body.lightbox-open .gallery-track {
  animation-play-state: paused;
}