/* ---------------------------------------------------------------------------------------
   Testata di Eclipsis: la striscia storica di css/common/header.css (header.section-header,
   con la fotografia come <img> dentro .mask) e la classe hdr-luna, che e' di eclipsis
   soltanto e per questo sta qui e non nel foglio comune.

   Si carica dopo css/common/header.css, come ultima voce della lista css nei json di
   pagina, al pari dei fogli locali degli altri progetti. Qui pero' l'ordine non e' vitale:
   ogni regola ha una classe in piu' di quella comune che corregge, e vince per
   specificita'. Una pagina che non carichi questo foglio mostra la testata di prima,
   scurita e con le scritte bianche: perde l'effetto, non la testata.

   Tre cose, nell'ordine in cui le chiede la testata:
   1. la fotografia alla sua luminosita', senza niente sopra;
   2. "Eclipsis" a sinistra, alta meta' fotografia;
   3. le due scritte riempite con la superficie della Luna.
   --------------------------------------------------------------------------------------- */

/* IL CARATTERE DELLE SCRITTE E' SEMPRE LO STESSO, su ogni dispositivo, e non e' un
   capriccio: tutto qui sotto e' misurato sulle lettere — l'altezza del titolo, i margini
   che portano il riquadro sull'inchiostro, e soprattutto la strada del rover, che passa
   dentro "Eclipsis" lettera per lettera. Con system-ui ogni sistema metteva il suo
   carattere (Segoe UI su Windows, Roboto su Android, San Francisco sull'iPhone), con lettere
   di altra altezza, altra larghezza e altra forma: sul telefono il titolo non era piu' alto
   la meta' della fotografia, e il rover correva piu' in basso o fuori dalle lettere.
   Selawik e' il carattere libero che Microsoft ha disegnato con le MISURE di Segoe UI:
   stesse larghezze (3,365 em per "Eclipsis" in grassetto, identiche), forme quasi uguali,
   quindi sul PC la scritta resta quella che era. Release 1.01 di
   https://github.com/microsoft/Selawik, i due WOFF2 ufficiali senza modifiche (selawkb e
   selawksb, qui rinominati per peso), licenza SIL OFL 1.1 in fonts/local/selawik/OFL.txt.
   system-ui resta come ricaduta finche' il file non arriva (swap): sono 29 KB. */
@font-face {
  font-family : "Selawik";
  font-style  : normal;
  font-weight : 700;
  font-display: swap;
  src         : url("/fonts/local/selawik/selawik-700.woff2") format("woff2");
}
@font-face {
  font-family : "Selawik";
  font-style  : normal;
  font-weight : 600;
  font-display: swap;
  src         : url("/fonts/local/selawik/selawik-600.woff2") format("woff2");
}

/* 1. LA FOTOGRAFIA COM'E'. Il foglio comune scurisce ogni immagine di testata con
   brightness(50%), per rendere leggibile il testo bianco sulle fotografie chiare. Qui il
   cielo dell'eclisse e' gia' quasi nero — luminanza relativa 0,006 in mediana dove cadono
   le scritte — e il filtro spegnerebbe soltanto la Luna e il Sole. Si toglie per questa
   testata e basta: section-header la usa ancora il template, che la vuole com'e'.
   display: block e margin: 0 auto della stessa regola restano, e servono: senza il primo
   sotto l'immagine si apre la fessura della riga di testo, senza il secondo sugli schermi
   piu' larghi di 1914 px la striscia si appoggia a sinistra invece di stare al centro. */
header.section-header.hdr-luna img {
  filter: none;
}

/* IL RIQUADRO DELLA FOTOGRAFIA fa da riferimento per tutte le misure: da contenitore (per
   le unita' cqi, che sono centesimi della sua LARGHEZZA) e da blocco di contenimento per
   le scritte, che prima si posizionavano sulla pagina intera perche' nessun antenato era
   posizionato.
   La larghezza e' scritta e non ricavata dall'immagine, e non per pigrizia: un contenitore
   di tipo inline-size non puo' prendere la misura dal suo contenuto (con fit-content
   verrebbe largo zero). min(100%, 1914px) e' esattamente la larghezza che img-fluid da'
   alla fotografia — mai piu' larga di se stessa, mai piu' della finestra —, e 1914 x 344
   sono le misure di striscia.jpg: se si cambia la striscia, si cambiano qui tutte e due. */
header.section-header.hdr-luna > .mask {
  --luna-prop    : 5.5640;              /* proporzioni della striscia: 1914 / 344 */
  position       : relative;
  width          : min(100%, 1914px);
  margin-inline  : auto;
  container-type : inline-size;
}

/* 2. LE SCRITTE. Il blocco sta a sinistra, rientrato del 3% della larghezza della
   fotografia (57 px a grandezza piena, come la gronda di hdr-hero), e centrato in altezza.
   Tutte le misure sono frazioni dell'altezza della fotografia, --luna-alt, quindi il
   disegno resta identico a qualunque larghezza: il titolo finisce al 33% della larghezza,
   il sottotitolo al 19% (al 42% sui telefoni, dove tocca il suo pavimento), e la Luna
   comincia al 44%. Misurato sui pixel da 320 a 1920 px di finestra: nessun pixel delle
   scritte dentro il disco della Luna, e a 320 px ne restano fuori 13.
   L'ARIA INTORNO ALL'INCHIOSTRO, --luna-bordo, non e' estetica. background-clip: text
   dipinge lo sfondo solo DENTRO il riquadro dell'elemento, e i margini dei due testi, qui
   sotto, stringono quel riquadro sull'inchiostro misurato. Ma le lettere tonde scendono un
   poco sotto la linea di base, e l'antialiasing aggiunge un pixel di sfumatura: senza
   aria quella striscia restava fuori, senza trama, e il sottotitolo usciva tagliato di un
   paio di pixel sul fondo (visto su uno schermo al 125%). L'imbottitura allarga il
   riquadro dipinto; il margine sinistro negativo, e il centraggio che e' simmetrico,
   lasciano le scritte esattamente dov'erano. */
header.section-header.hdr-luna > .mask > .container > div {
  --luna-alt     : calc(100cqi / var(--luna-prop));    /* altezza della fotografia */
  --luna-bordo   : calc(2px + var(--luna-alt) * .02);  /* 9 px a grandezza piena, 3 sul telefono */
  position       : absolute;
  top            : 50%;
  left           : 3cqi;
  transform      : translateY(-50%);
  display        : flex;
  flex-direction : column;
  gap            : calc(var(--luna-alt) * .05);
  padding        : var(--luna-bordo);
  margin-left    : calc(-1 * var(--luna-bordo));
  font-family    : "Selawik", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* "ECLIPSIS" ALTA IL 50% DELLA FOTOGRAFIA, dall'asta della l alla coda della p: e' la
   scritta che si vede, e il numero da scrivere non e' 0,50. Il corpo del carattere non
   e' l'inchiostro, e l'inchiostro si e' misurato SUI PIXEL della pagina vera (Selawik 700),
   confrontando due riprese a densita' 3, con le scritte e senza: "Eclipsis" occupa 0,9783
   em. Non si usano le metriche del canvas, che arrotondano a sessantaquattresimi di em:
   con Segoe UI davano 0,984 invece di 0,9726, e il titolo usciva alto il 49,4%. Per
   l'inchiostro alto meta' fotografia serve dunque un corpo di 0,50 / 0,9783 = 0,511
   dell'altezza.
   I MARGINI PORTANO IL RIQUADRO SULL'INCHIOSTRO, ed e' quello che rende esatto il
   centraggio: sui pixel, con interlinea 1, l'inchiostro comincia 0,1594 em sotto la cima
   del riquadro e finisce 0,1377 em sotto il fondo, che e' la coda della p. Con questi due
   margini il riquadro esterno del titolo coincide con la sua scritta.
   Il margine sinistro e' la spalla della E, 0,079 em fra l'origine e l'asta: senza, la A
   del sottotitolo, che di spalla non ne ha, sporgeva di 14 px a sinistra del titolo.
   I valori sono proprieta' del disegno delle lettere: vanno rimisurati se cambia il
   carattere (con Segoe UI erano 0,9726, 0,1665, 0,139 e 0,078). */
header.section-header.hdr-luna h1 {
  font-size   : calc(var(--luna-alt) * .5 / .9783);
  font-weight : 700;
  line-height : 1;
  margin      : -.1594em 0 .1377em -.079em;
  white-space : nowrap;        /* il titolo e' una parola: non deve mai spezzarsi */
}

/* Il sottotitolo al 7,5% dell'altezza, come in hdr-hero, ma con un pavimento: sul telefono
   la fotografia e' alta 70 px e il 7,5% farebbe 5 px. Il pavimento e' 12 px e non i 14,7
   di hdr-hero perche' qui la scritta non deve toccare la Luna, che comincia al 44,4% della
   larghezza: a 12 px il sottotitolo e' largo 144 px (11,98 em), e a 360 px di finestra
   finisce a 155 contro i 160 della Luna. Sotto i 364 px anche 12 px sono troppi, e comanda
   il 3,3cqi, che tiene la fine della riga al 42,5% della larghezza qualunque sia la finestra.
   Semigrassetto e non normale: dentro aste di un pixel e mezzo la trama non si vede e la
   riga sembra solo grigia. I margini sono quelli del titolo rifatti per questa riga, sui
   pixel anche loro: l'inchiostro comincia 0,1328 em sotto la cima del riquadro e finisce
   alla linea di base, perche' "An astronomic framework" non ha lettere discendenti. */
header.section-header.hdr-luna p {
  font-size   : max(calc(var(--luna-alt) * .075), min(.75rem, 3.3cqi));
  font-weight : 600;
  line-height : 1;
  margin      : -.1328em 0 -.0919em;
  white-space : nowrap;
  text-align  : start;         /* testo.css giustifica tutti i <p> */
}

/* 3. LA SUPERFICIE DELLA LUNA DENTRO LE LETTERE. Un solo sfondo per tutto il blocco, e non
   uno per scritta: titolo e sottotitolo sono due finestre sulla STESSA superficie, come
   se fossero ritagliati dallo stesso pezzo di suolo. background-clip: text ritaglia lo
   sfondo sull'inchiostro dell'elemento e dei suoi discendenti, e siccome i margini qui
   sopra fanno coincidere il riquadro del blocco con l'inchiostro, "cover" stende la trama
   esattamente sulle lettere e non se ne spreca niente.

   luna.jpg e' un ritaglio dei dati della Lunar Reconnaissance Orbiter (colore della camera
   LROC WAC e rilievo dell'altimetro LOLA, dal CGI Moon Kit dello Scientific Visualization
   Studio della NASA, pubblico dominio): la regione di Tycho, sugli altopiani meridionali.
   E' GENERATO da node-tools/gui/genera_luna.py, che scarica i dati, corregge le
   proporzioni per la latitudine, aggiunge l'ombreggiatura con la luce da nord-ovest e fissa
   la luminosita': per cambiarlo si tocca lo script e si rigenera.

   LA LUMINOSITA' DELLA TRAMA LA DECIDE IL CONTRASTO. Il cielo dietro le scritte ha il
   95esimo percentile di luminanza a 0,0102 (misurato pixel per pixel sulla striscia), e lo
   script porta il 5% piu' scuro della trama a 0,270: 5,3:1 anche nel caso peggiore. Serve
   al sottotitolo a 12 px, che e' testo normale e vuole 4,5:1; il titolo, testo grande, ne
   vorrebbe 3. Riscontrato sulla pagina, a densita' 3 e sui soli pixel interni delle aste
   (a densita' 1 l'asta del sottotitolo e' tutta bordo sfumato, e il conto misura
   l'antialiasing invece della trama): il 5% peggiore sta fra 5,4 e 5,8:1 per tutte e due
   le scritte, a ogni larghezza fra 320 e 1920 px.

   IL ROVER. Sopra la superficie corre il Lunar Roving Vehicle delle missioni Apollo visto
   dall'alto. E' il primo dei due strati di sfondo, quindi sta sopra il suolo, e siccome
   background-clip: text vale per tutti e due si vede soltanto attraverso le lettere.
   IL MOTO STA DENTRO L'IMMAGINE, non qui. rover.svg e' una scena grande quanto l'inchiostro
   del titolo in cui il rover percorre una strada irregolare con animateMotion e
   rotate="auto", cioe' con il muso sempre sulla tangente: spostare lo sfondo con
   background-position, come si faceva prima, sa soltanto traslare, e su una strada che
   curva il veicolo avrebbe sbandato di lato. Nella stessa scena ci sono le orme delle
   ruote, che nascono al passaggio e si spengono qualche secondo dopo. Come e' stata trovata
   la strada, dentro le lettere il piu' possibile e con curve da veicolo vero, perche' va a
   9 km/h e come si spengono le orme, lo dice il commento della scena.
   Qui resta soltanto da stenderla sul riquadro del titolo: 3,2857 x 0,9783 em (l'avanzo di
   "Eclipsis" meno la spalla della E, per l'altezza dell'inchiostro), cioe' 1,6793 x 0,5
   altezze della fotografia, a partire dall'angolo in alto a sinistra dell'inchiostro, che
   dentro il riquadro dipinto sta a --luna-bordo da tutti e due i lati. La quota del rover
   e' quindi, per costruzione, una frazione dell'altezza della scritta misurata dalla sua
   cima: resta la stessa a qualunque larghezza e su qualunque dispositivo, perche' il
   carattere e' lo stesso ovunque (Selawik, vedi in testa). Prima non lo era, e sul
   telefono la strada, disegnata sulle lettere di Segoe UI, cadeva in quelle di un altro
   carattere: piu' in basso in orizzontale, fuori dalle lettere in verticale.

   Il @supports non e' pedanteria: senza background-clip il color: transparent farebbe
   SPARIRE le scritte invece di lasciarle bianche. */
@supports (background-clip: text) or (-webkit-background-clip: text) {
  header.section-header.hdr-luna > .mask > .container > div {
    background-image       : url("/img/local/gui/rover.svg"), url("/img/local/gui/luna.jpg");
    background-size        : calc(var(--luna-alt) * 1.6793) calc(var(--luna-alt) * .5), cover;
    background-position    : var(--luna-bordo) var(--luna-bordo), 50% 50%;
    background-repeat      : no-repeat, no-repeat;
    -webkit-background-clip: text;
    background-clip        : text;
    color                  : transparent;
  }
}

/* Dove il rover non deve esserci si toglie lo STRATO, non l'animazione: il moto e' dentro
   l'immagine e da qui non si ferma. Lo strato vuoto (none) resta al primo posto, perche'
   gli elenchi di misura e posizione si abbinano agli strati per indice, e con il solo
   suolo la Luna prenderebbe la misura della scena invece di "cover".
   Movimento ridotto: resta la superficie, il rover non c'e'. */
@media (prefers-reduced-motion: reduce) {
  header.section-header.hdr-luna > .mask > .container > div {
    background-image: none, url("/img/local/gui/luna.jpg");
  }
}

/* Chi chiede piu' contrasto vuole leggere le parole, non vedere i crateri: le scritte
   tornano bianche piene, e con lo sfondo se ne va anche il rover. */
@media (prefers-contrast: more) {
  header.section-header.hdr-luna > .mask > .container > div {
    background: none;
    color     : #fff;
  }
}

/* In stampa gli sfondi di solito non escono, e con loro sparirebbe il riempimento: le
   scritte tornano bianche sulla fotografia, che invece si stampa perche' e' un <img>. */
@media print {
  header.section-header.hdr-luna > .mask > .container > div {
    background: none;
    color     : #fff;
  }
}