/* tabelloni.css — il cartellone antinfortunistico, ricostruito.
 *
 * Il riferimento sono i due cartelloni portati da Alessandro l'1/09/2026:
 * cornice nera, fascia di testa a tinta piena, pannello a LED rossi su nero,
 * riga di etichette su bianco con i triangolini, blocco del messaggio a
 * tinta piena, riga di chiusura.
 *
 * Tre cose sole reggono tutto l'oggetto:
 *
 * 1. UNA MISURA SOLA. Dentro il cartellone 1em vale 1% della sua larghezza
 *    (font-size: 1cqw sul contenitore). Ogni valore qui sotto e' quindi una
 *    percentuale leggibile: la fascia di testa e' 8,2% della larghezza, il
 *    messaggio 5,4%. Si rimpicciolisce senza toccare niente, e i numeri si
 *    confrontano col riferimento.
 *
 * 2. I COLORI DEL CARTELLONE SONO FISSI. Dentro il riquadro non entra
 *    nessuna variabile della pagina: una notturna non lo tocca, come non
 *    toccherebbe una fotografia. L'unica cosa che cambia col fondo e' il
 *    filetto esterno, che stacca il nero della cornice dal nero della
 *    pagina. E' l'unico elemento della libreria che non prende i colori da
 *    fuori, ed e' voluto: e' un oggetto fotografato, non una superficie.
 *
 * 3. LE CIFRE NON SONO UN CARATTERE. Sono sette segmenti disegnati una volta
 *    sola in un <symbol>, e ogni cifra e' un <use> che accende i suoi
 *    segmenti passando sette variabili. Nessuna richiesta di rete, nessun
 *    carattere da caricare, nessuno script.
 *
 * Il rosso del LED #F2373F e' un decimo colore, fuori dai nove del sistema.
 * E' dichiarato: un LED rosso e' quel rosso, e il #A92B34 del sistema su
 * nero non si accende. Va ratificato o cassato.
 */

/* ---- le due misure ----
   La GEOMETRIA (cornice, pannello, cifre) va in cqw: e' sempre esattamente
   una percentuale della larghezza, cosi' le proporzioni del riferimento
   reggono a qualunque taglia. Il TESTO va in em su una base fermata fra 4,6
   e 11px: sotto i 340px di larghezza smetterebbe di essere leggibile. E'
   l'unico punto in cui l'oggetto si scosta dal cartellone vero. */
.cartellone { container-type: inline-size; margin: 0; }

.board {
  font-size: 6px;                       /* ripiego se cqw non c'e' */
  font-size: clamp(4.7px, 1cqw, 11px);  /* 1em = 1% della larghezza */
  font-family: var(--font-titoli, Questrial, "Century Gothic", system-ui, sans-serif);
  font-weight: 400;                     /* la regola del sito regge anche qui */
  line-height: 1;
  background: #0B0B0C;
  border: 1px solid rgba(255,255,255,.14);
  padding: 1.2cqw;         /* la cornice: geometria, quindi cqw e non em */
  --acceso: #F2373F;   /* il rosso del LED: 5,4:1 sul nero del pannello */
  --spento: transparent;
}
.board--rosso { --campo: #A92B34; }   /* --rosso del sito. Bianco sopra: 6,8:1 */
.board--blu   { --campo: #0A5396; }   /* --blu del sito.   Bianco sopra: 7,8:1 */

/* ---- fascia di testa ---- */
.board-testa {
  margin: 0;
  background: var(--campo);
  color: #FFFFFF;
  font-size: 8.2cqw;   /* le due scritte grandi seguono la larghezza, non la
                          base del testo: se no sul telefono si sfasciano */
  letter-spacing: .015em;
  text-align: center;
  padding: .26em .3em .3em;
}

/* ---- il pannello a LED ---- */
.board-led {
  background: #000000;
  margin: 1.2em 0;
  padding: 2.4cqw 2cqw;
  display: grid;
  
}
.gruppo { display: flex; justify-content: center; gap: .7cqw; }

/* La finestra di una cifra. Il nastro dentro e' alto dieci volte: scorrere
   del 10% vuol dire cambiare cifra. */
.d { display: block; width: 6.2cqw; aspect-ratio: 62 / 106; overflow: hidden; }
.d svg { display: block; width: 100%; height: auto; }
.d-nastro { display: block; transform: translateY(calc(var(--n, 0) * -10%)); }

/* I sette segmenti, spenti per difetto. Le dieci righe qui sotto sono tutta
   la logica delle cifre: nessuno script, nessun carattere. */
.g7 {
  --sa: var(--spento); --sb: var(--spento); --sc: var(--spento); --sd: var(--spento);
  --se: var(--spento); --sf: var(--spento); --sg: var(--spento);
}
.g7[data-n="0"] { --sa:var(--acceso);--sb:var(--acceso);--sc:var(--acceso);--sd:var(--acceso);--se:var(--acceso);--sf:var(--acceso) }
.g7[data-n="1"] { --sb:var(--acceso);--sc:var(--acceso) }
.g7[data-n="2"] { --sa:var(--acceso);--sb:var(--acceso);--sg:var(--acceso);--se:var(--acceso);--sd:var(--acceso) }
.g7[data-n="3"] { --sa:var(--acceso);--sb:var(--acceso);--sg:var(--acceso);--sc:var(--acceso);--sd:var(--acceso) }
.g7[data-n="4"] { --sf:var(--acceso);--sg:var(--acceso);--sb:var(--acceso);--sc:var(--acceso) }
.g7[data-n="5"] { --sa:var(--acceso);--sf:var(--acceso);--sg:var(--acceso);--sc:var(--acceso);--sd:var(--acceso) }
.g7[data-n="6"] { --sa:var(--acceso);--sf:var(--acceso);--sg:var(--acceso);--se:var(--acceso);--sc:var(--acceso);--sd:var(--acceso) }
.g7[data-n="7"] { --sa:var(--acceso);--sb:var(--acceso);--sc:var(--acceso) }
.g7[data-n="8"] { --sa:var(--acceso);--sb:var(--acceso);--sc:var(--acceso);--sd:var(--acceso);--se:var(--acceso);--sf:var(--acceso);--sg:var(--acceso) }
.g7[data-n="9"] { --sa:var(--acceso);--sb:var(--acceso);--sc:var(--acceso);--sd:var(--acceso);--sf:var(--acceso);--sg:var(--acceso) }

/* Il moto. steps() e non una curva: un LED non rotola, scatta. E' lo stesso
   meccanismo del rullo che c'e' gia' sul sito, cambiata la funzione di
   tempo. A moto ridotto le cifre restano ferme sul loro valore e il
   cartellone e' completo: non si perde niente. */
@media (prefers-reduced-motion: no-preference) {
  .d-nastro[data-passi="10"] { animation: corsa10 var(--t) steps(10) var(--r, 0s) infinite; }
  .d-nastro[data-passi="6"]  { animation: corsa6  var(--t) steps(6)  var(--r, 0s) infinite; }
  .d-nastro[data-passi="4"]  { animation: corsa4  var(--t) steps(4)  var(--r, 0s) infinite; }
}
/* ---- i due pannelli sovrapposti ----------------------------------------
   Sul cartellone rosso succede una cosa: dopo cinque secondi il conto dei
   giorni si azzera e l'orologio riparte. Non e' un'animazione delle cifre,
   e' un cambio di pannello: due pannelli interi nella stessa cella, quello
   "dopo" nascosto, e a --svolta si scambiano. Le cifre del pannello "dopo"
   hanno un ritardo positivo pari a --svolta, quindi cominciano a contare
   nel momento in cui compaiono, da zero.
   A moto spento lo scambio non avviene: resta il pannello di prima, che e'
   un cartellone completo e leggibile. */
.board-led > .pannello {
  grid-area: 1 / 1;
  display: grid; grid-template-columns: repeat(4, 1fr);
  align-items: center;
}
/* Lo scambio si fa con l'OPACITA', non con visibility. `visibility` ha una
 * regola sua: animando da visible a hidden resta visible per tutto
 * l'intervallo e cambia solo all'estremo, e i due pannelli finiscono per
 * sommarsi — 087 sopra 000 si legge 080. L'opacita' non ha eccezioni.
 * I due pannelli restano tutti e due nel flusso, sovrapposti nella stessa
 * cella: cosi' il cartellone non cambia altezza al momento dello scambio. */
.pannello.dopo { opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  .pannello.prima { animation: viaPannello .01s linear var(--svolta, 5s) forwards; }
  .pannello.dopo  { animation: quaPannello .01s linear var(--svolta, 5s) forwards; }
}
@keyframes viaPannello { to { opacity: 0; } }
@keyframes quaPannello { to { opacity: 1; } }

@keyframes corsa10 { from { transform: translateY(0); } to { transform: translateY(-100%); } }
@keyframes corsa6  { from { transform: translateY(0); } to { transform: translateY(-60%); } }
@keyframes corsa4  { from { transform: translateY(0); } to { transform: translateY(-40%); } }

/* ---- la parte bianca ---- */
.board-basso { background: #FFFFFF; padding: 1.6em 1.8em 1.8em; }

.board-etichette {
  margin: 0;
  display: grid; grid-template-columns: repeat(4, 1fr);
  font-size: 2.6em; letter-spacing: .12em; color: #231F20; text-align: center;
}
.board-etichette span::before {
  content: ""; display: block; margin: 0 auto .3em;
  width: 0; height: 0;
  border-left: .4em solid transparent; border-right: .4em solid transparent;
  border-bottom: .42em solid var(--campo);
}

.board-messaggio {
  margin: 1.5em 0 0;
  background: var(--campo); color: #FFFFFF;
  font-size: 8cqw; line-height: 1.16;
  padding: .5em .5em .56em;
  text-align: center; text-wrap: balance;
}
.board-piede {
  margin: 1.1em 0 0;
  color: var(--campo); font-size: 3em; letter-spacing: .1em; text-align: center;
}

/* I due cartelloni non si toccano mai: in mezzo passa il fondo della pagina.
   La regola del sito dice rosso e azzurro mai adiacenti, e qui vale a
   maggior ragione fra rosso e blu. */
.coppia { display: grid; gap: 1.6rem; }