/* ---------------------------------------------------------------------------------------
   Testata di WebNIR: l'effetto "oscilloscopio" sul titolo.

   Sta QUI e non in css/common/header.css per il principio del portale: in common ci va
   quello che ereditano tutti, nei local quello di un progetto solo. Il comune porta la
   classe hdr-hero (la striscia, il velo, le proporzioni, il testo); questo file porta la
   sola variante che webnir accende, scrivendo "hdr-hero hdr-oscilloscopio" nel suo
   protect/gui/local/header/header_2.php.

   VA CARICATO DOPO css/common/header.css, ed e' per questo che nei json di pagina compare
   come ultima voce della lista css. Due regole qui sotto ci contano: la ricaduta del
   titolo senza background-clip, che deve poter sovrascrivere quella di base, e i tre
   blocchi finali (movimento ridotto, contrasto alto, stampa), che integrano gli stessi
   blocchi del foglio comune.
   --------------------------------------------------------------------------------------- */

/* Dentro le lettere del titolo c'e' uno schermo d'oscilloscopio analogico: reticolo, assi
   con le tacche fini, e un segnale complesso con l'alone del fosforo.

   DUE STRATI, E UNO SOLO SI MUOVE. Il segnale scorre, il reticolo sta fermo: su uno
   strumento vero la scala e' serigrafata sul vetro. Sono due immagini distinte proprio
   per questo — un solo sfondo il CSS lo anima tutto insieme, e con il reticolo dentro la
   stessa immagine scorreva anche la scala graduata. I fotogrammi dell'animazione elencano
   la posizione di tutti e due gli strati e cambiano solo quella del primo.

   Le due immagini sono GENERATE da node-tools/gui/genera_oscilloscopio.py: se il segnale
   va cambiato si tocca lo script e si rigenera, non si modifica il path a mano — le
   frequenze sono multipli interi del giro sulla piastrella, e a mano smetterebbe di
   essere periodico facendo comparire uno scalino alla giunzione.

   Perche' file e non data-URI come fanno le nuvole di uish: la traccia da sola e' 9 KB, e
   infilarla nel foglio la raddoppierebbe. Stanno in img/local/gui accanto a striscia.jpg,
   che e' l'altra immagine di questa testata: sono di webnir, come queste regole.

   LE LETTERE SONO SCURE, E IL VELO DIVENTA CHIARO. Un oscilloscopio e' traccia verde su
   schermo nero, e lo schermo qui sta DENTRO le lettere: contro la fotografia un nero
   schermo darebbe 1,6:1, illeggibile a qualunque velo. La via d'uscita non e' rovesciare
   i colori ma rovesciare il VELO: dietro al testo passa un fondo chiaro che si spegne
   dopo la fine della scritta, e il contrasto del titolo non si gioca piu' contro la
   fotografia ma contro quel fondo. Cosi' lo schermo puo' essere nero per davvero.

   DOVE SI SPEGNE LA SFUMATURA non e' a occhio: misurato dove finisce la scritta piu'
   larga, in percentuale della banda, a sette larghezze di finestra. Sopra i 1000 px il
   testo finisce sempre intorno al 38%, perche' titolo e sottotitolo crescono insieme alla
   banda; sotto, il corpo del sottotitolo tocca il suo minimo (.92rem) e smette di
   rimpicciolirsi, quindi la scritta occupa una fetta sempre piu' larga: 53% a 750 px,
   77% a 504 px. Le tre soglie qui sotto seguono quella misura, con una decina di punti
   di coda perche' la sfumatura non finisca di netto sull'ultima lettera.

   Il velo e la sua tinta li impone l'effetto, non il progetto: sono una conseguenza delle
   lettere scure, non della fotografia. Chi debba cambiarli lo faccia con lo stesso
   selettore a due classi, header.hdr-hero.hdr-oscilloscopio, perche' il solo
   header.hdr-hero ha specificita' piu' bassa e perderebbe. */
header.hdr-hero.hdr-oscilloscopio {
  --hdr-schermo     : #06130D;      /* il nero del tubo, dentro le lettere del titolo */
  --hdr-spazzata    : 9s;           /* giro completo del segnale */
  --hdr-velo-tinta  : 255 255 255;  /* il velo schiarisce invece di scurire */
  --hdr-velo        : .93;
  --hdr-fine        : 48%;
  color             : #12291D;      /* il sottotitolo su fondo chiaro: scuro, non bianco */
}

/* Sotto i 1000 px il sottotitolo smette di rimpicciolire e la scritta si allarga: la
   sfumatura la deve seguire, o l'ultima parte del testo finisce sulla fotografia. Non
   basta spostare --hdr-fine, perche' la discesa e' lineare e a meta' strada il velo vale
   gia' poco: si allunga anche il tratto piano. Sul telefono la scritta occupa la banda
   intera, e il fondo chiaro diventa una fascia piena — che e' la conseguenza onesta. */
@media (max-width: 1100px) { header.hdr-hero.hdr-oscilloscopio { --hdr-fine:  66%; --hdr-piano: 34%; } }
@media (max-width:  820px) { header.hdr-hero.hdr-oscilloscopio { --hdr-fine:  96%; --hdr-piano: 56%; } }
@media (max-width:  620px) { header.hdr-hero.hdr-oscilloscopio { --hdr-fine: 100%; --hdr-piano: 85%; } }

header.hdr-hero.hdr-oscilloscopio p {
  color   : #12291D;
  opacity : 1;      /* la regola di base la tiene a .93: su fondo chiaro serve pieno */
}

/* Ricaduta senza background-clip: il titolo non puo' restare bianco come nella regola di
   base, perche' qui il fondo dietro e' chiaro e sparirebbe. Sta PRIMA del @supports: ha
   la stessa specificita' della regola dentro, e messa dopo vincerebbe lei, cancellando
   il color: transparent su cui si regge tutto l'effetto. */
header.hdr-hero.hdr-oscilloscopio h1 { color: var(--hdr-schermo); }

@supports (background-clip: text) or (-webkit-background-clip: text) {
  /* SOLO il titolo. Il sottotitolo resta testo scuro pieno: una traccia dentro lettere
     alte una quindicina di pixel non si legge come un segnale, si legge come sporco. */
  header.hdr-hero.hdr-oscilloscopio h1 {
    /* primo strato = sopra: il segnale, largo tre riquadri e ripetuto, e' quello che
       scorre. Secondo strato = sotto: reticolo e assi, stesi UNA volta sul riquadro e
       fermi, cosi' le divisioni restano quadre e alla stessa distanza. */
    background-image       : url("/img/local/gui/oscilloscopio_traccia.svg"),
                             url("/img/local/gui/oscilloscopio_griglia.svg");
    background-color       : var(--hdr-schermo);
    background-size        : 300% 100%, 100% 100%;
    background-repeat      : repeat-x, no-repeat;
    -webkit-background-clip: text;
    background-clip        : text;
    color                  : transparent;
    width                  : fit-content;
    animation              : hdr-spazzata var(--hdr-spazzata) linear infinite;
  }
}

/* Due posizioni, una per strato: cambia solo la prima. Vanno elencate tutte e due, o il
   browser applica la lista ciclicamente e muove anche il reticolo. */
@keyframes hdr-spazzata {
  from { background-position:    0 50%, 0 50%; }
  to   { background-position: -300% 50%, 0 50%; }
}

/* I tre blocchi che seguono integrano quelli del foglio comune, che si occupa della sola
   hdr-hero generica: la variante deve dire la sua parte da se'. */

@media (prefers-reduced-motion: reduce) {
  header.hdr-hero.hdr-oscilloscopio h1 { animation: none; }
}

@media (prefers-contrast: more) {
  /* Il velo e' bianco, quindi "piu' contrasto" vuol dire ALZARLO, non scurirlo. La riga
     generica del foglio comune non lo raggiungerebbe comunque: ha specificita' piu' bassa
     del blocco a due classi. */
  header.hdr-hero.hdr-oscilloscopio { --hdr-velo: .98; --hdr-piano: 40%; --hdr-fine: 62%; }
}

@media print {
  header.hdr-hero.hdr-oscilloscopio h1 { background: none; color: #000; animation: none; }
}