/* ==========================================================================
   Lightbox — full-screen image / video preview (Playground)
   ========================================================================== */

.lightbox { position: fixed; inset: 0; z-index: 50; }
.lightbox[hidden] { display: none; }

.lb-backdrop { position: absolute; inset: 0; background: var(--bg); }

/* Image or video. Position/size are set in js/lightbox.js (animated from the tile) */
.lb-media {
  position: fixed;
  display: block;
  background: var(--fill-05);
  object-fit: cover;
  user-select: none;
  -webkit-user-drag: none;
}
.lb-media[hidden] { display: none; }

.lb-close {
  position: absolute;
  top: 24px;
  right: 24px;
  padding: 4px;
  border-radius: 8px;
  background: var(--fill-05);
  transition: background-color 0.2s, scale 0.2s var(--spring);
}
.lb-close::after { content: ""; position: absolute; inset: -8px; }
.lb-close .icon { width: 24px; height: 24px; transition: rotate 0.4s var(--spring); }
.lb-close:hover { background: var(--fill-08); }
.lb-close:hover .icon { rotate: 90deg; }
.lb-close:active { scale: 0.9; }

/* ---------- Mini video player (under the video) ----------
   A slim rounded progress bar + one line of text controls, like the site's links. */
.lb-player {
  position: fixed; /* left / top / width set in js/lightbox.js */
  color: var(--ink-40);
  font-size: 14px;
  line-height: 18px;
  letter-spacing: -0.14px;
  user-select: none;
}
.lb-player[hidden] { display: none; }

/* Seek bar: rounded 3px bar (5px + knob on hover), --p (0 → 1) is the progress */
.lb-track {
  position: relative;
  height: 16px;
  margin-bottom: 4px;
  cursor: pointer;
  touch-action: none;
  --bar: 3px;
}
.lb-track::before,
.lb-progress {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  height: var(--bar);
  translate: 0 -50%;
  border-radius: 99px;
  transition: height 0.25s var(--ease-out);
}
.lb-track::before { right: 0; background: var(--fill-08); }
.lb-progress { width: calc(var(--p, 0) * 100%); background: var(--ink); }
/* knob */
.lb-track::after {
  content: "";
  position: absolute;
  top: 50%;
  left: calc(var(--p, 0) * 100%);
  width: 11px;
  height: 11px;
  translate: -50% -50%;
  border-radius: 50%;
  background: var(--ink);
  scale: 0;
  transition: scale 0.25s var(--spring);
}
.lb-track:hover,
.lb-track:focus-visible,
.lb-track.is-seeking { --bar: 5px; }
.lb-track:hover::after,
.lb-track:focus-visible::after,
.lb-track.is-seeking::after { scale: 1; }
.lb-track:focus-visible { outline: none; }

.lb-controls {
  display: flex;
  justify-content: space-between;
  white-space: pre;
}
.lb-right { display: flex; gap: 12px; }
.lb-current { color: var(--ink); }

.lb-btn {
  position: relative;
  letter-spacing: inherit;
  transition: color 0.2s;
}
.lb-btn::after { content: ""; position: absolute; inset: -10px -4px; } /* bigger hit area */
.lb-btn:hover { color: var(--ink); }

/* ---------- Credit line (optional, per image: see config.js) ---------- */
.lb-credit {
  position: absolute;
  left: 50%;
  bottom: 24px;
  translate: -50% 0;
  max-width: calc(100% - 32px);
  color: var(--ink-40);
  font-size: 14px;
  line-height: 18px;
  letter-spacing: -0.14px;
  text-align: center;
}
.lb-credit[hidden] { display: none; }
.lb-credit a { transition: color 0.2s; }
.lb-credit a:hover { color: var(--ink); }