/* ==========================================================================
   GIOVANNI ROMITO — TEMA "ISPEZIONE"
   ==========================================================================
   Il sito si lascia ispezionare: ogni capitolo mostra come e' costruito
   (scatole, margini, griglie, strati) e poi si dipinge davanti a chi guarda.
   Direzione completa e contratto fra i file: .workflow/DIREZIONE.md (fuori
   dalla cartella pubblicata).

   Come convive con il sito di prima:
     - I token hanno nomi nuovi (--c-*, --bm-*, --strato, --f-*, --t-*,
       --s-*, --r-*, --o-*, --d-*, --e-*, --z-*) e non toccano quelli di
       stile.css e progetti.css.
     - Ogni regola di base e' chiusa dentro .mondo: finche' nessun elemento
       porta quella classe, questo file non cambia un pixel. Una sezione
       rifatta mette .mondo sulla sua radice; a integrazione finita .mondo
       va sul <body> e stile.css si toglie.
     - Le due isole intoccabili (.vetrine e .collega-vetrina) sono escluse
       dalla base del mondo. Il blocco "Isole" ripete, con specificita'
       zero, le regole globali di stile.css di cui vivono.
   ========================================================================== */


/* ==========================================================================
   TOKEN
   ========================================================================== */

:root {
  /* ---------- Il foglio: chiaro, freddo, come la finestra del browser ----
     Contrasti misurati (WCAG 2.x, .workflow/scratch/contrasti.py):
       su fondo #EEF0F3      ink 15.76 · ink-2 8.78 · ink-3 5.77 · sel-testo 5.59
       su superficie #F8F9FA ink 17.07 · ink-2 9.51 · ink-3 6.25 · sel-testo 6.06
       su incavo #E1E4E8     ink 14.11 · ink-2 7.86 · ink-3 5.16 · sel-testo 5.01
     La selezione #1A73E8 come contorno: 3.95 sul fondo (oggetto grafico >= 3). */
  --c-fondo: #EEF0F3;
  --c-superficie: #F8F9FA;
  --c-incavo: #E1E4E8;
  --c-ink: #14171A;
  --c-ink-2: #3C434A;
  --c-ink-3: #565E66;
  --c-filo: rgb(20 23 26 / 0.12);
  --c-filo-forte: rgb(20 23 26 / 0.28);
  --c-sel: #1A73E8;
  --c-sel-testo: #0B57D0;
  --c-sel-su: #FFFFFF;               /* testo su riempimento di selezione: 4.51 (#1A73E8), 6.39 (#0B57D0) */
  --c-ombra-tinta: 30 40 56;
  --c-fuoco: var(--c-sel);

  /* ---------- Il box model: i quattro colori dell'ispettore ----------
     Sono quelli che ogni sviluppatore riconosce (margine, bordo, padding,
     contenuto). Sul foglio chiaro sono SUPERFICI, mai contorni da soli
     (sul fondo: margine 1.60, bordo 1.09, padding 1.76, contenuto 2.21).
     Testo sopra un riempimento pieno: sempre --c-ink #14171A
       margine 9.85 · bordo 14.50 · padding 8.94 · contenuto 7.12
     (ink-2 su contenuto 3.97: vietato). */
  --bm-margine: #F6B26B;
  --bm-bordo: #FFE599;
  --bm-padding: #93C47D;
  --bm-contenuto: #6FA8DC;
  /* Veli: le stesse tinte come le stende l'ispettore sopra la pagina */
  --bm-margine-velo: rgb(246 178 107 / 0.55);
  --bm-bordo-velo: rgb(255 229 153 / 0.6);
  --bm-padding-velo: rgb(147 196 125 / 0.5);
  --bm-contenuto-velo: rgb(111 168 220 / 0.45);
  --strato: var(--bm-contenuto);     /* colore di strato del capitolo */

  /* ---------- Carattere: Recursive, una famiglia sola ----------
     Assi: wght 300-1000, slnt 0..-15 (font-style: oblique), MONO 0-1
     (da proporzionale a monospazio), CASL 0-1 (da lineare a casual),
     CRSV 0-1 (corsive). MONO e' il passaggio fra disegnare e costruire;
     CASL e' il passaggio fra il mondo costruito e quello social. */
  --f: 'Recursive', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-mono: 'Recursive', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --mono: 0;
  --casl: 0;
  --crsv: 0.5;

  /* Scala fluida fra 390 e 1440 px */
  --t-etichetta: clamp(0.6875rem, 0.6643rem + 0.09524vw, 0.75rem);
  --t-1: clamp(0.875rem, 0.8518rem + 0.09524vw, 0.9375rem);
  --t-2: clamp(1.0625rem, 1.039rem + 0.09524vw, 1.125rem);
  --t-3: clamp(1.1875rem, 1.095rem + 0.381vw, 1.4375rem);
  --t-4: clamp(1.5rem, 1.221rem + 1.143vw, 2.25rem);
  --t-5: clamp(2.25rem, 1.479rem + 3.162vw, 4.25rem);
  --t-6: clamp(3.5rem, 2.786rem + 2.932vw, 6rem);

  --lh-display: 0.98;
  --lh-titolo: 1.04;
  --lh-stretto: 1.3;
  --lh-testo: 1.62;

  /* ---------- Spazio (base 4) ---------- */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 96px;
  --s-10: 128px;
  --s-11: 192px;
  --s-gutter: clamp(1.25rem, 0.4143rem + 3.429vw, 3.5rem);
  --s-sezione: clamp(6rem, 4.143rem + 7.619vw, 11rem);
  --gabbia: 1320px;
  --misura-testo: 62ch;

  /* ---------- Raggi ----------
     r-1 maniglie ed etichette · r-2 bottoni e campi · r-3 strati e
     pannelli · r-4 strati grandi · tondo solo per maniglie rotonde */
  --r-1: 2px;
  --r-2: 6px;
  --r-3: 12px;
  --r-4: 20px;
  --r-tondo: 999px;

  /* ---------- Ombre: una luce dall'alto, lo spessore dice la quota ---------- */
  --o-strato:
    0 1px 1px rgb(var(--c-ombra-tinta) / 0.08),
    0 12px 28px -14px rgb(var(--c-ombra-tinta) / 0.32);
  --o-strato-alto:
    0 2px 4px rgb(var(--c-ombra-tinta) / 0.08),
    0 34px 60px -24px rgb(var(--c-ombra-tinta) / 0.42);
  --o-premuto:
    0 0 0 rgb(var(--c-ombra-tinta) / 0),
    0 2px 6px -2px rgb(var(--c-ombra-tinta) / 0.3);

  /* ---------- Tempo: passi da 125 ms ----------
     Le durate sono multipli del passo; le partenze legate a un evento
     cadono sul passo successivo (Moto.quantizza). */
  --d-125: 125ms;
  --d-250: 250ms;
  --d-500: 500ms;
  --d-1000: 1000ms;
  --d-2000: 2000ms;
  --e-uscita: cubic-bezier(0.16, 1, 0.3, 1);       /* esponenziale: la curva di base */
  --e-preciso: cubic-bezier(0.22, 1, 0.36, 1);     /* quintica: selezioni, pressioni */
  --e-scambio: cubic-bezier(0.65, 0, 0.35, 1);     /* entrata-uscita: cambi di stato */
  --e-arrivo: cubic-bezier(0.5, 0, 0.1, 1);        /* parte decisa, si posa piano: viaggi */
  /* Moltiplicatore dei movimenti legati allo scorrimento: 0 con movimento
     ridotto. translateY(calc(var(--p) * -40px * var(--moto))) */
  --moto: 1;

  /* ---------- Strati di impilamento ---------- */
  --z-scena: 0;
  --z-contenuto: 2;
  --z-appiccicato: 10;
  --z-nav: 40;
  --z-testata: 50;
  --z-sopra: 70;
}

/* Tema scuro: la stessa finestra con l'ispettore al buio.
   su fondo #1B1D20: ink 14.01 · ink-2 9.34 · ink-3 6.40 · sel 8.02
   I colori del box model qui reggono anche come contorni (6.68-13.61). */
@media (prefers-color-scheme: dark) {
  :root {
    --c-fondo: #1B1D20;
    --c-superficie: #24272B;
    --c-incavo: #131416;
    --c-ink: #E8EAED;
    --c-ink-2: #BDC1C6;
    --c-ink-3: #9AA0A6;
    --c-filo: rgb(232 234 237 / 0.12);
    --c-filo-forte: rgb(232 234 237 / 0.28);
    --c-sel: #8AB4F8;
    --c-sel-testo: #8AB4F8;
    --c-sel-su: #14171A;             /* testo scuro su #8AB4F8: 8.75 */
    --c-ombra-tinta: 0 0 0;
    --bm-margine-velo: rgb(246 178 107 / 0.36);
    --bm-bordo-velo: rgb(255 229 153 / 0.32);
    --bm-padding-velo: rgb(147 196 125 / 0.34);
    --bm-contenuto-velo: rgb(111 168 220 / 0.34);
  }
}

@media (prefers-reduced-motion: reduce) {
  :root { --moto: 0; }
}

/* Il colore di strato di ogni capitolo (nessun effetto finche' una regola
   non usa var(--strato)) */
#chi-sono   { --strato: var(--bm-contenuto); }
#progetti   { --strato: var(--bm-padding); }
#competenze { --strato: var(--bm-margine); }
#dj         { --strato: var(--bm-bordo); }
#squadra    { --strato: var(--bm-bordo); }
#contatti   { --strato: var(--c-sel); }

/* ==========================================================================
   ISOLE: le card dei progetti e le citazioni dei colleghi
   ==========================================================================
   Copia a specificita' zero delle regole globali di stile.css da cui le
   isole ereditano. Oggi perdono contro stile.css (stessi valori, nessun
   effetto); quando stile.css verra' tolto, prenderanno il suo posto.
   Le regole proprie delle citazioni (.collega-vetrina, .vetrina-kevin...)
   NON stanno qui: le sposta il lavoratore di Squadra, identiche. */

:where(.vetrine, .collega-vetrina) {
  --font-principale: 'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'Roboto Mono', ui-monospace, monospace;
  --testo-principale: #E4EBFF;
  --testo-secondario: #9AA8CE;
  --testo-soffuso: #7C88B6;
  --incavo: rgba(0, 0, 0, 0.26);
  --ombra-card: 0 18px 44px rgba(0, 0, 0, 0.42);
  --r-xs: 12px; --r-sm: 18px; --r-md: 26px; --r-pill: 9999px;
  /* Usati dalle regole delle citazioni (stile.css righe 599-749), che il
     lavoratore di Squadra sposta identiche nel suo foglio */
  --filo: rgba(191, 210, 255, 0.16);
  --u: 8px; --u2: 16px; --u3: 24px; --u4: 32px; --u6: 48px;
  font-family: 'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 17px;
  line-height: 1.65;
  color: #E4EBFF;
  text-align: start;
  text-transform: none;
  letter-spacing: normal;
  -webkit-font-smoothing: antialiased;
}
/* Come il body di stile.css: 16px sotto i 720px di larghezza */
@media (max-width: 720px) {
  :where(.vetrine, .collega-vetrina) { font-size: 16px; }
}
:where(.vetrine, .collega-vetrina),
:where(.vetrine, .collega-vetrina) :where(*, *::before, *::after) { box-sizing: border-box; margin: 0; padding: 0; }
:where(.vetrine, .collega-vetrina) :where(a) { color: inherit; text-decoration: none; }
:where(.vetrine, .collega-vetrina) :where(ul) { list-style: none; }
:where(.vetrine, .collega-vetrina) :where(img, svg) { display: block; }
:where(.vetrine, .collega-vetrina) :where(strong, b) { font-weight: 600; color: #FFFFFF; }
:where(.vetrine, .collega-vetrina) :where(p) { max-width: 68ch; }
:where(.vetrine, .collega-vetrina) :where(h1, h2, h3) {
  font-family: 'Big Shoulders Display', 'Arial Narrow', sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  line-height: 1;
}
:where(.vetrine, .collega-vetrina) ::selection { background: #FF6A3D; color: #0B0D1A; }

/* La rivelazione di script.js (.rivela -> .rivela-armata -> .dentro): le
   card dei progetti la portano nel loro markup, quindi deve sopravvivere a
   stile.css. Stessi valori di stile.css. */
:where(.rivela-armata) { opacity: 0; transform: translateY(20px); }
:where(.rivela-armata.dentro) {
  opacity: 1;
  transform: none;
  transition: opacity 700ms cubic-bezier(0.16, 1, 0.3, 1), transform 700ms cubic-bezier(0.16, 1, 0.3, 1);
}
.ferma-anim *, .ferma-anim { animation-play-state: paused !important; }

/* ==========================================================================
   BASE DEL MONDO (solo dentro .mondo, isole escluse)
   ========================================================================== */

.mondo {
  font-family: var(--f);
  font-size: var(--t-2);
  font-weight: 400;
  line-height: var(--lh-testo);
  letter-spacing: 0;
  text-transform: none;
  color: var(--c-ink);
  font-kerning: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: transparent;
  caret-color: var(--c-sel);
}

/* Gli assi di Recursive seguono le variabili: un elemento cambia --mono o
   --casl e basta (font-variation-settings da solo non si eredita per asse). */
.mondo,
.mondo :where(*):not(:where(.vetrine, .collega-vetrina) *, :where(.vetrine, .collega-vetrina)) {
  font-variation-settings: "MONO" var(--mono), "CASL" var(--casl), "CRSV" var(--crsv);
}

.mondo.t-fondo,
.mondo .t-fondo { background-color: var(--c-fondo); }

.mondo :where(*, *::before, *::after):not(:where(.vetrine, .collega-vetrina) *, :where(.vetrine, .collega-vetrina)) {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.mondo :where(h1, h2, h3, h4):not(:where(.vetrine, .collega-vetrina) *) {
  font-family: var(--f);
  font-weight: 820;
  line-height: var(--lh-titolo);
  letter-spacing: -0.03em;
  text-transform: none;
  text-wrap: balance;
  color: var(--c-ink);
}

/* L'enfasi e' la voce casual della stessa famiglia: CASL 1, inclinata.
   E' il mondo social dentro quello costruito, non un font estraneo. */
.mondo :where(h1, h2, h3, h4) :where(em):not(:where(.vetrine, .collega-vetrina) *) {
  --casl: 1;
  font-style: oblique 10deg;
  font-weight: 640;
  letter-spacing: -0.02em;
  padding-inline-end: 0.04em;
}

.mondo :where(p, li, dd):not(:where(.vetrine, .collega-vetrina) *) {
  max-width: var(--misura-testo);
  text-wrap: pretty;
}

.mondo :where(strong, b):not(:where(.vetrine, .collega-vetrina) *) {
  font-weight: 680;
  color: inherit;
}

.mondo :where(a):not(:where(.vetrine, .collega-vetrina) *) {
  color: inherit;
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
  text-decoration-color: var(--c-filo-forte);
}
.mondo :where(a[class]):not(:where(.vetrine, .collega-vetrina) *) { text-decoration: none; }

.mondo :where(ul, ol):not(:where(.vetrine, .collega-vetrina) *) { list-style: none; }
.mondo :where(img, svg, canvas, video):not(:where(.vetrine, .collega-vetrina) *) { display: block; max-width: 100%; }
.mondo :where(button):not(:where(.vetrine, .collega-vetrina) *) {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
  touch-action: manipulation;
}

.mondo :not(:where(.vetrine, .collega-vetrina) *)::selection { background: var(--c-sel); color: var(--c-sel-su); }

/* Fuoco: l'anello della selezione, sempre visibile */
.mondo :focus-visible {
  outline: 2px solid var(--c-fuoco);
  outline-offset: 3px;
  border-radius: var(--r-1);
}
.mondo :focus:not(:focus-visible) { outline: none; }

/* Le icone a filo del sito (<use href="#i-...">) prendono lo spessore del mondo */
.mondo :where(svg[viewBox="0 0 24 24"]):not(:where(.vetrine, .collega-vetrina) *) {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ==========================================================================
   UTILITA' DI IMPIANTO
   ========================================================================== */

.mondo .t-gabbia,
.mondo.t-gabbia {
  width: min(100% - 2 * var(--s-gutter), var(--gabbia));
  margin-inline: auto;
}

/* Griglia a 4 colonne sul telefono, 8 da 720, 12 da 1080 */
.mondo .t-griglia {
  display: grid;
  grid-template-columns: repeat(var(--colonne, 4), minmax(0, 1fr));
  column-gap: var(--s-gutter);
  row-gap: var(--s-6);
}
@media (min-width: 720px)  { .mondo .t-griglia, .mondo .t-griglia-vista { --colonne: 8; } }
@media (min-width: 1080px) { .mondo .t-griglia, .mondo .t-griglia-vista { --colonne: 12; } }

/* La griglia resa visibile, come l'ispettore la disegna: colonne velate.
   Si accende con --vista: 1 (di base spenta). */
.mondo .t-griglia-vista { position: relative; }
.mondo .t-griglia-vista > * { position: relative; z-index: 1; }
.mondo .t-griglia-vista::before {
  --w: calc((100% - (var(--colonne, 4) - 1) * var(--s-gutter)) / var(--colonne, 4));
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  /* una colonna e il suo gap per tessera: le colonne cadono sulle tracce vere */
  background-image: linear-gradient(90deg, var(--bm-contenuto-velo) 0 calc(100% - var(--s-gutter)), transparent 0);
  background-size: calc(var(--w) + var(--s-gutter)) 100%;
  background-repeat: repeat-x;
  opacity: calc(var(--vista, 0) * 0.5);
  transition: opacity var(--d-500) var(--e-uscita);
}

/* Un capitolo: piu' aria sopra il titolo che sotto */
.mondo.t-sezione,
.mondo .t-sezione {
  position: relative;
  padding-block: var(--s-sezione) calc(var(--s-sezione) * 0.8);
  scroll-margin-top: var(--s-6);
}

/* Il palco: appiccicato e alto uno schermo, per le scene dei capitoli lunghi */
.mondo .t-palco {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  overflow: clip;
}

.mondo .t-pila > * + * { margin-block-start: var(--pila, var(--s-4)); }

.t-sr {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ==========================================================================
   UTILITA' TIPOGRAFICHE
   ========================================================================== */

.mondo .t-display {
  font-size: var(--t-6);
  font-weight: 880;
  line-height: 0.92;
  letter-spacing: -0.045em;
}
.mondo .t-titolo {
  font-size: var(--t-5);
  font-weight: 820;
  line-height: var(--lh-display);
  letter-spacing: -0.035em;
}
.mondo .t-sottotitolo {
  font-size: var(--t-4);
  font-weight: 760;
  line-height: 1.08;
  letter-spacing: -0.02em;
}
.mondo .t-lead { font-size: var(--t-3); line-height: 1.45; color: var(--c-ink-2); }
.mondo .t-piccolo { font-size: var(--t-1); line-height: 1.5; }
.mondo .t-quieto { color: var(--c-ink-2); }

/* Etichetta di un dato (dt, nome di una proprieta'): monospazio piccolo,
   in minuscolo come lo scrive l'ispettore. Mai sopra un titolo. */
.mondo .t-etichetta {
  --mono: 1;
  font-size: var(--t-etichetta);
  font-weight: 500;
  letter-spacing: 0.01em;
  line-height: 1.3;
  color: var(--c-ink-3);
}

/* Misura: numeri, percentuali, codici. Il monospazio solo per dati veri. */
.mondo .t-misura {
  --mono: 1;
  font-variant-numeric: tabular-nums slashed-zero;
  letter-spacing: 0;
}

/* ==========================================================================
   COMPONENTI DEL MONDO
   ========================================================================== */

/* Superficie in piano */
.mondo .t-pannello {
  background-color: var(--c-superficie);
  border-radius: var(--r-3);
  box-shadow: inset 0 0 0 1px var(--c-filo);
}

/* Strato composto: un livello sopra il foglio, con la sua quota.
   Le isole (card, citazioni) stanno dentro uno strato. In una scena 3D
   la quota e' --quota (translateZ). */
.mondo .t-strato {
  position: relative;
  border-radius: var(--r-3);
  background-color: var(--c-superficie);
  box-shadow: var(--o-strato);
  transform: translateZ(calc(var(--quota, 0) * 1px));
  transition: box-shadow var(--d-500) var(--e-uscita), transform var(--d-500) var(--e-uscita);
}
.mondo .t-strato.alto { box-shadow: var(--o-strato-alto); }

/* Selezione: il riquadro con le quattro maniglie degli strumenti di
   progettazione. Si accende con .selezionato o con --sel: 1. */
.mondo .t-selezione { position: relative; }
.mondo .t-selezione::after {
  content: '';
  position: absolute;
  inset: calc(var(--sel-scarto, 6px) * -1);
  pointer-events: none;
  border: 1.5px solid var(--c-sel);
  border-radius: var(--r-1);
  background:
    linear-gradient(var(--c-superficie) 0 0) 2px 2px / 3px 3px no-repeat,
    linear-gradient(var(--c-superficie) 0 0) right 2px top 2px / 3px 3px no-repeat,
    linear-gradient(var(--c-superficie) 0 0) left 2px bottom 2px / 3px 3px no-repeat,
    linear-gradient(var(--c-superficie) 0 0) right 2px bottom 2px / 3px 3px no-repeat,
    linear-gradient(var(--c-sel) 0 0) 0 0 / 7px 7px no-repeat,
    linear-gradient(var(--c-sel) 0 0) right 0 top 0 / 7px 7px no-repeat,
    linear-gradient(var(--c-sel) 0 0) left 0 bottom 0 / 7px 7px no-repeat,
    linear-gradient(var(--c-sel) 0 0) right 0 bottom 0 / 7px 7px no-repeat;
  opacity: var(--sel, 0);
  transform: scale(calc(0.985 + var(--sel, 0) * 0.015));
  transition: opacity var(--d-250) var(--e-preciso), transform var(--d-250) var(--e-preciso);
}
.mondo .t-selezione.selezionato { --sel: 1; }

/* Ispezione del box model di un elemento: margine fuori, padding dentro,
   contenuto velato. --bm-m e --bm-p dicono quanto sono larghe le fasce.
   Si accende con .ispezionato o con --ispeziona: 1. */
.mondo .t-ispeziona {
  outline: var(--bm-m, 12px) solid rgb(246 178 107 / calc(var(--ispeziona, 0) * 0.55));
  outline-offset: 0;
  box-shadow: inset 0 0 0 var(--bm-p, 12px) rgb(147 196 125 / calc(var(--ispeziona, 0) * 0.5));
  background-color: rgb(111 168 220 / calc(var(--ispeziona, 0) * 0.4));
  transition: outline-color var(--d-500) var(--e-uscita), box-shadow var(--d-500) var(--e-uscita), background-color var(--d-500) var(--e-uscita);
}
.mondo .t-ispeziona.ispezionato { --ispeziona: 1; }

/* Bottone: pieno (primario) o a filo (.secondario). Al passaggio l'etichetta
   passa al monospazio: il bottone mostra il suo codice. */
.mondo .t-bottone {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  min-block-size: 48px;
  padding: var(--s-3) var(--s-5);
  border-radius: var(--r-2);
  background-color: var(--c-ink);
  color: var(--c-fondo);
  font-size: var(--t-1);
  font-weight: 640;
  letter-spacing: 0;
  line-height: 1.2;
  text-decoration: none;
  box-shadow: var(--o-strato);
  transition:
    font-variation-settings var(--d-250) var(--e-preciso),
    background-color var(--d-250) var(--e-uscita),
    color var(--d-250) var(--e-uscita),
    transform var(--d-125) var(--e-preciso),
    box-shadow var(--d-125) var(--e-preciso);
  touch-action: manipulation;
}
.mondo .t-bottone svg { inline-size: 16px; block-size: 16px; flex: none; }
.mondo .t-bottone.secondario {
  background-color: transparent;
  color: var(--c-ink);
  box-shadow: inset 0 0 0 1.5px var(--c-filo-forte);
}
@media (hover: hover) {
  .mondo .t-bottone:hover { --mono: 1; }
  .mondo .t-bottone.secondario:hover { box-shadow: inset 0 0 0 1.5px var(--c-sel); color: var(--c-sel-testo); }
}
.mondo .t-bottone:active,
.mondo .t-bottone.premuto { transform: translateY(1px); box-shadow: var(--o-premuto); transition-duration: 40ms; }

/* Filo: separatore sottile */
.mondo .t-filo { block-size: 1px; border: 0; background: var(--c-filo); }

/* ==========================================================================
   MOVIMENTO
   ==========================================================================
   Gli stati di partenza si armano solo con html.mo-pronto (lo mette
   moto.js, e non con movimento ridotto): senza JavaScript tutto resta
   visibile. moto.js aggiunge .e-dentro sul passo successivo (125 ms).
   Cascata: --i (indice) per --d-125. */

.mo-pronto .mondo [data-rivela] {
  transition-property: opacity, transform, clip-path, filter;
  transition-duration: var(--d-1000);
  transition-timing-function: var(--e-uscita);
  transition-delay: calc(var(--i, 0) * var(--d-125));
}
.mo-pronto .mondo [data-rivela]:not(.e-dentro) { opacity: 0; transform: translateY(24px); }
.mo-pronto .mondo [data-rivela="maschera"]:not(.e-dentro) { opacity: 1; transform: none; clip-path: inset(0 0 100% 0); }
.mo-pronto .mondo [data-rivela="maschera"].e-dentro { clip-path: inset(0 0 0 0); }
.mo-pronto .mondo [data-rivela="fader"]:not(.e-dentro) { opacity: 1; transform: scaleX(0); transform-origin: left center; }
.mo-pronto .mondo [data-rivela="fuoco"]:not(.e-dentro) { opacity: 0; transform: none; filter: blur(10px); }

/* Costruisci: prima la scatola (layout: contenuto velato, padding e
   margine come li segna l'ispettore), un passo dopo la pittura. */
.mo-pronto .mondo [data-rivela="costruisci"] {
  transition: background-color var(--d-500) var(--e-uscita), box-shadow var(--d-500) var(--e-uscita), outline-color var(--d-500) var(--e-uscita);
  transition-delay: calc(var(--i, 0) * var(--d-125) + var(--d-250));
  outline: var(--bm-m, 8px) solid transparent;
  outline-offset: 0;
}
.mo-pronto .mondo [data-rivela="costruisci"] > * {
  transition: opacity var(--d-500) var(--e-uscita), transform var(--d-500) var(--e-uscita);
  transition-delay: calc(var(--i, 0) * var(--d-125) + var(--d-250));
}
.mo-pronto .mondo [data-rivela="costruisci"]:not(.e-dentro) {
  opacity: 1;
  transform: none;
  background-color: var(--bm-contenuto-velo);
  box-shadow: inset 0 0 0 var(--bm-p, 8px) var(--bm-padding-velo);
  outline-color: var(--bm-margine-velo);
}
.mo-pronto .mondo [data-rivela="costruisci"]:not(.e-dentro) > * { opacity: 0; transform: translateY(6px); }

/* Lampo di pittura: quando un'area viene ridipinta l'ispettore la
   incornicia di verde per un istante. */
.mo-pronto .mondo [data-rivela="lampo"] { opacity: 1; transform: none; }
.mo-pronto .mondo [data-rivela="lampo"].e-dentro { animation: t-lampo var(--d-500) var(--e-uscita) calc(var(--i, 0) * var(--d-125)) 1 both; }
@keyframes t-lampo {
  0%   { box-shadow: inset 0 0 0 2px var(--bm-padding), 0 0 0 0 transparent; }
  100% { box-shadow: inset 0 0 0 2px transparent, 0 0 0 0 transparent; }
}

/* Parole divise da Moto.dividi: ogni parola sale dalla sua riga */
.mondo .mo-parola { display: inline-block; white-space: pre; }
.mo-pronto .mondo [data-rivela="parole"] { opacity: 1; transform: none; transition: none; }
.mo-pronto .mondo [data-rivela="parole"] .mo-parola {
  transition: transform var(--d-1000) var(--e-uscita), opacity var(--d-1000) var(--e-uscita);
  transition-delay: calc(var(--i, 0) * 32ms);
}
.mo-pronto .mondo [data-rivela="parole"]:not(.e-dentro) .mo-parola { opacity: 0; transform: translateY(0.6em); }

/* Scena WebGL con ripiego: il ripiego (disegno CSS fermo) si vede sempre,
   la tela sale sopra solo quando webgl.js ha disegnato il primo fotogramma. */
.mondo .t-scena { position: relative; isolation: isolate; }
.mondo .t-scena > canvas.tela {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  z-index: 1;
  opacity: 0;
  transition: opacity var(--d-500) linear;
  pointer-events: none;
}
.mondo .t-scena.tela-accesa > canvas.tela { opacity: 1; }
.mondo .t-scena > .t-ripiego { position: absolute; inset: 0; z-index: 0; transition: opacity var(--d-500) linear; }
.mondo .t-scena.tela-accesa > .t-ripiego { opacity: 0; }

/* ==========================================================================
   MENO CARICO, MENO MOVIMENTO
   ========================================================================== */

/* Macchina lenta (verdetto di prestazioni.js): niente tela, cascate senza
   ritardo, niente sfocature. */
body.leggero .mondo .t-scena > canvas.tela,
html[data-prestazioni="ridotte"] .mondo .t-scena > canvas.tela { display: none; }
body.leggero .mondo .t-scena > .t-ripiego,
html[data-prestazioni="ridotte"] .mondo .t-scena > .t-ripiego { opacity: 1; }
body.leggero .mo-pronto .mondo [data-rivela],
html[data-prestazioni="ridotte"].mo-pronto .mondo [data-rivela] { transition-delay: 0ms; filter: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  :where(.rivela-armata) { opacity: 1; transform: none; }
  .mondo [data-rivela], .mondo .mo-parola { opacity: 1 !important; transform: none !important; clip-path: none !important; filter: none !important; }
}

/* ==========================================================================
   A INTEGRAZIONE FINITA (body.mondo): le superfici del browser
   ========================================================================== */

html:has(body.mondo) {
  background: var(--c-fondo);
  color-scheme: light dark;
  scrollbar-color: var(--c-ink-3) var(--c-incavo);
  scrollbar-width: thin;
  scroll-behavior: smooth;
  overflow-x: clip;
}
@media (prefers-reduced-motion: reduce) {
  html:has(body.mondo) { scroll-behavior: auto; }
}
body.mondo { margin: 0; min-block-size: 100vh; overflow-x: clip; }