/* vrp-lente.css - vestito dello ZOOM MIRATO (vedi public/js/vrp-lente.js).
   Tutto sotto .vrp-lente-*: non tocca niente della pagina che lo ospita.
   18/09/2026, Sandrigo. */

:root {
  --vrp-lente-tratto: #ffd54a;             /* giallo: si vede su chiaro e su scuro */
  --vrp-lente-velo: rgba(10, 14, 20, 0.72);
  --vrp-lente-ombra: 0 10px 40px rgba(0, 0, 0, 0.55);
}

/* ---- sulla foto ---------------------------------------------------------- */
.vrp-lente-strato { position: absolute; inset: 0; pointer-events: none; z-index: 2; line-height: 0; }

.vrp-lente-zona {
  position: absolute;
  pointer-events: auto;
  box-sizing: border-box;
  margin: 0; padding: 0;
  border: 2px dashed var(--vrp-lente-tratto);
  border-radius: 6px;
  background: rgba(255, 213, 74, 0.06);
  cursor: zoom-in;
  animation: vrp-lente-respiro 2.4s ease-in-out infinite;
}
.vrp-lente-zona:hover,
.vrp-lente-zona:focus-visible {
  background: rgba(255, 213, 74, 0.18);
  outline: none;
  animation: none;
  box-shadow: 0 0 0 3px rgba(255, 213, 74, 0.35);
}
/* la lentina nell'angolo: dice «qui si ingrandisce» (dentro il riquadro, cosi'
   una cornice che taglia i bordi non la mangia) */
.vrp-lente-zona::after {
  content: "🔍";
  position: absolute;
  top: 3px; right: 3px;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--vrp-lente-tratto);
  font-size: 12px; line-height: 22px; text-align: center;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}
/* il NUMERINO: progressivo su tutto il post, per dire nel testo «vedi 🔍3».
   In alto a sinistra (la lentina sta a destra); c'e' uguale sull'ingrandimento. */
.vrp-lente-num {
  position: absolute;
  top: 3px; left: 3px;
  min-width: 22px; height: 22px;
  padding: 0 5px;
  box-sizing: border-box;
  border-radius: 11px;
  background: var(--vrp-lente-tratto);
  color: #222;
  font: 700 13px/22px system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  text-align: center;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
  pointer-events: none;
}
.vrp-lente-vista .vrp-lente-num { top: -14px; left: -14px; min-width: 30px; height: 30px; border-radius: 15px; font-size: 16px; line-height: 30px; }
@keyframes vrp-lente-respiro {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 213, 74, 0); }
  50%      { box-shadow: 0 0 0 4px rgba(255, 213, 74, 0.30); }
}

/* ---- aperta -------------------------------------------------------------- */
html.vrp-lente-ferma { overflow: hidden; }

.vrp-lente-scena { position: fixed; inset: 0; z-index: 100100; cursor: zoom-out; }

/* il buco nel velo: il particolare resta illuminato al suo posto */
.vrp-lente-buco {
  position: fixed;
  border: 2px solid var(--vrp-lente-tratto);
  border-radius: 4px;
  box-shadow: 0 0 0 200vmax var(--vrp-lente-velo);
  opacity: 0;
  transition: opacity 250ms ease;
}
.vrp-lente-scena.aperta .vrp-lente-buco { opacity: 1; }

.vrp-lente-fili { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.vrp-lente-fili line { stroke: var(--vrp-lente-tratto); stroke-width: 1.6; stroke-dasharray: 6 5; opacity: 0.9; }

/* l'ingrandimento: nasce sopra il riquadro e vola al suo posto */
.vrp-lente-vista {
  position: fixed;
  box-sizing: border-box;
  border: 3px solid var(--vrp-lente-tratto);
  border-radius: 8px;
  background-color: #111;
  background-repeat: no-repeat;
  box-shadow: var(--vrp-lente-ombra);
  --curva: cubic-bezier(.2, .8, .2, 1);
  transition: left 420ms var(--curva), top 420ms var(--curva), width 420ms var(--curva),
              height 420ms var(--curva), background-size 420ms var(--curva), background-position 420ms var(--curva);
}
.vrp-lente-chiudi {
  position: absolute;
  top: -14px; right: -14px;
  width: 30px; height: 30px;
  border: 0; border-radius: 50%;
  background: var(--vrp-lente-tratto);
  color: #222; font-size: 16px; font-weight: 700; line-height: 30px;
  padding: 0;
  cursor: pointer;
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.5);
}

/* ---- l'attrezzo per chi scrive ------------------------------------------- */
.vrp-lente-att {
  position: fixed; inset: 0; z-index: 100000;
  background: rgba(20, 20, 24, .78);
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
.vrp-lente-att-finestra {
  background: #fff; color: #222;
  border-radius: 10px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .45);
  width: min(1180px, 100%);
  max-height: 100%;
  overflow: auto;
  padding: 16px;
  display: flex; flex-direction: column; gap: 12px;
}
.vrp-lente-att-testa { font-size: 17px; font-weight: 600; }
.vrp-lente-att-testa small { display: block; font-size: 13px; font-weight: 400; color: #555; margin-top: 4px; }

.vrp-lente-att-corpo { display: flex; gap: 14px; align-items: flex-start; justify-content: center; }
.vrp-lente-att-palco {
  position: relative;
  flex: 0 1 auto; min-width: 0; max-width: 100%;   /* grande quanto la foto: i riquadri sono in % */
  line-height: 0;
  background: #111;
  border-radius: 6px;
  cursor: crosshair;
  touch-action: none;
  user-select: none;
  align-self: center;
}
.vrp-lente-att-palco img {
  display: block;
  max-width: 100%;
  max-height: calc(100vh - 220px);
  margin: 0 auto;
  -webkit-user-drag: none;
  pointer-events: none;
}
.vrp-lente-att-riq {
  position: absolute;
  box-sizing: border-box;
  border: 2px dashed var(--vrp-lente-tratto);
  background: rgba(255, 213, 74, 0.12);
  cursor: move;
}
.vrp-lente-att-riq.scelto { border-style: solid; background: rgba(255, 213, 74, 0.22); box-shadow: 0 0 0 2px rgba(0, 0, 0, .35); }
.vrp-lente-att-riq b {
  position: absolute; top: 3px; left: 3px;
  min-width: 20px; height: 20px; border-radius: 10px;
  background: var(--vrp-lente-tratto); color: #222;
  font: 700 12px/20px system-ui, sans-serif; text-align: center;
}
.vrp-lente-att-riq i {
  position: absolute; right: -7px; bottom: -7px;
  width: 14px; height: 14px; border-radius: 3px;
  background: var(--vrp-lente-tratto); border: 2px solid #222;
  cursor: nwse-resize;
}

.vrp-lente-att-lista { flex: 0 0 250px; display: flex; flex-direction: column; gap: 8px; font-size: 13px; }
.vrp-lente-att-lista .vuoto { color: #666; margin: 8px 0; }
.vrp-lente-att-lista .aiuto { color: #666; font-size: 12px; margin: 4px 0 0; }
.vrp-lente-att-riga { border: 1px solid #ddd; border-radius: 8px; padding: 8px 10px; cursor: pointer; }
.vrp-lente-att-riga.scelta { border-color: #d4a800; background: #fff9e0; }
.vrp-lente-att-riga .tit { display: flex; align-items: center; gap: 6px; font-weight: 600; }
.vrp-lente-att-riga .tit b {
  min-width: 20px; height: 20px; border-radius: 10px;
  background: var(--vrp-lente-tratto); text-align: center; line-height: 20px; font-size: 12px;
}
.vrp-lente-att-riga output { margin-left: auto; font-variant-numeric: tabular-nums; }
.vrp-lente-att-riga input[type=range] { width: 100%; margin: 6px 0 2px; }
.vrp-lente-att-riga .nota { color: #555; font-size: 12px; }
.vrp-lente-att-riga .bottoni { display: flex; gap: 6px; margin-top: 6px; }

.vrp-lente-att button {
  font: inherit; font-size: 13px;
  padding: 6px 12px;
  border: 1px solid #bbb; border-radius: 6px;
  background: #f4f4f4; color: #222;
  cursor: pointer;
}
.vrp-lente-att button:hover { background: #e8e8e8; }
.vrp-lente-att-piede { display: flex; justify-content: flex-end; gap: 8px; }
.vrp-lente-att-piede .primo { background: #2c6cb0; border-color: #2c6cb0; color: #fff; }
.vrp-lente-att-piede .primo:hover { background: #245a94; }

@media (max-width: 760px) {
  .vrp-lente-att-corpo { flex-direction: column; align-items: stretch; }
  .vrp-lente-att-lista { flex-basis: auto; }
  .vrp-lente-att-palco img { max-height: 55vh; }
}

@media (prefers-reduced-motion: reduce) {
  .vrp-lente-zona { animation: none; }
  .vrp-lente-vista { transition: none; }
}