/* Photo viewer: one Popover with a scroll-snap track of all photos. */

.viewer {
  display: none;
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  overflow: hidden;
  background: rgb(16 14 14 / 0.9);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  color: #fff;
}
.viewer:popover-open { display: block; }
.viewer::backdrop { background: transparent; }

html:has(.viewer:popover-open) { overflow: hidden; }

.viewer-track {
  display: flex;
  height: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}
.viewer-track::-webkit-scrollbar { display: none; }

.viewer-slide {
  flex: 0 0 100%;
  height: 100%;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  justify-items: center;
  align-items: center;
  gap: 0.75rem;
  scroll-snap-align: center;
  scroll-snap-stop: always;
  padding:
    calc(max(1rem, env(safe-area-inset-top)) + 3.75rem)
    max(1rem, env(safe-area-inset-right))
    max(1rem, env(safe-area-inset-bottom))
    max(1rem, env(safe-area-inset-left));
}

.viewer-slide img {
  width: auto;
  height: auto;
  max-width: min(100%, 64rem);
  max-height: 100%;
  object-fit: contain;
  border-radius: var(--radius);
  box-shadow: 0 2rem 6rem rgb(0 0 0 / 0.45);
}

.viewer-slide figcaption {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  min-height: 3rem;
  font-size: 0.9375rem;
  font-weight: 500;
  color: rgb(255 255 255 / 0.88);
}
.viewer-count {
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  font-variant-numeric: tabular-nums;
  color: rgb(255 255 255 / 0.5);
}

/* controls */
.viewer-btn,
.viewer-close {
  position: fixed;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background: rgb(255 255 255 / 0.1);
  color: #fff;
  transition: background-color 0.3s var(--ease), scale 0.2s var(--ease);
}
.viewer-btn:hover,
.viewer-close:hover { background: rgb(255 255 255 / 0.22); }
.viewer-btn:active,
.viewer-close:active { scale: 0.94; }

.viewer-btn svg {
  width: 1.25rem;
  height: 1.25rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.viewer-close {
  top: max(1rem, env(safe-area-inset-top));
  right: max(1rem, env(safe-area-inset-right));
  font-size: 1.75rem;
  line-height: 1;
}

/* phones: arrows sit at the bottom, level with the caption */
.viewer-prev { left: max(1rem, env(safe-area-inset-left)); bottom: max(1rem, env(safe-area-inset-bottom)); }
.viewer-next { right: max(1rem, env(safe-area-inset-right)); bottom: max(1rem, env(safe-area-inset-bottom)); }

/* larger screens: arrows at the sides, photo gets room between them */
@media (min-width: 760px) {
  .viewer-slide {
    padding-left: max(6.5rem, env(safe-area-inset-left));
    padding-right: max(6.5rem, env(safe-area-inset-right));
  }
  .viewer-prev,
  .viewer-next { top: 50%; bottom: auto; translate: 0 -50%; width: 3.5rem; height: 3.5rem; }
  .viewer-prev { left: max(1.5rem, env(safe-area-inset-left)); }
  .viewer-next { right: max(1.5rem, env(safe-area-inset-right)); }
}

/* motion: entry in CSS, exit via .is-closing (set by site.js) */
@media (prefers-reduced-motion: no-preference) {
  .viewer:popover-open { animation: viewer-in 0.35s var(--ease) both; }
  .viewer.is-closing { animation: viewer-out 0.3s var(--ease) both; }

  .viewer:popover-open .viewer-track { animation: viewer-track-in 0.5s var(--ease) both; }
  .viewer.is-closing .viewer-track { animation: viewer-track-out 0.3s var(--ease) both; }

  /* photos shrink and fade as they slide out, grow into focus as they arrive */
  @supports (animation-timeline: view()) {
    .viewer-slide img,
    .viewer-slide figcaption {
      animation: viewer-focus linear both;
      animation-timeline: view(inline);
    }
  }
}

@keyframes viewer-in {
  from { opacity: 0; }
}
@keyframes viewer-out {
  to { opacity: 0; }
}
@keyframes viewer-track-in {
  from { scale: 0.96; }
}
@keyframes viewer-track-out {
  to { scale: 0.97; }
}
@keyframes viewer-focus {
  0%   { opacity: 0.15; scale: 0.88; }
  50%  { opacity: 1;    scale: 1; }
  100% { opacity: 0.15; scale: 0.88; }
}