/* ═══════════════════════════════════════════════════════════════
   QTSI — gallery.css
   Premium "Apple-style" lightbox + image-load polish
   Design by NEXORA (nexorayyc.io)

   Note: the gallery GRID/TILE styles live in sections3.css.
   This file adds (a) the lightbox overlay and (b) a skeleton
   shimmer + fade-in so lazy images feel instant.
═══════════════════════════════════════════════════════════════ */

/* ── 1. Image load polish (perceived performance) ───────────── */

/* Skeleton shimmer while a lazy image is still decoding.
   .is-loading is added by gallery.js, removed on `load`. */
.gallery-tile-inner.is-loading::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    100deg,
    transparent 20%,
    rgba(255, 255, 255, 0.05) 40%,
    rgba(255, 255, 255, 0.07) 50%,
    rgba(255, 255, 255, 0.05) 60%,
    transparent 80%
  );
  background-size: 200% 100%;
  animation: gallery-shimmer 1.4s var(--ease-smooth) infinite;
  pointer-events: none;
}

@keyframes gallery-shimmer {
  from { background-position: 200% 0; }
  to   { background-position: -200% 0; }
}

/* gallery.js controls the actual fade via inline opacity, so no
   specificity battle with sections3.css is needed here. */

/* Make tiles keyboard-focusable targets (gallery.js sets tabindex). */
.gallery-tile-inner:focus-visible {
  outline: 2px solid var(--blue-light);
  outline-offset: 3px;
}

/* ── 2. Lightbox overlay ────────────────────────────────────── */

.lightbox-backdrop {
  position: fixed;
  inset: 0;
  z-index: var(--z-toast);            /* above nav (200) & copilot (300) */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(16px, 4vw, 56px);
  background: rgba(5, 6, 10, 0.82);
  backdrop-filter: blur(26px) saturate(118%);
  -webkit-backdrop-filter: blur(26px) saturate(118%);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity    var(--dur-slow) var(--ease-expo),
    visibility var(--dur-slow) var(--ease-expo);
}

.lightbox-backdrop.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* ── 3. Image stage ─────────────────────────────────────────── */

.lightbox-content {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-5);
  max-width: min(1120px, 100%);
  max-height: 100%;
  /* let the image breathe; controls float outside on desktop */
}

.lightbox-img {
  display: block;
  max-width: 100%;
  max-height: 78vh;
  width: auto;
  height: auto;
  /* contain → preserve aspect ratio, never crop */
  object-fit: contain;
  border-radius: var(--r-lg);
  background: var(--bg-elevated);
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.62), 0 0 0 1px rgba(255, 255, 255, 0.06);
  opacity: 0;
  transform: scale(0.96);
  transition:
    opacity   0.45s var(--ease-expo),
    transform 0.45s var(--ease-expo);
}

.lightbox-backdrop.is-open .lightbox-img {
  opacity: 1;
  transform: scale(1);
}

/* Brief dim during prev/next swap for a smooth cross-step */
.lightbox-img.is-swapping {
  opacity: 0;
  transform: scale(0.98);
}

/* ── 4. Caption + counter ───────────────────────────────────── */

.lightbox-caption {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  max-width: min(680px, 90vw);
  padding: 9px 18px;
  border-radius: var(--r-full);
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--text-primary);
  text-align: center;
  opacity: 0;
  transform: translateY(8px);
  transition:
    opacity   0.4s var(--ease-expo) 0.1s,
    transform 0.4s var(--ease-expo) 0.1s;
}

.lightbox-backdrop.is-open .lightbox-caption {
  opacity: 1;
  transform: none;
}

/* Counter chip injected by gallery.js (e.g. "2 / 6") */
.lightbox-counter {
  flex: none;
  font-variant-numeric: tabular-nums;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--blue-light);
  padding-left: 10px;
  border-left: 1px solid var(--border-md);
}

/* ── 5. Controls (close / prev / next) ──────────────────────── */

.lightbox-close,
.lightbox-prev,
.lightbox-next {
  position: fixed;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: var(--r-full);
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  cursor: pointer;
  opacity: 0;
  transition:
    opacity    var(--dur-slow) var(--ease-expo),
    background  var(--dur-base) var(--ease-smooth),
    transform   var(--dur-base) var(--ease-spring),
    border-color var(--dur-base) var(--ease-smooth);
}

.lightbox-backdrop.is-open .lightbox-close,
.lightbox-backdrop.is-open .lightbox-prev,
.lightbox-backdrop.is-open .lightbox-next {
  opacity: 1;
}

.lightbox-close:hover,
.lightbox-prev:hover,
.lightbox-next:hover,
.lightbox-close:focus-visible,
.lightbox-prev:focus-visible,
.lightbox-next:focus-visible {
  background: rgba(255, 255, 255, 0.14);
  border-color: var(--border-hi);
  transform: scale(1.06);
}

.lightbox-prev:active,
.lightbox-next:active { transform: scale(0.96); }

.lightbox-close {
  top: clamp(16px, 3vw, 28px);
  right: clamp(16px, 3vw, 28px);
}

.lightbox-prev { left:  clamp(12px, 3vw, 32px); top: 50%; transform: translateY(-50%); }
.lightbox-next { right: clamp(12px, 3vw, 32px); top: 50%; transform: translateY(-50%); }

/* keep the vertical-centre transform on hover for side arrows */
.lightbox-backdrop.is-open .lightbox-prev,
.lightbox-backdrop.is-open .lightbox-next { transform: translateY(-50%); }
.lightbox-prev:hover, .lightbox-next:hover,
.lightbox-prev:focus-visible, .lightbox-next:focus-visible { transform: translateY(-50%) scale(1.06); }
.lightbox-prev:active, .lightbox-next:active { transform: translateY(-50%) scale(0.96); }

/* Hide a nav arrow when navigation isn't possible (single image) */
.lightbox-prev[hidden],
.lightbox-next[hidden] { display: none; }

/* ── 6. Mobile ──────────────────────────────────────────────── */

@media (max-width: 640px) {
  .lightbox-backdrop { padding: 14px; }

  .lightbox-img { max-height: 68vh; }

  .lightbox-close,
  .lightbox-prev,
  .lightbox-next {
    width: 44px;
    height: 44px;
  }

  /* Move arrows to the bottom corners so they don't cover the image */
  .lightbox-prev,
  .lightbox-next {
    top: auto;
    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    transform: none;
  }
  .lightbox-prev { left: 18px; }
  .lightbox-next { right: 18px; }

  .lightbox-backdrop.is-open .lightbox-prev,
  .lightbox-backdrop.is-open .lightbox-next { transform: none; }
  .lightbox-prev:hover, .lightbox-next:hover,
  .lightbox-prev:focus-visible, .lightbox-next:focus-visible,
  .lightbox-prev:active, .lightbox-next:active { transform: scale(1.04); }

  .lightbox-caption { font-size: 0.8rem; padding: 8px 14px; }
}

/* ── 7. Reduced motion ──────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .lightbox-backdrop,
  .lightbox-img,
  .lightbox-caption,
  .lightbox-close,
  .lightbox-prev,
  .lightbox-next { transition: opacity 1ms linear !important; }

  .lightbox-img { transform: none !important; }
  .gallery-tile-inner.is-loading::after { animation: none; }
}