/* palla.css — la palla da otto vera.
 *
 * La fotografia scontornata di una palla delle risposte tenuta in mano,
 * portata in bianco e nero, che si scuote in sedici fotogrammi e poi mostra
 * la risposta dentro l'oblo'. Non e' un disegno: e' `8-hand-big.jpg`, passata
 * per scontorno, svuotamento dell'oblo', allargamento e conversione.
 *
 * QUI DENTRO NON C'E' NESSUN CORPO DI TESTO, ed e' il punto dell'oggetto. Per
 * ogni frase palla.js cerca il corpo piu' grande che ci sta nell'ellisse del
 * vetro: calcola la corda all'altezza di ogni riga, prova ad andare a capo li'
 * dentro, e ricontrolla sulle posizioni che le righe avranno davvero. Cambia
 * la frase, il carattere o la misura della palla: non sborda niente e nessuno
 * rifa' i conti.
 *
 * I DUE TAGLI. Con la mano e il braccio (1400x1034) l'oblo' e' il 22,36%
 * della tela; sotto i 480px di tela scende sotto i 90px e la riga di chiusura
 * diventa illeggibile. Il taglio senza braccio (802x852) porta l'oblo' al
 * 39,03% e sul telefono le misure tornano comode. Il taglio lo sceglie
 * palla.js dalla larghezza vera, e si puo' forzare con data-taglio.
 * Le misure vengono da geometria.json, che le ha ricavate dall'immagine.
 */

.palla-zona {
  --palla-tenue:  var(--tenue, #56504F);
  --palla-blu:    var(--blu, #0A5396);
  --palla-font:   var(--font-titoli, Questrial, "Century Gothic", system-ui, sans-serif);
  margin: 2.4rem 0 0.6rem;
}

/* La zona compare solo se lo script gira: senza JavaScript non c'e' un buco
   in pagina, non c'e' proprio niente. La riga la mette palla.js. */
body:not(.si-palla) .palla-zona { display: none; }

.palla {
  position: relative; display: block;
  width: 100%; max-width: 640px;
  border: 0; padding: 0; background: none;
  cursor: pointer;

  /* Il rettangolo dell'oblo'. Larghezza in % della larghezza della tela,
     altezza in % dell'altezza: la tela non e' quadrata, e queste quattro
     cifre insieme fanno un cerchio. */
  --oblo-l: 67.25%; --oblo-t: 40.67%; --oblo-w: 22.36%; --oblo-h: 29.69%;
}
.palla[data-taglio="stretta"] {
  --oblo-l: 52.56%; --oblo-t: 42.90%; --oblo-w: 39.03%; --oblo-h: 36.03%;
}

/* Le proporzioni sono fissate qui e non lasciate all'immagine: il riquadro
   del testo non deve dipendere da quale fotogramma ha finito di decodificarsi,
   o al primo scatto la riga salta. */
.palla img { width: 100%; display: block; -webkit-user-drag: none; aspect-ratio: 1400 / 1034; }
.palla[data-taglio="stretta"] img { aspect-ratio: 802 / 852; }

.palla:focus-visible { outline: 2px solid var(--palla-blu); outline-offset: 8px; border-radius: 10px; }

/* L'oblo' coincide con l'ellisse del vetro. Le righe dentro le dispone
   palla.js: qui non c'e' ne' un font-size ne' un line-height. */
.oblo {
  position: absolute;
  left: var(--oblo-l); top: var(--oblo-t); transform: translate(-50%, -50%);
  width: var(--oblo-w); height: var(--oblo-h);
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  font-family: var(--palla-font); letter-spacing: .2px;
  color: #FF4A3D;                 /* 5,22:1 sull'oblo'. Vedi il LEGGIMI: e' un colore nuovo */
  transition: opacity .12s;
}
.oblo.chiusura { color: #4FACEF; }   /* --azzurro del sito, 7,03:1 */
.oblo .riga { white-space: nowrap; }

/* Mentre si scuote il testo sparisce: una scritta ferma sopra una palla che
   si muove tradisce che il movimento e' un video e la scritta no. */
.palla.scuote .oblo { opacity: 0; }

.palla-invito { font-family: var(--palla-font); font-size: .9rem; color: var(--palla-minore, var(--palla-tenue)); margin: 1rem 0 0; }
.palla-morale { margin: .8rem 0 0; max-width: 34ch; }

/* Moto ridotto: la scossa non parte affatto e il testo cambia e basta. Lo
   decide palla.js, che esce prima di animare. Questa riga toglie anche la
   dissolvenza dell'oblo'. */
@media (prefers-reduced-motion: reduce) {
  .oblo { transition: none; }
}