/* Il passaggio da una pagina all'altra, «Di lato» (scelta di Leo, APPROVATO.md): lo fa il browser, che tiene insieme
   per un attimo le due pagine; js/transizioni.js dà un nome a ogni pezzo e il verso (avanti o indietro nel menu).
   I pezzi della pagina vecchia escono di lato uno dopo l'altro; quelli della nuova entrano dall'altra parte mentre
   i primi stanno ancora uscendo; lo sfondo bianco della voce del menu scivola sulla voce nuova, mentre le scritte
   restano ferme e cambiano colore sfumando; il resto (sfondo della pagina, menu) sfuma. */
@view-transition {
  navigation: auto;
}
@media (prefers-reduced-motion: reduce) {
  @view-transition {
    navigation: none;
  }
}

:root {
  --verso: 1;
}
:root:active-view-transition-type(indietro) {
  --verso: -1;
}

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 0.6s;
  animation-timing-function: var(--ease);
}

/* Il menu: lo sfondo bianco della voce aperta scivola, le scritte (classe «voce») restano ferme e sfumano */
::view-transition-group(voce-aperta),
::view-transition-old(*.voce),
::view-transition-new(*.voce) {
  animation-duration: 0.64s;
  animation-timing-function: var(--ease);
}
/* Lo sfondo bianco lo disegna il gruppo stesso, una pillola che cambia larghezza restando alta uguale: le due foto
   della voce, allargate dal browser, crescerebbero anche in altezza (la voce si gonfiava e spariva) */
::view-transition-group(voce-aperta) {
  border-radius: 999px;
  background: var(--bianco);
  box-shadow: var(--voce-aperta-ombra);
}
::view-transition-old(voce-aperta),
::view-transition-new(voce-aperta) {
  animation: none;
  opacity: 0;
}
/* le scritte sempre sopra lo sfondo bianco, anche tornando indietro nel menu */
::view-transition-group(*.voce) {
  z-index: 1;
}

/* Dalla pagina iniziale con la rete aperta alla prima scheda di questa pagina (js/rete-diventa-scheda.js muove i
   gruppi): il vetro delle colonne e la pillola dei nodi li disegnano i gruppi stessi, che cambiano misura restando ben
   fatti. Delle colonne la foto sfuma subito (il numero), dei nodi la scritta sfuma in volo; scheda e nodi nuovi
   compaiono quando le colonne e i nodi sono arrivati. «Torna», spiegazione e invito scorrono un poco a sinistra
   sfumando; fili e testate sfumano dove sono. */
:root:active-view-transition-type(rete-scheda)::view-transition-group(*.rete-colonna) {
  z-index: 2;
  background: var(--vetro-fondo);
  box-shadow: var(--vetro-ombra);
}
:root:active-view-transition-type(rete-scheda)::view-transition-group(*.rete-nodo) {
  z-index: 3;
  background: var(--lens-full);
  box-shadow: var(--nodo-ombra);
}
:root:active-view-transition-type(rete-scheda)::view-transition-group(rete-scheda) {
  z-index: 1;
}
:root:active-view-transition-type(rete-scheda)::view-transition-group(*.rete-meta) {
  z-index: 4;
}
:root:active-view-transition-type(rete-scheda)::view-transition-old(*.rete-colonna),
:root:active-view-transition-type(rete-scheda)::view-transition-old(*.rete-nodo) {
  height: 100%;
}
:root:active-view-transition-type(rete-scheda)::view-transition-old(*.rete-colonna),
:root:active-view-transition-type(rete-scheda)::view-transition-old(*.rete-sfuma) {
  animation: rete-sparisce 0.2s var(--ease) both;
}
:root:active-view-transition-type(rete-scheda)::view-transition-old(*.rete-intorno) {
  animation: rete-a-sinistra 0.32s var(--ease) both;
}
:root:active-view-transition-type(rete-scheda)::view-transition-old(*.rete-nodo),
:root:active-view-transition-type(rete-scheda)::view-transition-new(rete-scheda),
:root:active-view-transition-type(rete-scheda)::view-transition-new(*.rete-meta) {
  animation: none;
}
:root:active-view-transition-type(rete-contatti)::view-transition-new(*.rete-contatto),
:root:active-view-transition-type(rete-contatti)::view-transition-new(*.rete-tasto) {
  animation: none;
}
/* Verso «Contatti» le schede stanno sotto i nodi in volo (il loro vetro li schiarirebbe) e il tasto vero sopra: compare
   mentre i nodi, già arrivati sotto di lui, diventano scuri */
:root:active-view-transition-type(rete-contatti)::view-transition-group(*.rete-contatto) {
  z-index: 1;
}
:root:active-view-transition-type(rete-contatti)::view-transition-group(*.rete-tasto) {
  z-index: 5;
}
@keyframes rete-sparisce {
  to {
    opacity: 0;
  }
}
@keyframes rete-a-sinistra {
  to {
    opacity: 0;
    translate: -60px 0;
  }
}

/* I pezzi restano dove sono: si muovono solo le loro immagini, di lato. Chi esce sparisce prima di finire la sua
   strada e chi entra compare un attimo dopo aver cominciato la sua: le due pagine non si vedono mai piene insieme */
::view-transition-group(*.pezzo) {
  animation: none;
}
::view-transition-old(*.pezzo) {
  animation:
    pezzo-esce 0.48s var(--ease) both,
    pezzo-sparisce 0.28s var(--ease) both;
}
::view-transition-new(*.pezzo) {
  animation:
    pezzo-entra 0.6s var(--ease) both,
    pezzo-compare 0.4s var(--ease) both;
}
@keyframes pezzo-esce {
  to {
    translate: calc(var(--verso) * var(--strada) * -1) 0;
  }
}
@keyframes pezzo-sparisce {
  to {
    opacity: 0;
  }
}
@keyframes pezzo-entra {
  from {
    translate: calc(var(--verso) * var(--strada)) 0;
  }
}
@keyframes pezzo-compare {
  from {
    opacity: 0;
  }
}
/* Un vetro della pagina nuova mostra la sua sfocatura piena anche mentre il suo pezzo, ancora invisibile, aspetta il
   turno per entrare: sulla pagina vecchia compariva un rettangolo sfocato. Per quell'attimo i vetri non sfocano. */
:root:active-view-transition .glass {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* Ogni pezzo parte un po' dopo il precedente e fa più strada: chi esce 60 punti più 30 a pezzo, ogni 25 millesimi;
   chi entra 90 punti più 45 a pezzo, dopo 110 millesimi e poi ogni 40, e compare 100 millesimi dopo essere partito */
::view-transition-old(*.pezzo-0) {
  --strada: 60px;
}
::view-transition-old(*.pezzo-1) {
  --strada: 90px;
  animation-delay: 25ms;
}
::view-transition-old(*.pezzo-2) {
  --strada: 120px;
  animation-delay: 50ms;
}
::view-transition-old(*.pezzo-3) {
  --strada: 150px;
  animation-delay: 75ms;
}
::view-transition-old(*.pezzo-4) {
  --strada: 180px;
  animation-delay: 100ms;
}
::view-transition-old(*.pezzo-5) {
  --strada: 210px;
  animation-delay: 125ms;
}
::view-transition-old(*.pezzo-6) {
  --strada: 240px;
  animation-delay: 150ms;
}
::view-transition-old(*.pezzo-7) {
  --strada: 270px;
  animation-delay: 175ms;
}
::view-transition-new(*.pezzo-0) {
  --strada: 90px;
  animation-delay: 110ms, 210ms;
}
::view-transition-new(*.pezzo-1) {
  --strada: 135px;
  animation-delay: 150ms, 250ms;
}
::view-transition-new(*.pezzo-2) {
  --strada: 180px;
  animation-delay: 190ms, 290ms;
}
::view-transition-new(*.pezzo-3) {
  --strada: 225px;
  animation-delay: 230ms, 330ms;
}
::view-transition-new(*.pezzo-4) {
  --strada: 270px;
  animation-delay: 270ms, 370ms;
}
::view-transition-new(*.pezzo-5) {
  --strada: 315px;
  animation-delay: 310ms, 410ms;
}
::view-transition-new(*.pezzo-6) {
  --strada: 360px;
  animation-delay: 350ms, 450ms;
}
::view-transition-new(*.pezzo-7) {
  --strada: 405px;
  animation-delay: 390ms, 490ms;
}