/* =========================================================
   Intro — il foglio bianco, la camera che arretra, la pagina che si compone

   LA SCENA, in ordine: foglio bianco e basta (un respiro, niente si
   muove); poi la CAMERA ARRETRA — la griglia si allontana fino alla sua
   misura vera, la pagina torna alla sua — e mentre il bianco si apre
   arriva il menu, e per ultimo il testo della hero.

   Qui c'e' stato per un po' il saluto disegnato a mano (hi.svg), prima
   tracciato dal pennino e poi solo posato sulla home: tolto del tutto su
   richiesta. Resta l'apertura, che era la cosa che si voleva.

   NIENTE SUCCEDE INSIEME. E' l'unica regola che tiene in piedi tutto il
   resto: ogni cosa aspetta che la precedente abbia quasi finito, e le
   sovrapposizioni sono di un paio di decimi, quel tanto che serve a non
   far sentire il vuoto fra un tempo e l'altro. Una presentazione che
   scopre tre cose insieme non ne fa vedere nessuna.

   I tempi veri stanno in js/intro.js (TEMPI): qui ci sono solo le
   durate delle singole transizioni.
   ========================================================= */

:root {
  /* La curva dell'arretramento. E' una expo-out molto marcata: parte
     forte e si posa lentissima, che e' esattamente come si muove una
     camera che rallenta invece di fermarsi. La ease-out del sito
     (0.23,1,0.32,1) e' giusta per un pannello che risponde a un click,
     troppo corta di coda per un movimento che si deve GUARDARE. */
  --intro-camera: cubic-bezier(0.16, 1, 0.3, 1);
  /* Quanto e' "lontana" la griglia all'inizio, come fattore di scala.
     2.4 volte: abbastanza da leggere l'arretramento, non tanto da
     mostrare due sole righe in croce sullo schermo. */
  --intro-griglia-lontano: 2.4;
}

/* ---------- Il foglio bianco ----------
   Sotto il cursore (presence.css, z-index 150) e non sopra: Matteo deve
   disegnare SUL foglio, non dietro. Sopra tutto il resto. */
/* Il foglio bianco: copre tutto e si apre. Sotto il cursore di
   presence.css (z-index 150), sopra il resto della pagina. */
.intro {
  position: fixed;
  inset: 0;
  z-index: 139;
  background: var(--color-white);
  opacity: 1;
  transition: opacity 760ms var(--intro-camera);
}

.intro.is-uscita {
  opacity: 0;
}

/* ---------- La pagina sotto ----------
   Mentre l'intro e' in scena la pagina e' gia' tutta li', solo un filo
   piu' vicina: quando la camera arretra torna a posto da sola. E' l'arretramento vero — la griglia da sola sarebbe un fondale
   che cambia misura, non una scena che si allontana.

   Il transform va TOLTO a fine intro, non lasciato a scale(1): un
   elemento trasformato diventa il blocco contenitore dei suoi
   discendenti in position:fixed, e dentro main ci finisce il primo
   piano delle foto About (js/about-focus.js), che si aspetta la
   finestra. Per questo le due classi sono separate — .intro-attiva
   porta lo stato, .intro-uscita solo la transizione — e a fine corsa
   js/intro.js le toglie entrambe. */
html.intro-attiva main {
  transform: scale(1.04);
}

html.intro-uscita main {
  transition: transform 1200ms var(--intro-camera);
}

/* NIENTE BLUR QUI. C'era un filter: blur(8px) su main, per far "tornare
   a fuoco" la pagina insieme all'arretramento. Costava 113ms per
   fotogramma — nove fotogrammi al secondo — contro i 16,5 della pagina
   ferma, misurati: main contiene l'intero sito, quattro copertine e
   sette foto, e un blur su quella superficie viene ri-rasterizzato a
   ogni fotogramma mentre il pennino disegna sopra. Era tutto lo scatto
   che si vedeva.

   Ed era anche inutile: durante l'intro main sta SOTTO un foglio bianco
   opaco, quindi quel blur non lo vedeva nessuno — si pagava solo. La
   messa a fuoco la fa gia' la dissolvenza del foglio; l'arretramento lo
   fa la scala, che sta sulla GPU e non costa niente. */

/* ---------- La griglia che si allontana ----------
   NON si anima background-size sul body, che era la prima versione:
   costava 100-183ms per fotogramma (misurati) perche' ogni passo
   ridipinge lo sfondo dell'intera finestra. Qui la griglia e' un layer
   suo, con lo stesso disegno gia' alla misura finale, che arriva
   SCALATO: una transform e un'opacita', cioe' due proprieta' che stanno
   sulla GPU e non ridipingono niente.

   Quella vera del body resta spenta finche' il layer non ha finito. Allo
   scambio le due coincidono — stesso passo, stessa origine, e la pagina
   e' ferma a scroll zero — quindi non si vede nessuno stacco. */
html.intro-attiva body,
html.intro-uscita body {
  background-image: none;
}

.intro__griglia {
  position: fixed;
  inset: 0;
  /* Dietro al contenuto ma sopra lo sfondo del body: e' il posto dove
     vive la griglia vera, e lo stesso che usa il livello inchiostro. */
  z-index: -1;
  background-image:
    linear-gradient(to right, var(--color-grey) 1px, transparent 1px),
    linear-gradient(to bottom, var(--color-grey) 1px, transparent 1px);
  background-size: 55px 55px;
  background-position: calc(50% + 27.5px) 0;
  transform: scale(var(--intro-griglia-lontano));
  opacity: 0;
  transition:
    transform 1400ms var(--intro-camera),
    opacity 900ms var(--intro-camera);
  will-change: transform, opacity;
}

.intro__griglia.is-vicina {
  transform: scale(1);
  opacity: 1;
}

/* Non si scorre durante l'intro: una presentazione che scappa via
   mentre parte non la guarda nessuno. Qualsiasi tentativo di scorrere
   la salta invece (vedi js/intro.js) — bloccare senza dare una via
   d'uscita sarebbe una trappola. */
html.intro-attiva,
html.intro-attiva body {
  overflow: hidden;
}

/* ---------- Chi non vuole animazioni ----------
   L'intro non viene proprio montata (js/intro.js esce subito e non
   aggiunge .intro-attiva): niente foglio bianco, niente attesa, la
   pagina e' quella di sempre. Queste regole sono la rete di sicurezza
   se la classe fosse gia' nel documento. */
@media (prefers-reduced-motion: reduce) {
  .intro {
    display: none;
  }

  html.intro-attiva main,
  html.intro-uscita main {
    transform: none;
    filter: none;
    transition: none;
  }

  html.intro-attiva body,
  html.intro-uscita body {
    background-size: 55px 55px;
    transition: none;
  }

  html.intro-attiva,
  html.intro-attiva body {
    overflow: visible;
  }
}