/* Full-screen image viewer (partials/image-viewer, js/iagd-viewer.js). */

.pp-view {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  padding: 64px 56px;
  overflow: hidden;
  background: rgba(8, 5, 20, 0.94);
  touch-action: none;
}
[hidden].pp-view { display: none; }
.pp-view__bar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--color-layer-stroke);
  background: rgba(8, 5, 20, 0.94);
}
.pp-view__cap {
  font-size: 12px;
  color: var(--color-dim-1);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* The viewer zooms with a transform, so the browser must not pan or zoom
   the page under the fingers. */
.pp-view img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 8px;
  touch-action: none;
  user-select: none;
  -webkit-user-drag: none;
  cursor: zoom-in;
  transform-origin: center;
  transition: transform 180ms var(--ease-fluent, ease-out);
}
.pp-view img.is-zoomed { cursor: grab; }
.pp-view img.is-moving { transition: none; }
.pp-view img.is-in-next { animation: pp-view-in-next 300ms var(--ease-fluent, ease-out); }
.pp-view img.is-in-prev { animation: pp-view-in-prev 300ms var(--ease-fluent, ease-out); }
@keyframes pp-view-in-next { from { transform: translate3d(45%, 0, 0); opacity: 0; } }
@keyframes pp-view-in-prev { from { transform: translate3d(-45%, 0, 0); opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .pp-view img.is-in-next, .pp-view img.is-in-prev { animation: none; }
}
.pp-view__nav {
  position: absolute;
  top: 50%;
  z-index: 2;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 9999px;
  border: 1px solid var(--color-layer-stroke-strong);
  background: rgba(255, 255, 255, 0.04);
  color: var(--color-dim-1);
  cursor: pointer;
  transition: background-color 140ms var(--ease-fluent), color 140ms var(--ease-fluent);
}
.pp-view__nav:hover { background: rgba(255, 255, 255, 0.1); color: var(--color-text-on-dark); }
.pp-view__nav--prev { left: 12px; }
.pp-view__nav--next { right: 12px; }
@media (max-width: 640px) {
  .pp-view { padding: 60px 16px; }
  /* A phone swipes between images, so the arrows stay off the photo. */
  .pp-view__nav { display: none !important; }
}