/* =============================================================
   Parea Sons — il segno di zoom e il visore

   Il gesto «guarda più da vicino», e ce n'è UNO SOLO in tutto il
   sito: il cerchio che prende il posto del cursore, e il visore a
   schermo intero dove la fotografia copre tutto il vetro. La regola,
   coi conti dei contrasti, sta in SISTEMA.md §4ter.

   Stava in css/scheda.css, dove era nato. Ne è uscito il 12 agosto
   2026 perché «Il lino, da vicino» chiedeva lo stesso gesto: fra
   ricopiarlo e chiamarlo si chiama. Qui c'è solo la macchina
   condivisa — `.zoom-segno` e `.visore` — mentre il BOTTONE che la
   accende resta di chi la usa (`.palco__vetro` in scheda.css,
   `.materia__vetro` in materia.css): è un rettangolo trasparente,
   e ogni sezione sa dove stenderlo.
   ============================================================= */

/* --- Il segno di zoom ----------------------------------------
   L'unico angolo arrotondato del sito, e resta l'unico: un mirino è
   tondo perché guarda, e la scritta che gli gira attorno non potrebbe
   girare attorno a un quadrato. La motivazione per esteso sta in
   SISTEMA.md §4ter.

   Sta in position:fixed sulle coordinate del cursore — il margine
   negativo lo centra, così js/scheda.js scrive due numeri e basta —
   e non riceve il puntatore, perché il bottone sotto deve continuare
   a sentire il movimento e il clic.                               */

.zoom-segno {
  /* Piccolo apposta: un disco grande copre il capo proprio nel punto
     che si stava guardando. Tutte le misure qui sotto derivano da
     questa, così cambiarla basta. */
  --segno-d: 48px;
  position: fixed;
  left: 0;
  top: 0;
  z-index: var(--z-velo);
  width: var(--segno-d);
  height: var(--segno-d);
  margin: calc(var(--segno-d) / -2) 0 0 calc(var(--segno-d) / -2);
  border-radius: 50%;
  display: grid;
  place-items: center;
  /* NESSUN disco. Il velo sfuma a niente sul bordo, quindi non c'è un
     contorno che si stacca dalla fotografia: si vede il capo sotto, e
     il segno galleggia.

     Sparire del tutto però non può: sul Blu Navy l'inchiostro dà 1,5:1
     e la scritta non si leggerebbe. Al 52% dove corre la scritta ne dà
     6,1, e sopra il Bianco Ottico il velo è invisibile perché è già
     quel colore. È la velatura della freccia (§4bis), sfumata. */
  background: radial-gradient(circle,
    color-mix(in srgb, var(--fondo-scatto) 50%, transparent) 0 55%,
    color-mix(in srgb, var(--fondo-scatto) 42%, transparent) 84%,
    transparent 100%);
  pointer-events: none;
  opacity: 0;
  transform: scale(0.88);
  transition:
    opacity var(--t-rapido) var(--ease),
    transform var(--t-medio) var(--ease);
}

.zoom-segno[data-visibile="sì"] {
  opacity: 1;
  transform: scale(1);
}

/* Il cerchio col più dentro, tutto in inchiostro.

   NON d'oro, per quanto l'oro sia la nota del sito: questo segno
   galleggia sulla FOTOGRAFIA, e una fotografia non è un «fondo chiaro»
   che si possa garantire. Sopra il Blu Navy, anche col velo, l'anello
   d'oro dà 2,05:1 — sotto la soglia di 3 che §2 fissa per l'oro come
   segno. L'inchiostro sullo stesso velo ne dà 8,66, e a 60px un segno
   di una materia sola è anche più fine di uno di due. */
.zoom-segno__cerchio {
  position: relative;
  width: calc(var(--segno-d) * 0.46);
  height: calc(var(--segno-d) * 0.46);
  border-radius: 50%;
  border: 1px solid var(--inchiostro);
}

.zoom-segno__cerchio::before,
.zoom-segno__cerchio::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: calc(var(--segno-d) * 0.10);
  height: 1px;
  margin-left: calc(var(--segno-d) * -0.05);
  background: var(--inchiostro);
}

.zoom-segno__cerchio::after { transform: rotate(90deg); }

/* La scritta gira attorno, su un tracciato circolare vero: una parola
   per lettera ruotata a mano si sfalsa sempre di un grado. */
.zoom-segno__giro {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  animation: gira-segno 18s linear infinite;
}

/* Il corpo è in unità del viewBox, che è sempre 120: quando il disco
   scende, la lettera resa scende con lui. Si alza qui per compensare,
   così a schermo resta intorno ai 7px in tutte le misure. */
.zoom-segno__giro text {
  font-family: var(--font-dato);
  font-size: 14.5px;
  letter-spacing: 0.06em;
  fill: var(--inchiostro);
}

@keyframes gira-segno {
  to { transform: rotate(360deg); }
}

/* --- Il visore -----------------------------------------------
   A PIENO SCHERMO, senza margini e senza colonne: la fotografia
   copre tutto il vetro del dispositivo — computer, tavoletta o
   telefono, qualunque proporzione — e i comandi le stanno sopra col
   loro velo. Prima era una diapositiva appoggiata in mezzo a un
   foglio: 24px di margine, 108px di miniature e una fotografia 3:4
   costretta dentro quel che restava, cioè un terzo di uno schermo
   largo. Il visore serve a vedere il capo grande; se non lo mostra
   più grande della pagina non serve a niente.

   Il fondo è CHIARO e non scuro: è l'avorio che sta dentro le
   fotografie, quindi il bordo della lastra sparisce e resta solo il
   capo. Un velo d'inchiostro avrebbe fatto galleggiare un rettangolo
   chiaro in mezzo al buio — è il modo in cui si mostra una
   diapositiva, non un capo di lino. Adesso conta il doppio: lo
   scatto riempie sempre lo schermo, e dove — per un istante, mentre
   carica — non arriva, non si vede un taglio ma la stessa luce.  */

.visore {
  /* Larghezza delle miniature appoggiate sulla fotografia. Serve
     anche alla freccetta di sinistra, che non deve finirci sopra. */
  --vis-mini: 72px;

  position: fixed;
  inset: 0;
  z-index: var(--z-pannello);
  background: var(--fondo-scatto);
  opacity: 0;
  visibility: hidden;
  /* Le due dita di lato sul trackpad del Mac sono «pagina indietro»:
     dentro il visore non devono arrivare alla pagina. */
  overscroll-behavior: none;
  transition:
    opacity var(--t-medio) var(--ease),
    visibility 0s linear var(--t-medio);
}

.visore[data-visibile="sì"] {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}

/* Le altre viste, in colonna, APPOGGIATE sulla fotografia lungo il
   bordo sinistro: non tolgono più larghezza a quello che si è venuti
   a guardare. Anello d'oro su quella che si sta guardando, come il
   quadretto del colore scelto: stesso segno per la stessa cosa.

   Il loro fondo è l'avorio degli scatti, che è anche il fondo delle
   fotografie: dove capitano su un pezzo di telo non si vedono
   appoggiate su niente. */
.visore__binario {
  position: absolute;
  z-index: 3;
  left: var(--s-24);
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  gap: var(--s-8);
  width: var(--vis-mini);
  max-height: calc(100svh - var(--s-96));
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
}

/* Qui le miniature non si spengono: sotto c'è una fotografia, e una
   miniatura al 62% sopra una fotografia non è una miniatura in secondo
   piano, è una miniatura illeggibile. La differenza la fa l'anello
   d'oro, da solo. */
.visore__tasto {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  padding: 0;
  cursor: pointer;
  background: var(--fondo-scatto);
  border: 1px solid var(--filetto);
  outline: 1px solid transparent;
  outline-offset: 2px;
  transition: outline-color var(--t-rapido) var(--ease);
}

.visore__tasto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.visore__tasto:hover { outline-color: var(--filetto-forte); }

.visore__tasto[aria-current="true"] { outline-color: var(--oro); }

.visore__tasto:focus-visible {
  outline: 2px solid var(--rosso);
  outline-offset: 3px;
}

/* Il palco È LO SCHERMO: tutto il riquadro del dispositivo, senza un
   margine. È lui il riquadro che ritaglia, e la fotografia lo COPRE —
   `object-fit: cover`, non `contain`. È il rovescio esatto di com'era
   prima, ed è la ragione per cui prima si vedeva poco: una cornice
   alla misura della fotografia, dentro uno schermo largo, è una
   striscia verticale in mezzo a due campi di avorio.

   Coprendo, lo scatto è sempre più grande dello schermo — di quanto,
   lo dice la proporzione del dispositivo — e quel di più È lo spazio
   di manovra: su un computer largo avanza in altezza, su un telefono
   in larghezza, e in tutti e due i casi il capo si percorre col
   cursore o col dito senza dover prima ingrandire. Le misure le fa
   js/scheda.js dalle proporzioni native dello scatto.

   overflow:hidden perché oltre il bordo non si esce, touch-action:none
   perché il trascinamento lo governa lo script. */
.visore__scena {
  position: absolute;
  inset: 0;
  overflow: hidden;
  cursor: zoom-out;
  touch-action: none;
}

/* La fotografia è più grande dello schermo, e la sua SCATOLA deve
   esserlo davvero: la misura in pixel gliela scrive js/scheda.js.
   `object-fit: cover` da solo non basta e trae in inganno — ritaglia
   dentro la scatola, quindi con una scatola grande quanto lo schermo
   spostare l'immagine non scopre altra fotografia, scopre il fondo.
   Il ritaglio lo fa la scena; la scatola contiene lo scatto intero.

   Sta al centro della scena e ci resta: `translate(-50%, -50%)` è la
   sua metà, non una percentuale dello schermo, quindi lo spostamento e
   l'ingrandimento partono sempre dal centro dell'inquadratura. */
.visore__telaio {
  position: absolute;
  left: 50%;
  top: 50%;
  display: block;
  max-width: none;
  object-fit: cover;
  /* Le tre variabili le scrive js/lente.js, un fotogramma alla volta. */
  transform:
    translate(-50%, -50%)
    translate(var(--sposta-x, 0px), var(--sposta-y, 0px))
    scale(var(--scala, 1));
  transform-origin: center;
  will-change: transform;
}

/* NESSUNA transizione sulla fotografia, ed è voluto. Il filo di
   ritardo che rende morbido l'inseguimento del cursore lo fa
   js/lente.js, un fotogramma alla volta. Fino al 23 settembre 2026 lo
   faceva una transizione di 180ms qui, e ripartiva a ogni evento: un
   trackpad ne manda centoventi al secondo, e una transizione riavviata
   centoventi volte al secondo è una serie di partenze — in Safari,
   scatti. */

/* Il cursore resta `zoom-out` anche da ingranditi, perché è quello che
   il clic fa davvero: la fotografia segue il cursore da sola, non c'è
   niente da afferrare. La mano chiusa compare solo mentre si trascina
   per davvero. */
.visore[data-gesto="sì"] .visore__scena { cursor: grabbing; }

.visore__chiudi {
  position: absolute;
  top: var(--s-24);
  right: var(--s-24);
  z-index: 2;
  display: grid;
  place-content: center;
  width: 44px;
  height: 44px;
  cursor: pointer;
  color: var(--inchiostro);
  background: color-mix(in srgb, var(--fondo-scatto) 78%, transparent);
}

.visore__chiudi::before,
.visore__chiudi::after {
  content: "";
  position: absolute;
  width: 18px;
  height: 1px;
  background: currentColor;
}

.visore__chiudi::before { transform: rotate(45deg); }
.visore__chiudi::after  { transform: rotate(-45deg); }

.visore__chiudi:hover { color: var(--rosso); }

.visore__chiudi:focus-visible {
  outline: 2px solid var(--rosso);
  outline-offset: -2px;
}

/* Quanto si sta ingrandendo, nell'angolo in basso a destra: al centro
   finirebbe addosso alle miniature, che sul telefono stanno lì.
   Sparisce a 1×, dove non c'è niente da dire. */
.visore__grado {
  position: absolute;
  right: var(--s-24);
  bottom: var(--s-24);
  padding: 4px 10px;
  font-family: var(--font-dato);
  font-size: var(--t-12);
  letter-spacing: var(--tracking-dato);
  font-variant-numeric: tabular-nums;
  color: var(--greige);
  background: color-mix(in srgb, var(--fondo-scatto) 78%, transparent);
  opacity: 0;
  transition: opacity var(--t-rapido) var(--ease);
  pointer-events: none;
}

.visore[data-scala="oltre"] .visore__grado { opacity: 1; }

/* --- Le freccette del visore ---------------------------------
   È la freccia del sito (SISTEMA.md §4bis), niente di nuovo: qui c'è
   solo dove va. Convive con le miniature e non le sostituisce — la
   freccetta è per chi sta guardando e vuole la prossima, la miniatura
   per chi sa già quale vuole.

   Sta DENTRO la scena, che è anche la superficie che si trascina: il
   suo pointerdown non deve contare come inizio di un trascinamento, e
   se ne occupa js/scheda.js. Qui basta tenerla sopra la fotografia. */

.visore__freccia {
  position: absolute;
  top: 50%;
  z-index: 3;
  transform: translateY(-50%);
}

/* La freccetta di sinistra sta OLTRE le miniature: sono tutte e due
   appoggiate sulla fotografia, e una sopra l'altra sarebbe un comando
   che ne nasconde un altro. */
.visore__freccia[data-verso="prec"] {
  left: calc(var(--s-24) + var(--vis-mini) + var(--s-16));
}

.visore__freccia[data-verso="succ"] { right: var(--s-24); }

/* Con una vista sola non c'è niente da scorrere, né da elencare. */
.visore[data-sole="sì"] .visore__freccia,
.visore[data-sole="sì"] .visore__binario { display: none; }



/* ---------------------------------------------------- schermi minori */

@media (max-width: 1024px) {
  .zoom-segno { --segno-d: 42px; }
  .zoom-segno__giro text { font-size: 16px; }

  .visore { --vis-mini: 64px; }
}

@media (max-width: 900px) {
  /* Nel visore le miniature si coricano in fondo, al centro: su una
     schermata stretta e alta una colonna a sinistra correrebbe lungo
     tutto il capo. Restano appoggiate sulla fotografia — a pieno
     schermo non c'è un fuori dove metterle. */
  .visore { --vis-mini: 56px; }

  .visore__binario {
    left: 50%;
    top: auto;
    bottom: var(--s-16);
    transform: translateX(-50%);
    width: auto;
    max-width: calc(100vw - var(--s-32));
    max-height: none;
    grid-auto-flow: column;
    grid-auto-columns: var(--vis-mini);
    justify-content: start;
    overflow-x: auto;
    overflow-y: hidden;
  }

  /* Liberate le miniature dal fianco, le freccette tornano ai bordi. */
  .visore__freccia[data-verso="prec"] { left: var(--s-16); }
  .visore__freccia[data-verso="succ"] { right: var(--s-16); }

  .visore__chiudi { top: var(--s-16); right: var(--s-16); }

  /* In basso a destra ci sono le miniature: il grado va in alto a
     sinistra, l'unico angolo rimasto libero. */
  .visore__grado {
    right: auto;
    bottom: auto;
    left: var(--s-16);
    top: var(--s-16);
  }
}

/* --- Movimento ridotto --------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .zoom-segno { transition: none; }

  /* La scritta attorno al segno smette di girare: è l'unica cosa che
     si muove da sola in tutta la pagina. */
  .zoom-segno__giro { animation: none; }
}