/* slm-lightbox v1.3.0 — brand-free styling.
 *
 * Motion is driven from JS by two custom properties, NOT by CSS transitions:
 *   --slm-p     0→1  the materialize progress (blur + scale + opacity together)
 *   --slm-drag  1→0  how much the backdrop has let go during a dismiss drag
 * A CSS transition here would fight the spring and break interruption (§3/§4),
 * so the only transitions in this file are on the press state and the close
 * button, where there is no gesture to inherit.
 *
 * Colours are custom properties with neutral fallbacks — a site's token file
 * (../../tokens/<site>.css) themes it. If you add a site name here, stop.
 */

.slm-lb {
  --slm-p: 0;
  --slm-drag: 1;
  --slm-lb-radius: 12px;
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  visibility: hidden;
  opacity: calc(var(--slm-p) * var(--slm-drag));
  /* §12 the surface materializes: blur ramps with the same spring as scale */
  background: var(--slm-lb-backdrop, rgba(14, 11, 10, .93));
  -webkit-backdrop-filter: blur(calc(var(--slm-p) * 22px)) saturate(140%);
  backdrop-filter: blur(calc(var(--slm-p) * 22px)) saturate(140%);
  cursor: zoom-out;
  touch-action: none;          /* the overlay owns vertical gestures (§2) */
}

.slm-lb-fig {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  max-width: 100%;
  will-change: transform;      /* §11 compositor-friendly only */
}

.slm-lb-img {
  display: block;
  max-width: min(92vw, 760px);
  max-height: 78vh;
  width: auto;
  height: auto;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .55);
  /* transform AND border-radius are written by JS every frame (paintFlip), because
     the photo flies from the thumbnail it was opened from — the geometry is only
     knowable at runtime. Declaring them here too would just be dead CSS that
     disagrees with what you see. The spring drives both. */
  transform-origin: 50% 50%;
  cursor: grab;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  will-change: transform;
}
.slm-lb.slm-dragging .slm-lb-img { cursor: grabbing; }

.slm-lb-cap {
  text-align: center;
  color: var(--slm-lb-caption, #fff);
  font-family: var(--slm-lb-font, inherit);
  /* §15 vibrancy: over a blurred surface, flat grey text goes mushy — a little
     more weight and a touch of tracking keeps it legible as the bg shifts */
  font-size: 1.05rem;
  font-weight: 500;
  letter-spacing: .01em;
  max-width: 46ch;
}

.slm-lb-x {
  position: absolute;
  top: 18px;
  right: 22px;
  /* §10 a real 44px target, not a 26px glyph */
  width: 46px;
  height: 46px;
  border: 0;
  border-radius: 50%;
  background: var(--slm-lb-close-bg, rgba(255, 255, 255, .12));
  color: var(--slm-lb-close-fg, #fff);
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  transition: transform 120ms ease-out, background 120ms ease-out;
}
.slm-lb-x:hover { background: var(--slm-lb-close-bg-hover, rgba(255, 255, 255, .22)); }
.slm-lb-x:active { transform: scale(0.94); }   /* §1 feedback on the press */
.slm-lb-x:focus-visible { outline: 2px solid var(--slm-lb-accent, #E0AF39); outline-offset: 3px; }

.slm-lb-hint {
  position: absolute;
  bottom: 20px;
  left: 0; right: 0;
  margin: 0;
  text-align: center;
  color: var(--slm-lb-hint, rgba(255, 255, 255, .55));
  font-size: .78rem;
}

/* §7 while its photo is open, the source thumbnail steps back so the eye follows
   the photo — and on close the photo lands back on a plate that is clearly its own */
[data-slm-lifted] { opacity: .35; }

/* §1 the thumbnail acknowledges the press instantly, before anything opens */
.slm-pressed {
  transform: scale(0.975);
  transition: transform 90ms ease-out;
  opacity: .92;
}

/* §14 reduced motion: no travel, no scale — just be there. The spring is
   bypassed in JS; this keeps the static end state correct. */
@media (prefers-reduced-motion: reduce) {
  .slm-lb-img { transform: none !important; border-radius: var(--slm-lb-radius) !important; }
  .slm-lb-fig { transform: none !important; }
  .slm-pressed { transform: none; transition: opacity 90ms ease-out; }
}

/* §14 reduced transparency: frostier and solid, blur dropped */
@media (prefers-reduced-transparency: reduce) {
  .slm-lb {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: var(--slm-lb-backdrop-solid, #0e0b0a);
  }
}

/* §14 more contrast: give the surface a defined edge */
@media (prefers-contrast: more) {
  .slm-lb {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: #000;
  }
  .slm-lb-cap { color: #fff; font-weight: 600; }
  .slm-lb-x { background: rgba(255, 255, 255, .28); border: 1px solid #fff; }
}