/* Lightbox (js/lightbox.js) */

html.lb-open { overflow: hidden; }

.lb {
  position: fixed; inset: 0; z-index: 200;
  display: grid; grid-template-rows: 1fr auto;
  padding: clamp(56px, 8vh, 84px) clamp(16px, 7vw, 110px) clamp(16px, 3vh, 28px);
  background: rgba(8, 9, 10, .94);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  opacity: 0; transition: opacity .26s ease;
}
.lb.is-open { opacity: 1; }
/* `display: grid` above beats the browser's own [hidden] rule — without this the closed lightbox
   stays a transparent full-screen layer over the page and swallows every click */
.lb[hidden] { display: none; }

.lb__stage {
  position: relative; min-height: 0;
  display: grid; place-items: center; overflow: hidden;
  touch-action: none;
}
.lb__img {
  max-width: 100%; max-height: 100%;
  object-fit: contain; border-radius: 10px;
  box-shadow: 0 40px 100px -40px rgba(0, 0, 0, .9);
  cursor: zoom-in; user-select: none;
  transform: scale(1); transform-origin: 50% 50%;
  transition: transform .35s cubic-bezier(.2, .8, .2, 1), opacity .25s ease;
}
.lb.is-zoomed .lb__img { transform: scale(2.2); cursor: zoom-out; border-radius: 0; }
.lb.is-loading .lb__img { opacity: .35; }

.lb__caption {
  display: flex; justify-content: center; align-items: baseline; gap: 16px;
  margin: 14px 0 0; color: var(--chalk); font-weight: 700;
}
.lb__count { color: var(--dim); font-weight: 500; font-size: 14px; }
.lb__hint { position: absolute; top: 22px; inset-inline: 0; margin: 0; text-align: center; font-size: 13px; letter-spacing: .12em; color: var(--dim); pointer-events: none; }
.lb.is-zoomed .lb__hint { opacity: 0; }

.lb__btn {
  position: absolute; z-index: 2;
  width: 52px; height: 52px; border-radius: 50%;
  display: grid; place-items: center;
  border: 1px solid rgba(245, 242, 234, .25); background: rgba(8, 9, 10, .6);
  color: var(--chalk); font: 700 26px/1 var(--body); cursor: pointer;
  transition: border-color .2s ease, background-color .2s ease, transform .2s ease;
}
.lb__btn:hover { border-color: var(--yellow); background: rgba(255, 204, 26, .12); }
.lb__btn:active { transform: scale(.94); }
.lb__close { top: 14px; inset-inline-end: 14px; font-size: 20px; }
.lb__prev { top: 50%; inset-inline-start: clamp(8px, 2vw, 28px); transform: translateY(-50%); }
.lb__next { top: 50%; inset-inline-end: clamp(8px, 2vw, 28px); transform: translateY(-50%); }
.lb__prev:active, .lb__next:active { transform: translateY(-50%) scale(.94); }

/* the photos that open it */
.drift-wall__plane { cursor: zoom-in; }
.card-swap-container > .card { cursor: zoom-in; }
.circular-gallery { cursor: zoom-in; }
.circular-gallery:active { cursor: grabbing; }

@media (max-width: 760px) {
  .lb { padding-inline: 8px; }
  .lb__prev, .lb__next { top: auto; bottom: 8px; transform: none; }
  .lb__prev:active, .lb__next:active { transform: scale(.94); }
  .lb__caption { padding-inline: 64px; flex-wrap: wrap; gap: 4px 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .lb, .lb__img { transition: none; }
}