/* ===========================================================================
   Crowd Canvas — stile

   La folla sta in fondo alla prima schermata, dentro [data-gp-front] del
   portale: cammina sulla linea di base mentre si legge la parola, e sfuma
   insieme a tutto il resto del fronte appena si comincia a entrare.

   Il disegno e tutto dentro il canvas. Qui c'e solo la scatola.
   =========================================================================== */

.gp_crowd {
  position: absolute;
  inset: auto 0 0 0;
  /* Una fascia in fondo al blocco fissato. Il minimo serve sugli schermi
     bassi in orizzontale, il massimo perche su un monitor alto la folla non
     arrivi a toccare la parola. */
  height: clamp(200px, 38%, 380px);
  pointer-events: none;
}

.gp_crowd canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  /* Questa riga vale meta dei fotogrammi. Il canvas si ridisegna sessanta
     volte al secondo dentro [data-gp-front], che ha una opacity variabile,
     accanto a un elemento ritagliato da un clip-path SVG: senza un livello
     proprio ogni suo aggiornamento costringe il compositore a rifare tutta
     la pila del blocco fissato.

     Misurato: intervallo mediano fra fotogrammi 33,3 ms senza, 16,7 ms con.
     Il disegno in se costa 0,10 ms, quindi il costo non era mai stato il
     numero di figure. */
  will-change: transform;
}

/* Sugli schermi bassi in orizzontale la folla mangerebbe tutta l'altezza
   utile: meglio non mostrarla che schiacciare la parola. */
@container (max-height: 479px) {
  .gp_crowd {
    display: none;
  }
}