/*
 * css/viewer.css  ·  one moment, full screen (DESIGN §8)
 */
.viewer { position: fixed; inset: 0; z-index: var(--z-viewer); touch-action: none; outline: none; }
.v-backdrop { position: absolute; inset: 0; background: rgba(12, 9, 7, .97); opacity: 0; transition: opacity 420ms var(--ease-glide); }
.v-tint { position: absolute; inset: 0; transition: background 600ms linear; }
.viewer.is-open .v-backdrop { opacity: 1; }
.viewer.is-closing .v-backdrop { opacity: 0; transition-duration: 420ms; }
.v-stage { position: absolute; inset: 0; touch-action: none; user-select: none; -webkit-user-select: none; }

.v-frame {
  position: absolute; left: 0; top: 0; transform-origin: 0 0; will-change: transform;
  box-shadow: 0 30px 90px -20px rgba(0, 0, 0, .75);
}
.v-pan { position: absolute; inset: 0; transform-origin: 0 0; }
.v-media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; -webkit-user-drag: none; user-select: none; }
.v-hi { opacity: 0; transition: opacity 300ms linear; }
.v-hi.is-ready { opacity: 1; }
.v-live { opacity: 0; transition: opacity 380ms var(--ease-breath); pointer-events: none; }
.v-live.is-on { opacity: 1; }
.v-video { display: none; object-fit: contain; background: #000; }
.viewer.is-video .v-video { display: block; }
.viewer.is-video-broken .v-video { display: none; }
.v-sound {
  position: absolute; left: 12px; top: 12px; height: 36px; padding: 0 14px; border-radius: 18px;
  background: rgba(12, 9, 7, .72); border: 1px solid rgba(243, 232, 216, .24); color: var(--cream);
  font: 600 11px/1 var(--f-ui); letter-spacing: .14em; text-transform: uppercase;
}
.v-sound::before { content: ""; position: absolute; inset: -6px; }   /* 48 px to the finger, with margin over fractional pixels */

/* the book plate: aligned to the photo's own edges */
.v-caption {
  position: absolute; left: 0; top: 0; color: var(--cream);
  opacity: 0; translate: 0 8px; transition: opacity 380ms var(--ease-glide) 240ms, translate 380ms var(--ease-glide) 240ms;
}
.viewer.is-open .v-caption { opacity: 1; translate: 0 0; }
.viewer.is-closing .v-caption { opacity: 0; transition-delay: 0s; transition-duration: 200ms; }
.v-caption.is-swapping { opacity: 0 !important; transition: opacity 220ms linear !important; }
.v-line { display: flex; align-items: baseline; gap: 14px; min-width: 0; }
.v-line1 { justify-content: space-between; }
.v-album { font: italic 400 28px/1.12 var(--f-display); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v-pos { flex: none; font: 400 15px/1 var(--f-text); color: var(--mist); font-variant-numeric: lining-nums tabular-nums; }
.v-line2 { margin-top: 9px; flex-wrap: wrap; row-gap: 6px; align-items: center; }
.v-date { font: 600 11px/1.4 var(--f-ui); letter-spacing: .18em; text-transform: uppercase; color: var(--mist); }
.v-chip {
  position: relative; display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px 0 8px; border-radius: 12px;
  font: 600 10px/1 var(--f-ui); letter-spacing: .18em; text-transform: uppercase;
}
.v-chip-live { color: var(--lagoon-300); border: 1px solid rgba(143, 211, 199, .4); background: rgba(143, 211, 199, .06); transition: background-color var(--t-breath), border-color var(--t-breath); }
.v-chip-live::before { content: ""; position: absolute; inset: -12px -6px; }   /* 48 px tall to the finger */
.v-chip-live:hover { background: rgba(143, 211, 199, .14); border-color: rgba(143, 211, 199, .7); }
.v-chip-live svg { width: 14px; height: 14px; fill: var(--lagoon-300); stroke: var(--lagoon-300); stroke-width: 1.1; }
.v-chip-live.is-playing svg { animation: live-spin 2.4s linear infinite; }
@keyframes live-spin { to { transform: rotate(360deg); } }
.v-chip-video { color: var(--cream); border: 1px solid var(--haze); padding-left: 10px; }
.v-notes { margin-top: 12px; display: flex; flex-direction: column; gap: 4px; }
.v-quote { font: italic 400 17px/1.45 var(--f-text); color: rgba(243, 232, 216, .9); text-wrap: pretty; }
.v-more { align-self: flex-start; padding: 6px 0; font: 500 12.5px/1 var(--f-ui); color: var(--ember-300); }
.v-loved { margin-top: 10px; display: flex; align-items: center; gap: 9px; font: 600 10px/1.3 var(--f-ui); letter-spacing: .18em; text-transform: uppercase; color: var(--mist); }
.v-loved-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ember-300); box-shadow: 0 0 10px rgba(242, 178, 108, .7); }
.v-links { margin-top: 12px; display: flex; gap: 22px; align-items: center; }
.v-links a, .v-links button { display: inline-flex; align-items: center; min-height: 32px; font: 500 13px/1 var(--f-ui); color: var(--ember-300); text-decoration: none; }
.v-links a:hover, .v-links button:hover { text-decoration: underline; text-underline-offset: 4px; }

/* controls */
.v-btn {
  position: absolute; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(26, 20, 16, .72); border: 1px solid var(--haze); color: var(--cream);
  opacity: 0; transition: opacity 420ms var(--ease-glide) 120ms, background-color var(--t-breath), border-color var(--t-breath), transform var(--t-press) var(--ease-press);
}
.viewer.is-open .v-btn { opacity: 1; }
.v-btn:hover { background: var(--dusk-700); border-color: rgba(242, 178, 108, .55); }
.v-btn:active { transform: scale(.95); }
.v-btn:disabled { opacity: 0 !important; pointer-events: none; }
.v-btn svg { width: 18px; height: 18px; stroke: currentColor; stroke-width: 1.5; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.v-close { width: 44px; height: 44px; top: calc(20px + var(--safe-t)); right: calc(24px + var(--safe-r)); }
.v-prev { left: calc(24px + var(--safe-l)); top: 50%; }
.v-next { right: calc(24px + var(--safe-r)); top: 50%; }
.v-top-pos { display: none; }

/* touch: tap the photo to hide everything but the photo */
.viewer.is-bare .v-btn, .viewer.is-bare .v-caption, .viewer.is-bare .v-top-pos { opacity: 0 !important; pointer-events: none; transition: opacity 220ms linear; }
.viewer.is-zoomed .v-caption, .viewer.is-zoomed .v-prev, .viewer.is-zoomed .v-next { opacity: 0 !important; pointer-events: none; transition: opacity 220ms linear; }

@media (max-width: 899px) { .v-album { font-size: 24px; } }
@media (max-width: 599px) {
  .v-album { font-size: 22px; }
  .v-date { font-size: 10.5px; }
  .v-quote { font-size: 16px; }
  .v-pos { display: none; }
  .v-caption { padding-bottom: 54px; }
  .v-top-pos {
    display: block; position: absolute; left: calc(18px + var(--safe-l)); top: calc(30px + var(--safe-t));
    font: 400 15px/1 var(--f-text); color: var(--mist); opacity: 0; transition: opacity 420ms var(--ease-glide) 120ms;
  }
  .viewer.is-open .v-top-pos { opacity: 1; }
  .v-close { top: calc(14px + var(--safe-t)); right: calc(12px + var(--safe-r)); }
  .v-prev, .v-next { width: 44px; height: 44px; top: auto !important; bottom: calc(14px + var(--safe-b)); }
  .v-prev { left: calc(12px + var(--safe-l)); }
  .v-next { right: calc(12px + var(--safe-r)); }
  .v-links { position: absolute; left: 56px; right: 56px; bottom: 6px; justify-content: center; margin: 0; }
}
/* a phone on its side: the photo takes the full height, the book plate becomes a column beside it */
.viewer.is-side .v-caption { padding-bottom: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; }
.viewer.is-side .v-caption::-webkit-scrollbar { display: none; }
.viewer.is-side .v-album { font-size: 22px; white-space: normal; }
.viewer.is-side .v-line1 { align-items: baseline; }
.viewer.is-side .v-pos { display: inline; font-size: 14px; }
.viewer.is-side .v-quote { font-size: 15.5px; }
.viewer.is-side .v-links { position: static; justify-content: flex-start; margin-top: 10px; }
.viewer.is-side .v-top-pos { display: none; }
.viewer.is-side .v-prev, .viewer.is-side .v-next { width: 44px; height: 44px; }
.viewer.is-side .v-close { top: calc(12px + var(--safe-t)); right: calc(16px + var(--safe-r)); }
@media (hover: none), (pointer: coarse) { .v-links a, .v-links button { min-height: 44px; } }
@media (prefers-reduced-motion: reduce) {
  .v-caption { translate: none; transition-duration: 120ms; transition-delay: 0s; }
  .v-btn, .v-backdrop, .v-top-pos { transition-duration: 120ms; transition-delay: 0s; }
  .v-chip-live.is-playing svg { animation: none; }
}