@keyframes veil-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes veil-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes panel-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* the page behind an open dialog does not scroll; the gutter is reserved in base.css so nothing shifts when the scrollbar goes */
html.is-modal { overflow: hidden; }

.lightbox, .qr-modal, .cv-modal { position: fixed; inset: 0; z-index: 30; display: none; align-items: center; justify-content: center; background: color-mix(in oklab, #081625 88%, transparent); padding: 1.5rem; overscroll-behavior: contain; }
.lightbox.is-open, .qr-modal.is-open, .cv-modal.is-open { display: flex; animation: veil-in 260ms ease-out both; }
.lightbox.is-closing { animation: veil-out 300ms ease-in both; }
.qr-modal__image, .cv-content { animation: panel-in 360ms var(--ease-out) both; }

/* the lightbox: the photo with its caption and place in the strip beneath, a step button on each side, a sideways swipe steps too */
.lightbox { padding: 1.5rem 4.5rem; touch-action: pinch-zoom; } /* no panning: a finger swipe reaches the gallery, and the page behind stays put */
.lightbox__figure { display: grid; justify-items: center; margin: 0; max-width: min(100%, 1400px); }
.lightbox__img { max-width: 100%; max-height: calc(92dvh - 3.4rem); width: auto; height: auto; border: 1px solid rgba(232, 240, 246, 0.25); transform-origin: 0 0; }
.lightbox__caption { justify-self: stretch; display: flex; gap: 1.1rem; align-items: baseline; padding-top: 0.7rem; font-family: var(--font); font-size: 0.9rem; line-height: 1.4; color: #b8c7d6; font-variation-settings: "wdth" 85; text-wrap: pretty; }
.lightbox__count { flex: none; color: #e8f0f6; font-variant-numeric: tabular-nums; }
.lightbox__count:empty { display: none; }
.lightbox__step { position: absolute; top: 50%; z-index: 1; display: grid; place-items: center; width: 3.5rem; height: 4.5rem; padding: 0; background: none; border: 0; color: #e8f0f6; cursor: pointer; opacity: 0.7; transform: translateY(-50%); transition: opacity 250ms ease; }
.lightbox__step[hidden] { display: none; }
.lightbox__step--prev { inset-inline-start: 0.5rem; }
.lightbox__step--next { inset-inline-end: 0.5rem; }
.lightbox__step .icon { width: 2rem; height: 2rem; }
.lightbox__step--next .icon { transform: scaleX(-1); }
.lightbox__step--prev:dir(rtl) .icon { transform: scaleX(-1); }
.lightbox__step--next:dir(rtl) .icon { transform: none; }
.lightbox__step:hover, .lightbox__step:focus-visible { opacity: 1; }
.lightbox__step:focus-visible { outline-offset: -4px; }

.cv-modal__download { position: absolute; top: 0.6rem; inset-inline-start: 0.8rem; z-index: 1; display: inline-flex; align-items: center; gap: 0.45rem; min-height: 44px; color: #e8f0f6; text-decoration: none; opacity: 0.85; transition: opacity 250ms ease; }
.cv-modal__download:hover, .cv-modal__download:focus-visible { opacity: 1; text-decoration: underline; }

.lightbox__close, .qr-modal__close, .cv-modal__close { position: absolute; top: 0.6rem; inset-inline-end: 0.8rem; z-index: 1; display: grid; place-items: center; min-width: 44px; min-height: 44px; padding: 0; background: none; border: 0; color: #e8f0f6; font: inherit; font-size: 2rem; line-height: 1; cursor: pointer; opacity: 0.85; transition: opacity 250ms ease; }
.lightbox__close:hover, .qr-modal__close:hover, .cv-modal__close:hover { opacity: 1; }
.lightbox__close:focus-visible, .qr-modal__close:focus-visible, .cv-modal__close:focus-visible { opacity: 1; outline-offset: 0; }
.qr-modal__image { width: min(80vw, 360px); border: 1px solid rgba(232, 240, 246, 0.25); }

.cv-content { position: relative; width: min(96vw, 960px); height: min(92dvh, 1100px); background: var(--surface); color: var(--ink); }
.cv-frame { width: 100%; height: 100%; border: 0; }

@media (max-width: 600px) {
  .lightbox { padding: 3.5rem 0.75rem 1rem; }
  .lightbox__step { width: 2.75rem; height: 3.5rem; }
  .lightbox__step--prev { inset-inline-start: 0; }
  .lightbox__step--next { inset-inline-end: 0; }
  .lightbox__img { max-height: calc(88dvh - 3.4rem); }
}
@media (prefers-reduced-motion: reduce) {
  .lightbox.is-open, .qr-modal.is-open, .cv-modal.is-open, .lightbox.is-closing { animation-duration: 120ms; }
  .qr-modal__image, .cv-content { animation: none; }
}