/* ============================================================
   IL MOSTRO — pagina /4/ del Readymag
   ============================================================

   Si carica DOPO replica.css. Tela 1024 x 1533, fondo nero.

   E la pagina piu semplice delle sei: tre video, un titolo, una
   descrizione e due schede in rosso. Nessuna immagine, a parte la
   grana del muro che e la stessa di Street art.

   SULL'ORDINE DI SOVRAPPOSIZIONE
   ------------------------------
   Su questa pagina lo z-index scritto da Readymag NON corrisponde
   a quello che si vede: i widget stanno dentro contesti di
   impilamento annidati, cosi un rettangolo nero con z 316 finisce
   sotto a un video con z 304. Verificato con elementsFromPoint
   sul sito.

   Quindi qui l'ordine e stato riscritto da capo per riprodurre
   quello che si vede davvero, non i numeri dell'originale:

     grana -> rettangolo nero -> video -> testi -> tratteggi

   Le coordinate invece sono quelle vere, prese dal sito.
   ============================================================ */

body[data-pagina="il-mostro"] {
  --rosso: #ff0000;   /* rgb(255,0,0), misurato: schede Programmi e Team */
  --tratto: #ffffff;  /* qui il tratteggio e bianco, come nell'indice   */
  background: var(--nero);
}

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

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

.tela--mostro {
  height: 1533px;
  background: var(--nero);
}

/* ---------- Fondo ----------------------------------------- */

/* La stessa foto di muro di Street art, ripetuta tre volte al
   15%: e l'unica cosa che rompe il nero pieno. */
.grana img { width: 100%; height: 100%; object-fit: cover; opacity: 0.15; }

/* Il rettangolo nero sotto la meta bassa della pagina. */
.fondo-nero { background: var(--nero); }

/* ---------- Video ----------------------------------------- */

/* I video stanno incassati nel loro riquadro: se le proporzioni
   non coincidono restano delle bande, e le bande sono
   trasparenti. E cosi che sul sito le schede rosse si vedono pur
   stando dentro l'ingombro del video grande. */
.video-mostro video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---------- Testi ----------------------------------------- */

/* Titolo: Courier New 29 px, interlinea 58, spaziatura 4,9,
   bianco, centrato. Niente grottesco: qui la pagina e tutta
   monospazio, come una scheda di produzione. */
.m-titolo {
  font-size: 29px;
  line-height: 58px;
  letter-spacing: 4.9px;
  color: var(--bianco);
  text-align: center;
  font-weight: 400;
  margin: 0;
}

.m-sottotitolo {
  font-size: 11px;
  line-height: 22px;
  letter-spacing: 4.9px;
  color: var(--bianco);
  text-align: center;
  margin: 0;
}

/* Le etichette delle scene, a sinistra dei video. */
.m-scena {
  font-size: 8px;
  line-height: 11px;
  letter-spacing: 1.5px;
  color: var(--bianco);
  margin: 0;
}

/* Le due schede a destra: rosso pieno, grassetto.
   Contrasto misurato: #FF0000 su nero fa 5,25:1, sopra la soglia
   di 4,5 per il testo piccolo. */
.m-scheda {
  font-size: 9px;
  line-height: 11px;
  letter-spacing: 1.5px;
  font-weight: 700;
  color: var(--rosso);
  white-space: pre-line;
  margin: 0;
}

.m-descrizione {
  font-size: 9px;
  line-height: 13px;
  letter-spacing: 2px;
  color: var(--bianco);
  margin: 0;
}

.m-link {
  font-size: 9px;
  line-height: 13px;
  letter-spacing: 2px;
  color: var(--bianco);
  text-align: center;
  margin: 0;
}

.m-link a { color: var(--bianco); text-decoration: underline; }
.m-link a:hover { color: var(--verde-link); }

/* ============================================================
   TELEFONO
   ============================================================ */

@media (max-width: 899px) {

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

  /* La grana e il rettangolo nero sono impaginazione da tela: in
     colonna il fondo e gia nero e non serve altro. */
  .grana, .fondo-nero { display: none; }

  /* Le sei linee orizzontali incorniciano i video sulla tela: in
     colonna starebbero tutte in fila in fondo alla pagina. Come le
     verticali, qui non si mostrano. */
  .tela--mostro .linea--oriz { display: none; }

  .m-titolo,
  .m-sottotitolo,
  .m-scena,
  .m-scheda,
  .m-descrizione,
  .m-link {
    position: static;
    width: auto;
    height: auto;
  }

  .m-titolo { font-size: clamp(26px, 8vw, 40px); line-height: 1.3; padding: 24px 0 4px; }
  .m-sottotitolo { font-size: 13px; line-height: 1.6; margin-bottom: 20px; }
  .m-descrizione { font-size: 13px; line-height: 1.6; margin: 16px 0; }
  .m-link { font-size: 13px; line-height: 1.6; margin: 16px 0; }

  /* Etichetta e scheda diventano righe sopra il loro video. */
  .m-scena { font-size: 12px; line-height: 1.6; margin-top: 20px; margin-bottom: 6px; }
  .m-scheda { font-size: 12px; line-height: 1.6; margin: 16px 0; }

  .video-mostro {
    position: static;
    width: auto;
    height: auto;
    aspect-ratio: var(--w) / var(--h);
    margin-bottom: 8px;
  }
}

/* ---------- La schermata di apertura ----------------------- */

/* Mentre `html` porta questa classe il video copre tutto e la pagina
   non scorre. La toglie js/mostro.js dopo due secondi. */
html.mostro-carica,
html.mostro-carica body { overflow: hidden; }

html.mostro-carica .m-caricamento {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: 300;
}

.m-caricamento video { width: 100%; height: 100%; object-fit: cover; }

/* Durante il ritorno il video passa sopra al resto, se no lo si vede
   scivolare sotto ai testi mentre rimpicciolisce. */
.m-caricamento { z-index: 300; }

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

.m-indietro { color: var(--bianco); }
.m-indietro:hover { color: var(--rosso); }