/* ==========================================================================
   Snare — lightbox: click a product screenshot to expand (~75vw) over a
   blurred backdrop. Close via backdrop click, the × button, or Esc.
   ========================================================================== */
.zoomable { cursor: zoom-in; }

.lightbox-overlay {
  position: fixed; inset: 0; z-index: 300;
  display: flex; align-items: center; justify-content: center;
  background: rgba(4, 18, 14, 0.5);
  backdrop-filter: blur(16px) saturate(120%);
  -webkit-backdrop-filter: blur(16px) saturate(120%);
  opacity: 0; pointer-events: none;
  transition: opacity .3s ease;
}
.lightbox-overlay.open { opacity: 1; pointer-events: auto; }

.lightbox-img {
  max-width: 75vw; max-height: 82vh; width: auto; height: auto;
  border-radius: 12px;
  box-shadow: 0 40px 120px -30px rgba(0,0,0,0.8), 0 0 0 1px rgba(255,255,255,0.08);
  transform: scale(.96);
  transition: transform .3s cubic-bezier(.2,.7,.2,1);
  cursor: zoom-out;
}
.lightbox-overlay.open .lightbox-img { transform: scale(1); }

.lightbox-close {
  position: fixed; top: 22px; right: 26px;
  width: 44px; height: 44px; border: 0; border-radius: 50%;
  background: rgba(255,255,255,0.1); color: #fff; font-size: 24px; line-height: 1;
  cursor: pointer; display: grid; place-items: center;
  transition: background .2s ease;
}
.lightbox-close:hover { background: rgba(255,255,255,0.2); }

@media (prefers-reduced-motion: reduce) {
  .lightbox-overlay, .lightbox-img { transition: none; }
}