/* =============================================================
   Visore foto a tutto schermo — componente del sito (.fv-).
   JS: assets/js/foto-visore.js. Nato per la galleria del progetto
   Ulisse, senza nulla di suo: lo usano le pagine che lo caricano.
   Fondo blu notte (lo stesso inchiostro del sito, non nero), comandi
   a vetro chiaro, numeri in monospazio come le date delle pagine.
   ============================================================= */

html.fv-open { overflow: hidden; }

.fv {
  --fv-ink: #0b1220;
  --fv-line: rgba(255, 255, 255, 0.16);
  --fv-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --fv-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  position: fixed;
  inset: 0;
  z-index: 5000;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  height: 100vh;
  height: 100dvh;
  color: #ffffff;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: contain;
}
.fv[hidden] { display: none; }

.fv__bg {
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 90% at 50% 40%, #0f1a30 0%, #070c18 70%);
  opacity: 0;
  transition: opacity 0.4s ease;
}
.fv.is-open .fv__bg { opacity: 1; }

/* ---------- barra in alto ---------- */
.fv__bar {
  position: relative;
  z-index: 2;
  grid-row: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: max(14px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) 10px max(20px, env(safe-area-inset-left));
}
.fv__count {
  margin: 0;
  color: rgba(255, 255, 255, 0.56);
  font: 500 0.82rem/1 var(--fv-mono);
  letter-spacing: 0.08em;
  font-variant-numeric: tabular-nums;
}
.fv__count b {
  color: #ffffff;
  font-weight: 600;
}
.fv__tools {
  display: flex;
  gap: 8px;
}

.fv__btn,
.fv__nav {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--fv-line);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.25s var(--fv-ease), opacity 0.3s ease;
}
.fv__btn svg,
.fv__nav svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.fv__btn:hover,
.fv__nav:hover {
  background: #ffffff;
  border-color: #ffffff;
  color: var(--fv-ink);
}
.fv__btn:active,
.fv__nav:active { transform: scale(0.94); }
.fv :is(button):focus-visible {
  outline: 2px solid #8fb1f8;
  outline-offset: 3px;
}

/* ---------- palco ---------- */
.fv__stage {
  position: relative;
  z-index: 1;
  grid-row: 2;
  min-height: 0;
  margin-inline: clamp(8px, 6vw, 96px);
  touch-action: none;
  cursor: zoom-in;
}
.fv.is-zoomed .fv__stage { cursor: grab; }
.fv.is-zoomed .fv__stage:active { cursor: grabbing; }

.fv__frame {
  position: absolute;
  overflow: hidden;
  border-radius: 6px;
  background: #121c30;
  box-shadow: 0 40px 90px -40px rgba(0, 0, 0, 0.8);
  transform-origin: 50% 50%;
  /* niente will-change: con il livello "promosso" Chrome non ridisegna la foto alla nuova scala e l'ingrandimento resta sfocato */
}
.fv__img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  -webkit-user-drag: none;
}
/* la miniatura regge la scena finche' la foto grande non e' arrivata */
.fv__img--hi {
  opacity: 0;
  transition: opacity 0.35s ease;
}
.fv__img--hi.is-ready { opacity: 1; }

/* ---------- frecce ai lati ---------- */
.fv__nav {
  position: absolute;
  z-index: 2;
  top: 50%;
  width: 52px;
  height: 52px;
  margin-top: -26px;
  opacity: 0;
}
.fv.is-open .fv__nav { opacity: 1; }
.fv__nav--prev { left: max(18px, env(safe-area-inset-left)); }
.fv__nav--next { right: max(18px, env(safe-area-inset-right)); }
.fv__nav svg { width: 22px; height: 22px; }
.fv.is-single .fv__nav,
.fv.is-single .fv__thumbs { display: none; }
/* ingrandita, la foto prende tutto lo schermo: restano solo riduci e chiudi, su vetro scuro */
.fv.is-open.is-zoomed .fv__nav,
.fv.is-open.is-zoomed .fv__foot,
.fv.is-open.is-zoomed .fv__count {
  opacity: 0;
  pointer-events: none;
  transition-delay: 0s;
}
.fv.is-zoomed .fv__btn {
  border-color: rgba(255, 255, 255, 0.28);
  background: rgba(7, 12, 24, 0.62);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.fv.is-zoomed .fv__btn:hover {
  background: #ffffff;
  color: var(--fv-ink);
}
.fv__count { transition: opacity 0.3s ease; }

/* ---------- piede: didascalia e miniature ---------- */
.fv__foot {
  position: relative;
  z-index: 2;
  grid-row: 3;
  display: grid;
  gap: 14px;
  justify-items: center;
  padding: 20px max(16px, env(safe-area-inset-right)) max(18px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.4s ease 0.08s, transform 0.5s var(--fv-ease) 0.08s;
}
.fv.is-open .fv__foot {
  opacity: 1;
  transform: none;
}
.fv__bar {
  opacity: 0;
  transition: opacity 0.4s ease 0.08s;
}
.fv.is-open .fv__bar { opacity: 1; }

.fv__cap {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: 4px 14px;
  max-width: 78ch;
  text-align: center;
}
.fv__title {
  margin: 0;
  color: #ffffff;
  font-size: clamp(0.98rem, 1.2vw, 1.08rem);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.35;
}
.fv__meta {
  margin: 0;
  color: rgba(255, 255, 255, 0.56);
  font: 500 0.78rem/1.35 var(--fv-mono);
  letter-spacing: 0.06em;
}

.fv__thumbs {
  display: flex;
  gap: 8px;
  max-width: 100%;
  margin: 0;
  padding: 3px;
  list-style: none;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.fv__thumbs::-webkit-scrollbar { display: none; }
.fv__thumbs li { flex: 0 0 auto; }
.fv__thumbs button {
  display: block;
  width: 64px;
  height: 44px;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 8px;
  background: #121c30;
  opacity: 0.45;
  cursor: pointer;
  transition: opacity 0.25s ease, box-shadow 0.25s ease, transform 0.25s var(--fv-ease);
}
.fv__thumbs button:hover { opacity: 0.85; }
.fv__thumbs button.is-on {
  opacity: 1;
  box-shadow: 0 0 0 2px #ffffff;
}
.fv__thumbs img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

/* ---------- telefono ---------- */
@media (max-width: 760px), (pointer: coarse) {
  /* col dito si scorre: le frecce ai lati ruberebbero spazio alla foto */
  .fv__nav { display: none; }
  .fv__stage { margin-inline: 0; }
  .fv__frame { border-radius: 0; }
  .fv__thumbs button { width: 52px; height: 38px; border-radius: 6px; }
}
@media (max-height: 520px) {
  .fv__thumbs { display: none; }
  .fv__foot { padding-top: 8px; gap: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .fv__bg,
  .fv__bar,
  .fv__foot,
  .fv__nav,
  .fv__btn,
  .fv__img--hi,
  .fv__thumbs button { transition: none; }
  .fv__foot { transform: none; }
}