/* ---------------------------------------------------------------------------------------
   Testata di PortLAB: l'effetto "arcobaleno" 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 — e il master e' un
   progetto come gli altri. Il comune porta la classe hdr-hero (la striscia, il velo, le
   proporzioni, il testo); questo file porta la sola variante che il master accende,
   scrivendo "hdr-hero hdr-arcobaleno" nel suo protect/gui/local/header/header_2.php.

   VA CARICATO DOPO css/common/header.css: nei json di pagina e' l'ultima voce della
   lista css.

   Non serve nient'altro. A differenza dell'oscilloscopio di webnir e delle nuvole di
   uish, l'arcobaleno non ha bisogno di righe proprie per il movimento ridotto, il
   contrasto alto e la stampa: agisce sul solo h1, che in tutti e tre quei casi e' gia'
   coperto dalla regola generica header.hdr-hero h1 del foglio comune.
   --------------------------------------------------------------------------------------- */

header.hdr-hero.hdr-arcobaleno {
  --hdr-onda : 10s;    /* giro completo dell'onda di colore: la usa solo questo effetto */
}

/* --- il marchio dell'istituto in alto a destra -----------------------------------------
   Come in uish (projects/uish/website/css/local/header.css): un secondo strato di sfondo
   della testata, con l'SVG del master, lo stesso file per tutto il portale — se il logo
   cambia, cambia dappertutto — e non una copia cotta dentro la fotografia. Uish lo tiene
   in basso a destra, qui sta in alto.

   ALTO IL 40% DELLA TESTATA. La percentuale di background-size si riferisce all'altezza
   VERA del riquadro, non a --hdr-alt: quando la banda cresce oltre la misura calcolata
   (finestra stretta, sottotitolo su due righe) il marchio cresce con lei e resta il 40%. La
   larghezza e' "auto": la da' l'SVG, che ha proporzioni proprie (1,485), e scriverla
   sarebbe un secondo posto dove sbagliarle.

   L'ANGOLO: dal bordo destro rientra un terzo della gronda del testo (--hdr-gronda / 3),
   dal bordo alto lo 0,06 dell'altezza, la stessa distanza che aveva dal fondo quando stava
   in basso. Le due misure crescono con la finestra e restano vicine, quindi l'angolo e'
   quasi quadrato: 16 e 15 px a 1400, 19 e 21 a 1920. Sulle finestre strette si fermano
   ciascuna al suo minimo: 8 px in alto sotto i 740 px circa, 5,9 a destra sotto i 500.
   Li' il velo e' gia' spento (--hdr-fine 62%): sulla banda larga il marchio sta sul
   paesaggio chiaro dietro la figura, dove il blu dell'istituto si legge; sotto i 600 px
   circa il taglio tiene il centro del quadro, l'angolo cade sui capelli e gli archi blu
   scuri si leggono meno. Era cosi' anche in basso.

   IL TESTO NON HA RISERVE. Il marchio finisce sopra la prima riga del sottotitolo, con uno
   stacco che va da 20 px (finestra di 320) a 48 (1920). Il titolo gli sta accanto, nella
   stessa fascia, ed e' una parola che non va a capo: lo spazio fra i due cala con la
   finestra, resta sopra i 35 px da 344 in su e a 320 scende a 12. Misurato in italiano,
   inglese e spagnolo con gli stessi minimi: il titolo e' lo stesso, e dove il sottotitolo
   va su due righe la banda cresce di 5 px.

   Come in uish, le quattro proprieta' vanno ELENCATE IN COPPIA: background-image accetta
   due strati, e chi non ripete anche posizione, misura e ripetizione si ritrova la
   fotografia stesa con le regole del logo. In stampa il foglio comune toglie lo sfondo,
   e con lui il marchio. */
header.hdr-hero.hdr-arcobaleno {
  --hdr-marchio    : url("../../img/common/logo/ifac2_nomargin.svg");
  --hdr-marchio-alt: 40%;                                      /* dell'altezza della testata */
  --hdr-marchio-x  : calc(var(--hdr-gronda) / 3);              /* dal bordo destro           */
  --hdr-marchio-y  : max(.5rem, calc(var(--hdr-alt) * .06));   /* dal bordo superiore        */

  background-image   : var(--hdr-marchio), var(--hdr-img);
  background-position: right var(--hdr-marchio-x) top var(--hdr-marchio-y),
                       var(--hdr-fuoco);
  background-size    : auto var(--hdr-marchio-alt),
                       cover;
  background-repeat  : no-repeat, no-repeat;
}

/* La palette NON e' un arcobaleno a saturazione piena: quello ha luminanze WCAG fra 0,07
   (blu) e 0,93 (giallo), e sul velo il blu sparirebbe. Si impone un pavimento a 0,45:
   giallo, verde e ciano restano puri, si schiariscono solo rosso, blu e magenta. Tinta
   peggiore 4,97:1 sul velo — il titolo e' testo grande, dove la soglia WCAG e' 3:1 per AA
   e 4,5:1 per AAA.

   Il @supports non e' pedanteria: senza background-clip il color:transparent farebbe
   SPARIRE il titolo invece di degradarlo. */
@supports (background-clip: text) or (-webkit-background-clip: text) {
  header.hdr-hero.hdr-arcobaleno h1 {
    background-image       : linear-gradient(100deg,
                             #FF9595, #FFFF00, #00FF00, #00FFFF, #ABABFF, #FF84FF, #FF9595);
    background-size        : 300% 100%;
    background-repeat      : repeat;
    -webkit-background-clip: text;
    background-clip        : text;
    color                  : transparent;
    animation              : hdr-onda var(--hdr-onda) linear infinite;
  }
}

/* la prima e l'ultima tinta coincidono e lo spostamento e' di un periodo intero:
   il giro si chiude senza scatto */
@keyframes hdr-onda {
  from { background-position:    0 0; }
  to   { background-position: -300% 0; }
}