/* ==========================================================================
   Shared lightbox for the Interests galleries (owned by the Photos agent).
   Behaviour and API: lightbox.js. Everything here is under .lightbox.

   The ground is deep ink leaning toward the item's own colour
   (--lightbox-tint, set per item), so a lake brings a little blue with it
   and a sunset a little gold. Flat colour, no glow. No captions anywhere.
   ========================================================================== */

.lightbox {
  --lightbox-radius: 10px;
  --lightbox-tint: var(--night-bg, #15112b);
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--night-ink, #fff8ee);
  overflow: hidden;
  overscroll-behavior: contain;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
}
.lightbox:not([open]) { display: none; }
.lightbox::backdrop { background: transparent; }

/* A deep wall in the item's own hue (like a gallery painted dark green for
   one room and plum for the next), dark enough that the photo leads. */
.lightbox__ground {
  position: absolute;
  inset: 0;
  background-color: color-mix(in oklab, var(--night-bg, #15112b) 80%, var(--lightbox-tint));
  transition: background-color 480ms ease;
}
@supports (color: oklch(from red l c h)) {
  .lightbox__ground { background-color: oklch(from var(--lightbox-tint) 0.25 min(calc(c * 0.5 + 0.012), 0.065) h); }
}

.lightbox__stage {
  position: absolute;
  inset: 0;
  outline: none;
  cursor: grab;
}
.lightbox.is-dragging .lightbox__stage { cursor: grabbing; }

.lightbox__slide {
  position: absolute;
  inset: 0;
  margin: 0;
  will-change: transform;
}

/* No fill of its own: before the photo lands, the ground shows through, so a
   cropped thumbnail flies alone and the rest of the photo fades in around it. */
.lightbox__frame {
  position: absolute;
  transform-origin: 0 0;
  clip-path: inset(0 round var(--lightbox-radius));
  cursor: default;
}
.lightbox__frame img {
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  -webkit-user-drag: none;
  pointer-events: none;
}
/* The full-resolution image fades over the thumbnail once it has decoded. */
.lightbox__hi { opacity: 0; transition: opacity 200ms ease-out; }
.lightbox__frame.is-sharp .lightbox__hi { opacity: 1; }
.lightbox__frame.is-instant .lightbox__hi { transition: none; }

/* Buttons: paper discs with ink glyphs; the page's hue on hover. */
.lightbox__btn {
  position: absolute;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--paper, #fcf8f1);
  color: var(--ink-fixed, #1c1830);
  box-shadow: 0 1px 2px rgba(10, 6, 30, .3), 0 10px 24px -10px rgba(10, 6, 30, .55);
  cursor: pointer;
  transition: background-color var(--dur-micro, 120ms) ease-out, color var(--dur-micro, 120ms) ease-out, translate var(--dur-micro, 120ms) var(--ease-out, ease-out);
}
.lightbox__btn svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.lightbox__btn:hover { background: var(--hue, #f25ca8); color: var(--on-hue, #1c1830); }
.lightbox__btn:focus-visible { outline: 3px solid var(--paper, #fcf8f1); outline-offset: 3px; }
.lightbox__btn[hidden] { display: none; }

.lightbox__close { top: 18px; right: 18px; }
.lightbox__prev { left: max(20px, 2.2vw); top: 50%; translate: 0 -50%; }
.lightbox__next { right: max(20px, 2.2vw); top: 50%; translate: 0 -50%; }
.lightbox__prev:hover { translate: -2px -50%; }
.lightbox__next:hover { translate: 2px -50%; }

.lightbox__live {
  position: absolute !important;
  width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

/* Phones: the image takes the width; the arrows sit together at the bottom,
   within reach of a thumb. */
@media (max-width: 700px) {
  .lightbox { --lightbox-radius: 8px; }
  .lightbox__close { top: 12px; right: 12px; width: 48px; height: 48px; }
  .lightbox__prev, .lightbox__next { top: auto; bottom: max(24px, env(safe-area-inset-bottom)); width: 56px; height: 56px; translate: none; }
  .lightbox__prev { left: calc(50% - 68px); }
  .lightbox__next { right: calc(50% - 68px); }
  .lightbox__prev:hover, .lightbox__next:hover { translate: none; }
}

@media (prefers-reduced-motion: reduce) {
  .lightbox__ground, .lightbox__hi { transition-duration: 1ms; }
}