/* ═══ the viewer ═══════════════════════════════════════════════════════════ */

@layer viewer {
  .viewer {
    position: fixed; inset: 0; z-index: 80;
    inline-size: 100%; block-size: 100%;
    background: var(--bg-0);
    color: var(--ink);
    opacity: var(--drag-fade, 1);
    &::backdrop { background: #000; }
    &:not([open]) { display: none; }
  }

  .v-shell {
    position: absolute; inset: 0; z-index: 1;
    translate: 0 var(--drag, 0px);
    scale: var(--drag-s, 1);
    &.is-settling {
      transition: translate .42s var(--spring), scale .42s var(--spring);
    }
  }

  .v-track {
    position: absolute; inset: 0;
    display: flex; overflow-x: auto; overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    overscroll-behavior: contain;
    touch-action: pan-x;
    &::-webkit-scrollbar { block-size: 0; }
    .viewer.is-zoomed & { touch-action: none; overflow: hidden; }
  }

  /* minmax(0, 1fr) on both axes, both elements. A percentage block-size
     against an auto track is circular, and the photograph escapes the
     viewer — this is the fix, and it must stay on both. */
  .v-slide {
    flex: none; inline-size: 100%; block-size: 100%;
    scroll-snap-align: center; scroll-snap-stop: always;
    display: grid;
    grid-template: minmax(0, 1fr) / minmax(0, 1fr);
    padding: clamp(44px, 8vh, 92px) clamp(12px, 4vw, 64px) clamp(150px, 22vh, 210px);
    transition: opacity .3s var(--ease);
    &.is-soft img { filter: blur(6px) saturate(.9); }
  }
  .viewer.is-bare .v-slide { padding-block-end: clamp(44px, 8vh, 92px); }

  .v-carrier {
    display: grid;
    grid-template: minmax(0, 1fr) / minmax(0, 1fr);
    min-inline-size: 0; min-block-size: 0;
  }
  .v-frame {
    display: grid;
    grid-template: minmax(0, 1fr) / minmax(0, 1fr);
    place-items: center;
    min-inline-size: 0; min-block-size: 0;
    translate: var(--tx, 0px) var(--ty, 0px);
    scale: var(--z, 1);
    &.is-easing { transition: translate .36s var(--ease-out), scale .36s var(--ease-out); }
    img {
      max-inline-size: 100%; max-block-size: 100%;
      inline-size: auto; block-size: auto;
      object-fit: contain;
      border-radius: var(--r-photo);
      transition: filter .3s var(--ease);
      user-select: none; -webkit-user-drag: none;
    }
  }

  /* ── chrome ─────────────────────────────────────────────────────────── */

  .v-top, .v-bottom {
    position: absolute; z-index: 3; inset-inline: 0;
    transition: opacity .3s var(--ease), translate .3s var(--ease);
    .viewer.is-bare & { opacity: 0; pointer-events: none; }
  }
  .v-top {
    inset-block-start: 0;
    display: flex; align-items: center; justify-content: space-between;
    padding: max(12px, var(--safe-t)) max(14px, var(--safe-r)) 12px max(14px, var(--safe-l));
    .viewer.is-bare & { translate: 0 -100%; }
  }
  .v-bottom {
    inset-block-end: 0;
    display: grid; gap: 10px;
    padding: 16px max(14px, var(--safe-r)) max(12px, var(--safe-b)) max(14px, var(--safe-l));
    background: linear-gradient(to top, var(--bg-0) 42%, transparent);
    .viewer.is-bare & { translate: 0 100%; }
  }

  .v-icon {
    display: grid; place-items: center;
    inline-size: 40px; block-size: 40px; border-radius: 50%;
    background: var(--bg-2);
    color: var(--ink); font-size: 1rem; line-height: 1;
    transition: background-color var(--quick) var(--ease);
    &:hover { background: var(--bg-3); }
    &[aria-pressed="true"] { background: var(--ink); color: var(--on-ink); }
  }
  @media (width < 760px) {
    .v-icon { inline-size: 44px; block-size: 44px; }
  }

  .v-count {
    display: flex; align-items: baseline; gap: .35em;
    font-family: var(--mono);
    font-size: .8rem; color: var(--mute);
    font-variant-numeric: tabular-nums;
    b { color: var(--ink); font-weight: 400; }
    i { font-style: normal; color: var(--dim); }
  }

  .v-arrow {
    position: absolute; z-index: 3; inset-block: 0; inline-size: clamp(60px, 9vw, 120px);
    display: grid; place-items: center;
    color: var(--ink); font-size: 1.3rem;
    opacity: .55; transition: opacity var(--quick) var(--ease);
    &:hover { opacity: 1; }
    &[disabled] { opacity: 0; pointer-events: none; }
    .viewer.is-bare & { opacity: 0; pointer-events: none; }
  }
  .v-prev { inset-inline-start: 0; }
  .v-next { inset-inline-end: 0; }
  @media (width < 760px), (pointer: coarse) { .v-arrow { display: none; } }

  .v-meta { display: grid; gap: 3px; max-inline-size: 74ch; }
  .v-sub {
    font-family: var(--mono);
    font-size: .74rem; color: var(--dim);
    font-variant-numeric: tabular-nums;
  }
  .v-exif {
    font-family: var(--mono);
    font-size: .74rem;
    color: var(--mute); font-variant-numeric: tabular-nums;
    max-block-size: 0; overflow: hidden; opacity: 0;
    transition: max-block-size .4s var(--ease), opacity .3s var(--ease);
    .viewer.is-info & { max-block-size: 3lh; opacity: 1; }
  }

  .v-acts { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
  /* Narrow: Download and the two icons on one line, full resolution on its
     own below, so nothing is left wrapping alone. */
  @media (width < 520px) {
    .v-acts > .btn { flex: 1; }
    .v-develop { order: 1; flex-basis: 100%; justify-content: center; }
  }

  /* Full resolution: the ring reports real bytes, not a guess. */
  .v-develop {
    display: inline-flex; align-items: center; gap: .6em;
    min-block-size: 36px;
    padding: .45em 1em; border-radius: var(--r-pill);
    border: 1px solid var(--line);
    font-size: .85rem;
    color: var(--mute); font-variant-numeric: tabular-nums;
    transition: color var(--quick) var(--ease), border-color var(--quick) var(--ease);
    &:hover { color: var(--ink); border-color: var(--mute); }
    &[data-state="full"] { color: var(--ink); cursor: default; }
    &[data-state="error"] { color: var(--ink); }
    &[data-state="loading"] { pointer-events: none; }
  }
  .v-ring {
    position: relative; display: grid; place-items: center;
    inline-size: 15px; block-size: 15px; flex: none;
    svg { inline-size: 100%; block-size: 100%; rotate: -90deg; }
    circle { fill: none; stroke-width: 4; }
    .v-ring-bg { stroke: var(--bg-3); }
    .v-ring-fg {
      stroke: var(--ink);
      stroke-dasharray: 97.4;
      stroke-dashoffset: calc(97.4 * (1 - var(--ring, 0)));
      transition: stroke-dashoffset .2s linear;
    }
  }

  .v-hint {
    font-family: var(--mono);
    font-size: .8rem; color: var(--dim);
    &[hidden] { display: none; }
  }

  .v-progress {
    block-size: 2px; border-radius: 1px; background: var(--bg-2);
    &::after {
      content: ""; display: block; block-size: 100%; border-radius: inherit;
      inline-size: calc(var(--v-progress, 0) * 100%);
      background: var(--mute);
    }
  }

  /* The frame picker: every photograph on the shoot, thumbnailed. */
  .v-strip {
    display: flex; gap: 6px; overflow-x: auto;
    padding-block: 6px; scrollbar-width: none;
    scroll-snap-type: x proximity;
    &::-webkit-scrollbar { block-size: 0; }
    button {
      flex: none; inline-size: 46px; block-size: 34px;
      border-radius: 3px; overflow: hidden;
      background: var(--tint); scroll-snap-align: center;
      opacity: .45; transition: opacity var(--quick) var(--ease);
      outline: 2px solid transparent; outline-offset: -2px;
      img { inline-size: 100%; block-size: 100%; object-fit: cover; }
      &:hover { opacity: .85; }
      &[aria-current="true"] { opacity: 1; outline-color: var(--ink); }
    }
  }
  @media (width < 560px) {
    .v-strip button { inline-size: 40px; block-size: 30px; }
    .v-exif { font-size: .7rem; }
  }
}

/* ═══ view transitions ═════════════════════════════════════════════════════ */

@layer motion {
  @media (prefers-reduced-motion: no-preference) {
    ::view-transition-group(photo) { animation-duration: .3s; }
    ::view-transition-old(photo),
    ::view-transition-new(photo) {
      animation: none; mix-blend-mode: normal; block-size: 100%;
      object-fit: contain;
    }
    ::view-transition-old(root) { animation: vt-out .2s var(--ease) both; }
    ::view-transition-new(root) { animation: vt-in .2s var(--ease) both; }
  }
  @keyframes vt-out { to { opacity: 0; } }
  @keyframes vt-in { from { opacity: 0; } }
}