/* lightbox.css
   Full-size screenshot viewer. Shared by every page that shows framed
   screenshots, so it is not tied to the homepage stylesheet.
   Tokens come from the page's own design system (home.css or home-v2.css). */
.lb{position:fixed;inset:0;z-index:200;display:flex;flex-direction:column;
    align-items:center;justify-content:center;gap:16px;padding:40px 28px;
    background:rgba(10,10,10,.94);opacity:0;visibility:hidden;
    transition:opacity .2s ease,visibility .2s}
.lb.open{opacity:1;visibility:visible}
.lb-img{max-width:min(1500px,94vw);max-height:82vh;width:auto;height:auto;
        display:block;border:1px solid var(--ld);border-radius:10px;
        background:var(--panel);transform:scale(.98);transition:transform .2s ease;cursor:zoom-out}
.lb.open .lb-img{transform:scale(1)}
.lb-cap{font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;color:var(--gray-s);
        text-align:center;max-width:70ch;line-height:1.6}
.lb-close{position:absolute;top:22px;right:24px;width:44px;height:44px;border-radius:50%;
          background:transparent;border:1px solid var(--ld);color:var(--paper);
          font-size:20px;line-height:1;cursor:pointer;display:flex;align-items:center;
          justify-content:center;transition:border-color .18s,color .18s}
.lb-close:hover{border-color:var(--acid);color:var(--acid)}
.lb-close:focus-visible{outline:2px solid var(--acid);outline-offset:3px}
.lb-hint{position:absolute;bottom:22px;font-family:var(--mono);font-size:10px;
         letter-spacing:.12em;text-transform:uppercase;color:var(--gray-s);opacity:.6}
body.lb-lock{overflow:hidden}
@media(max-width:600px){.lb{padding:56px 14px}.lb-img{max-height:74vh}.lb-close{top:12px;right:12px}}
@media(prefers-reduced-motion:reduce){
  .lb,.lb-img{transition:none}
  .lb-img{transform:none}
}

/* case study figures opt in too */
.cs-shot img{cursor:zoom-in}