/* ============================================================
   ILLUSTRAZIONI — pagina /3/ del Readymag
   ============================================================

   Si carica DOPO replica.css. Tela 1024 x 3773, fondo bianco.
   79 elementi, 12 immagini piu un carosello da 7.

   E il rovescio delle altre pagine: carta bianca, inchiostro
   nero, e sono le illustrazioni a fare tutto il colore. L'unico
   colore del sito e il blu #0020F0 delle etichette dei
   programmi — lo stesso blu elettrico dell'indice.

   IL TITOLO E COMPOSTO A MANO
   ---------------------------
   «ILLUSTRAZIONI» non e una parola: sono tredici lettere, ognuna
   un elemento a se con la sua posizione e la sua rotazione, da
   +19 a -14 gradi. Sul Readymag compaiono una per volta.
   Qui sono ferme, al loro posto; l'animazione e da fare.

   OGNI LAVORO HA DUE VERSIONI
   ---------------------------
   Sotto ogni immagine ce n'e un'altra dello stesso lavoro in
   un'altra resa (a colori / retinata). A riposo si vede quella
   sopra; col mouse sopra sfuma e scopre l'altra (vedi «Le
   varianti al passaggio del mouse»).
   ============================================================ */

body[data-pagina="illustrazioni"] {
  --blu-programmi: #0020f0;   /* rgb(0,32,240), come l'indice */
  --tratto: #000000;
  background: var(--bianco);
}

.tela--illustra .el,
.tela--illustra .linea { z-index: var(--z, auto); }

/* Qui le scatole delle linee sono alte 16, non 8: il tratto sta a +8. */
.tela--illustra .linea { --mezza: 8px; }

.tela--illustra {
  height: 3773px;
  background: var(--bianco);
}

/* ---------- Il titolo composto a lettere ------------------ */

/* Il contenitore delle tredici lettere e un <h1> che NON e un
   `.el`: resta nel flusso, alto zero perche le lettere dentro
   sono assolute. Senza questa riga si tiene il margine che il
   browser da agli h1 (0,67em di 32 px = 21,44 px) e quel margine
   **esce** — ne la tela ne il body creano un contesto di blocco,
   perche `overflow: clip` non lo crea come farebbe `hidden` —
   e spinge giu tutta la pagina di 21 px. */
.i-titolone { margin: 0; }

/* Courier New 78 px, interlinea 124, spaziatura 4,9, nero.
   Ogni lettera porta la sua rotazione in --rot. */
.i-lettera {
  font-size: 78px;
  line-height: 124px;
  letter-spacing: 4.9px;
  color: var(--nero);
  text-align: center;
  margin: 0;
  transform: rotate(calc(var(--rot, 0) * 1deg));
}

/* ---------- La colonna di sinistra ------------------------ */

/* Il titolo di un lavoro: 9 px (8 per quello lungo della
   fanzine), interlinea 13, spaziatura 2, nero, grassetto. */
.i-titolo {
  font-size: 9px;
  line-height: 13px;
  letter-spacing: 2px;
  font-weight: 700;
  color: var(--nero);
  margin: 0;
  white-space: pre-line;
}

.i-titolo--lungo { font-size: 8px; }

/* L'anno: 8 px, interlinea 11, spaziatura 1,5. */
.i-anno {
  font-size: 8px;
  line-height: 11px;
  letter-spacing: 1.5px;
  color: var(--nero);
  margin: 0;
}

/* «Programmi utilizzati:» e la sua lista, in blu.
   Contrasto misurato: #0020F0 su bianco fa 8,52:1. */
.i-programmi {
  font-size: 9px;
  line-height: 13px;
  letter-spacing: 2px;
  font-weight: 700;
  color: var(--blu-programmi);
  margin: 0;
}

.i-lista {
  font-size: 8px;
  line-height: 11px;
  letter-spacing: 1.5px;
  color: var(--blu-programmi);
  margin: 0;
  white-space: pre-line;
}

/* ---------- Immagini e cornici ---------------------------- */

.i-img { overflow: hidden; }
.i-img img { width: 100%; height: 100%; object-fit: cover; }

/* La cornice: un filo nero sopra l'immagine, non un bordo
   dell'immagine stessa. Sul Readymag e un rettangolo a parte. */
.i-cornice { border: 1px solid var(--nero); pointer-events: none; }

/* ---------- Le varianti al passaggio del mouse ------------
   Come sul Readymag: le cinque immagini che hanno una seconda
   versione sotto (`.i-img--sopra`) col mouse sopra sfumano da
   100 a 0 in 0,5 s, curva «ease-both», e scoprono l'altra; tolto
   il mouse tornano. Nel modello e un'animazione `hover` sulle
   immagini di sopra: season 1 destra, season 2 sinistra e destra,
   World 1, World 2. L'acquerello e season 1 sinistra non hanno
   una seconda versione.

   Solo sulla tela: in colonna le due versioni stanno una sotto
   l'altra e si vedono gia tutte e due. Un'immagine trasparente
   continua a sentire il mouse, quindi non c'e sfarfallio. */
@media (min-width: 900px) {
  .i-img--sopra { transition: opacity 0.5s cubic-bezier(0.455, 0.03, 0.515, 0.955); }
  .i-img--sopra:hover { opacity: 0; }
}

/* ---------- Carosello ------------------------------------- */

.i-carosello { overflow: hidden; background: var(--nero); }

.i-carosello__vista { position: relative; width: 100%; height: 100%; }

/* Le diapositive stanno in fila su un nastro largo quanto serve, e
   il nastro scorre di lato: --quale dice a che diapositiva siamo. */
.i-carosello__nastro {
  display: flex;
  height: 100%;
  transition: transform 0.6s ease;
  transform: translateX(calc(var(--quale, 0) * -100%));
}

/* Mentre torna dalla copia dell-ultima alla prima il salto non si
   deve vedere: lo script toglie la transizione per un istante. */
.i-carosello__nastro[data-salta] { transition: none; }

.i-carosello__diapo { flex: 0 0 100%; height: 100%; }

/* Senza JavaScript resta la prima, ferma: il nastro non si muove
   perche --quale non viene mai scritto. */

/* Frecce e contatore compaiono solo quando il JS ha preso in
   mano il carosello: se non gira, non ci sono comandi finti. */
.i-carosello:not([data-pronto]) .i-freccia,
.i-carosello:not([data-pronto]) .i-contatore { display: none; }

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

/* Le due frecce e il contatore, come sul Readymag: tondi scuri
   semitrasparenti ai lati. */
.i-freccia {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 46px;
  height: 46px;
  border: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.45);
  color: var(--bianco);
  cursor: inherit;   /* resta la matita della pagina, anche qui */
  display: grid;
  place-items: center;
  padding: 0;
}

.i-freccia:hover { background: rgba(0, 0, 0, 0.7); }
.i-freccia--prima { left: 14px; }
.i-freccia--dopo  { right: 14px; }

.i-freccia svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; }

.i-contatore {
  position: absolute;
  top: 12px;
  left: 16px;
  font-size: 12px;
  line-height: 1;
  color: var(--bianco);
  background: rgba(0, 0, 0, 0.45);
  padding: 5px 9px;
  border-radius: 10px;
}

/* ---------- La freccia indietro --------------------------- */

.i-indietro { color: var(--nero); }
.i-indietro:hover { color: var(--blu-programmi); }

/* ============================================================
   TELEFONO
   ------------------------------------------------------------
   In colonna il titolo torna una parola sola, dritta: tredici
   lettere ruotate su 375 px non ci stanno e diventerebbero
   illeggibili. Le cornici e le linee di costruzione spariscono,
   il carosello resta perche e contenuto.
   ============================================================ */

@media (max-width: 899px) {

  .tela--illustra { height: auto; overflow: visible; }

  .i-cornice { display: none; }

  /* Il titolo: le lettere tornano in fila, dritte, dentro un
     unico blocco. Lo spazio tra loro lo fa la spaziatura. */
  .i-titolone {
    display: block;
    padding: 28px 0 20px;
  }

  .i-lettera {
    position: static;
    display: inline;
    width: auto;
    height: auto;
    transform: none;
    font-size: clamp(28px, 9vw, 48px);
    line-height: 1.2;
    letter-spacing: 3px;
  }

  .i-titolo, .i-anno, .i-programmi, .i-lista, .i-img, .i-carosello {
    position: static;
    width: auto;
    height: auto;
  }

  .i-titolo { font-size: 15px; line-height: 1.5; margin-top: 28px; }
  .i-titolo--lungo { font-size: 15px; }
  .i-anno { font-size: 13px; line-height: 1.6; margin-top: 4px; }
  .i-programmi { font-size: 13px; line-height: 1.6; margin-top: 12px; }
  .i-lista { font-size: 13px; line-height: 1.6; margin-bottom: 12px; }

  .i-img, .i-carosello {
    aspect-ratio: var(--w) / var(--h);
    margin-bottom: 8px;
  }

}