/* galeria-rio — filmstrip horizontal. O canvas #field aparece atrás:
   a raiz é transparente; o trilho flutua. */
.rio { position: relative; z-index: 2; }
.rio__viewport {
  position: relative; width: 100%; min-height: 70vh;
  display: flex; align-items: center; overflow: hidden;
  touch-action: pan-y; cursor: grab;
  /* fades de borda estreitos e sutis (ajustados ao vivo) */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8vw, #000 92vw, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 8vw, #000 92vw, transparent 100%);
}
.rio__viewport.arrastando { cursor: grabbing; }
.rio__trilho { display: flex; flex-wrap: nowrap; align-items: center; will-change: transform; }
.rio__quadro {
  position: relative; flex: 0 0 auto; will-change: transform, opacity;
  cursor: zoom-in; transform-origin: 50% 78%;
}
.rio__img {
  position: relative; width: 100%; height: 100%; overflow: hidden;
  background: var(--ground-deep);
  box-shadow: 0 28px 60px -28px oklch(0 0 0 / 0.85), 0 2px 10px -4px oklch(0 0 0 / 0.6);
}
.rio__picture, .rio__img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.rio__vinheta { position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 60px -10px oklch(0 0 0 / 0.45); }
.rio__legenda {
  position: absolute; left: 2px; bottom: -2.4rem; display: flex; align-items: baseline; gap: 0.8rem;
  white-space: nowrap; pointer-events: none; opacity: 0; transform: translateY(4px);
  transition: opacity var(--base) var(--ease), transform var(--base) var(--ease);
}
.rio__quadro:hover .rio__legenda, .rio__quadro:focus-visible .rio__legenda { opacity: 1; transform: none; }
.rio__legenda-t { font-family: var(--serif); font-style: italic; font-weight: 300; font-size: 1.15rem; color: var(--ink); }
.rio__legenda-m { font-family: var(--mono); font-size: 0.58rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--sun-soft); }

/* ---------- viewer endurecido: foco preso, inert no fundo, sem blur ----------
   Migrado de styles/vestigios.css. A revelação do fundo é por opacidade
   (mode-b troca para um fundo opaco) — nunca backdrop-filter/filter blur. */
.viewer {
  position: fixed; inset: 0; z-index: 50;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none;
  transform-origin: center center;
}
.viewer[hidden] { display: none; }
.viewer.opening { pointer-events: auto; transition: transform 0.52s cubic-bezier(0.22,1,0.36,1), opacity 0.32s; }
.viewer.open { opacity: 1; pointer-events: auto; transform: none !important; }
.viewer.mode-b { background: oklch(0.08 0.008 256); }

.viewer__img { display: flex; align-items: center; justify-content: center; max-width: 88vw; max-height: 78vh; user-select: none; }
.viewer__picture, .viewer__picture img { display: block; max-width: 88vw; max-height: 78vh; }
.viewer__picture img { width: auto; height: auto; object-fit: contain; box-shadow: 0 0 90px -10px oklch(0.86 0.15 75 / 0.22), 0 40px 80px -20px oklch(0 0 0 / 0.6); outline: 1px solid oklch(0.97 0.006 80 / 0.08); }

.viewer__close {
  position: absolute; top: max(1rem, env(safe-area-inset-top)); right: max(1rem, env(safe-area-inset-right));
  background: none; border: 1px solid oklch(0.55 0.008 252 / 0.35); border-radius: 2px;
  cursor: pointer; min-height: 44px; padding: 0.4rem 0.8rem;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-mute); transition: color 0.18s, border-color 0.18s;
  touch-action: manipulation;
}
.viewer__close:hover { color: var(--sun); border-color: var(--sun); }

.viewer__nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  background: none; border: none; cursor: pointer;
  font-family: var(--mono); font-size: 1.6rem; color: var(--ink-faint);
  min-width: 44px; min-height: 44px; padding: 0.75rem;
  display: inline-flex; align-items: center; justify-content: center;
  transition: color 0.18s, transform 0.18s; line-height: 1;
  touch-action: manipulation;
}
.viewer__nav:hover { color: var(--sun); transform: translateY(-50%) scale(1.15); }
.viewer__nav.prev { left: 1rem; }
.viewer__nav.next { right: 1rem; }

.viewer__cap { position: absolute; bottom: 2rem; left: 50%; transform: translateX(-50%); text-align: center; max-width: 38rem; padding: 0 1rem; }
.viewer__cap__title { font-family: var(--serif); font-style: italic; font-size: 1rem; color: oklch(0.70 0.008 252); margin-bottom: 0.35rem; }
.viewer__cap__note { font-family: var(--serif); font-style: italic; font-size: 0.82rem; color: var(--ink-faint); margin-bottom: 0.35rem; }
.viewer__cap__meta { font-family: var(--mono); font-size: var(--meta-size); letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-faint); }

/* assinatura d'água sobre a imagem ampliada — comportamento de Traços;
   Vestígios não passa cfg.watermark, então este nó nem é criado ali. */
.viewer__watermark {
  position: absolute; bottom: max(1rem, env(safe-area-inset-bottom)); left: max(1rem, env(safe-area-inset-left));
  font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink-faint); opacity: 0.55; pointer-events: none;
}