/* LE PROVE DEL CARICAMENTO — esperienze da confrontare (Francesco, 19/10/2026: «uno, appena arriva sul sito, già
   si stupisce per come è fatto il caricamento»; poi «fai dei test»; poi «tessere è quello che ci può stare di più, ma la
   barra deve essere centrale, bianca, e dire una roba tipo rendering… pensa anche ad altri concept»).
   Solo sulla home e solo con ?carica=…: senza, il caricamento approvato (src/carica.css) resta identico.
   tessere  · la foto dell'hero si compone a blocchi, sempre più fini, quanto la pagina è pronta davvero
   grana    · la foto si sviluppa sulla carta: prima l'inchiostro, nei punti scuri, poi il colore
   render   · la scena 3D della foto; il cursore preme «Render» e la foto vera esce a riquadri, come in un programma di render
   stampa   · la foto si stampa in offset: quattro lastre a retino, fuori registro, poi a registro, poi il rifilo
   progetto · l'hero si progetta davanti a chi guarda, come in Figma: griglia, riquadri, misure, il cursore
   sviluppo · il codice vero della home si scrive e riempie lo schermo; a 100 una linea scende e scopre la pagina
   Il disegno su tela lo fa src/carica-prove.js (tessere, grana, render), i riquadri src/carica-progetto.js, il codice src/carica-sviluppo.js.
   ARMATURA data-carica lo mette src/carica.js solo se il movimento è ammesso; se la prova non parte, il JS lo toglie
   e torna il caricamento di serie */

/* la tela: sopra la foto, dentro .hero__media (così si muove con lei) */
.prove-tela{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none;animation:prove-appare .5s linear backwards}
html[data-carica=grana] .prove-tela{image-rendering:pixelated}
.prove-tela.prove-tela--via{opacity:0;transition:opacity .25s linear}
@keyframes prove-appare{from{opacity:0}}

/* ============ in tutte le prove il foglio nero non c'è: il caricamento è dentro l'hero ============ */
html[data-carica] .carica__meta{display:none}

/* tessere · progetto — la linea resta al centro, come quella di serie, ma tutta in crema (pieno compreso),
   con un'ombra appena per leggerla sopra la foto arancio */
html:is([data-carica=tessere],[data-carica=progetto]) .carica__linea{background:rgba(245,244,237,.3);box-shadow:0 0 12px rgba(53,30,28,.25)}
html:is([data-carica=tessere],[data-carica=progetto]) .carica__pieno,
html:is([data-carica=tessere],[data-carica=progetto]) .carica--piena .carica__linea{background:var(--crema)}
html:is([data-carica=tessere],[data-carica=progetto]) .carica__righe{color:rgba(245,244,237,.86);text-shadow:0 1px 10px rgba(53,30,28,.35)}
/* render · niente linea e niente scritte di serie: il caricamento sta DENTRO il tasto «Render» (Francesco, 19/10/2026:
   «c'è la barra del caricamento in fondo che si estende, ma non ha senso») · il tasto al centro, mono come «Presenta»,
   crema; il cursore «Francesco» ci passa sopra (arancio) e lo preme (src/carica-prove.js, CLIC) · da lì il pieno arancio
   sale da sinistra con --q e il numero conta i riquadri fatti · a 100 il tasto si richiude in una riga e se ne va */
html[data-carica=render] .carica__linea,html[data-carica=render] .carica__righe{display:none}
html[data-carica=render].in-carica .hero{background:#383838}   /* il grigio della scena 3D, dal primo disegno: ⛔ un lampo di nero prima che arrivi */
.rn-piano{position:fixed;inset:0;z-index:2;pointer-events:none}
.rn-tasto{position:absolute;left:50%;top:50%;display:flex;align-items:center;gap:8px;padding:10px 15px 10px 13px;border-radius:5px;overflow:hidden;
  font-family:var(--mono);font-size:12px;font-weight:500;line-height:1;letter-spacing:.03em;text-transform:uppercase;white-space:nowrap;
  background:var(--crema);color:var(--nero);transform:translate(-50%,-50%);opacity:0;clip-path:inset(calc(50% - 1px) 0 round 5px);
  box-shadow:0 6px 24px rgba(53,30,28,.28);transition:background-color .2s linear}
.rn-tasto::before{content:"";position:absolute;inset:0;background:var(--arancio);transform:scaleX(var(--q,0));transform-origin:0 50%}
.rn-tasto>*{position:relative}
.rn-tasto i{width:0;height:0;border-style:solid;border-width:5px 0 5px 8px;border-color:transparent transparent transparent currentColor}
.rn-tasto b{font-weight:inherit}
.rn-tasto em{display:none;font-style:normal;font-variant-numeric:tabular-nums;opacity:.7}
.rn-tasto.rn--appare{opacity:1;clip-path:inset(0 round 5px);transition:clip-path .34s cubic-bezier(.16,1,.3,1),background-color .2s linear}
.rn-tasto.rn--sopra{background:var(--arancio)}
.rn-tasto.rn--premuto{background:#E8502A}
.rn-tasto.rn--carica i{display:none}
.rn-tasto.rn--carica em{display:inline}
.rn-tasto.rn--chiude{clip-path:inset(calc(50% - 1px) 0 round 5px);opacity:0;transition:clip-path .26s cubic-bezier(.65,0,.35,1),opacity .1s linear .2s}
.rn-cursore{opacity:0}
.rn-cursore.rn--entra{opacity:1;transition:transform 420ms cubic-bezier(.65,0,.35,1),opacity .15s linear}
.rn-cursore.rn--esce{opacity:0;transition:transform .4s cubic-bezier(.16,1,.3,1),opacity .4s linear}

/* grana — la linea e il numero in basso sul margine, in nero (sulla carta crema si leggono) */
html[data-carica=grana].in-carica .carica{--l:calc(100vw - 2 * var(--gronda));color:var(--nero)}
html[data-carica=grana] .carica__linea{top:auto;bottom:var(--gronda);margin-top:0;background:rgba(53,30,28,.2)}
html[data-carica=grana] .carica__righe{bottom:calc(var(--gronda) + 14px);color:rgba(53,30,28,.72)}
html[data-carica=grana] .carica__n{color:var(--nero)}
html[data-carica=grana] .carica__pieno,html[data-carica=grana] .carica--piena .carica__linea{background:var(--nero)}
html[data-carica=grana].in-carica-esce .carica__linea{opacity:0;transition:opacity .2s linear}
/* sotto i 640 il taglio della foto mette in basso la parte scura (il corpo in ombra): lì la linea e il numero vanno in crema */
@media (max-width:40em){
  html[data-carica=grana].in-carica .carica{color:var(--crema)}
  html[data-carica=grana] .carica__linea{background:rgba(245,244,237,.28)}
  html[data-carica=grana] .carica__righe{color:rgba(245,244,237,.78)}
  html[data-carica=grana] .carica__n{color:var(--crema)}
  html[data-carica=grana] .carica__pieno,html[data-carica=grana] .carica--piena .carica__linea{background:var(--crema)}
}
/* stampa — la linea al centro in nero, sulla carta crema · sul retino scuro si perdeva (Francesco, 19/10/2026: «si legge male
   la barra quando arriva a questo stadio»): la linea sta in una fascia crema di 8 px e le due scritte su due tasselli crema,
   come in Sviluppo · ⛔ un alone, che sul giallo e sul magenta non stacca niente */
html[data-carica=stampa] .carica__linea{height:8px;margin-top:-4px;
  background:linear-gradient(rgba(53,30,28,.2),rgba(53,30,28,.2)) 0 50%/100% 2px no-repeat,rgba(245,244,237,.94)}
html[data-carica=stampa] .carica__pieno{top:3px;bottom:3px;background:var(--nero)}
html[data-carica=stampa] .carica--piena .carica__linea{background:linear-gradient(var(--nero),var(--nero)) 0 50%/100% 2px no-repeat,rgba(245,244,237,.94)}
html[data-carica=stampa] .carica__righe{color:var(--nero);bottom:calc(50% + 12px);align-items:center}
html[data-carica=stampa] .carica__righe > span{background:rgba(245,244,237,.94);padding:4px 8px 3px}
html[data-carica=stampa] .carica__n{color:var(--nero)}   /* il numero di serie è crema: sulla carta spariva */
html[data-carica=stampa].in-carica .hero{background:var(--crema)}
/* a 100 la linea si stringe fino al tratto della crocetta di registro (34 px), che la tela disegna nello stesso punto e chiude */
html[data-carica=stampa] .carica--piena .carica__linea{clip-path:inset(0 calc(50% - 26px));opacity:0;transition:clip-path .22s cubic-bezier(.65,0,.35,1),opacity .08s linear .2s}

/* grana parte da un foglio di carta: sotto la tela l'hero è crema, ⛔ nero (niente lampo scuro prima del primo disegno) */
html[data-carica=grana].in-carica .hero{background:var(--crema)}

/* mentre carica, dell'hero si vede solo la prova: la foto vera, la figura, il velo, le scritte e la testata aspettano */
html[data-carica].in-carica:not(.in-carica-esce) :is(.hero__media img,.hero__figura,.hero__velo,.hero__testo,.hero__frase,.hero__etichette,.barra){visibility:hidden}
/* all'uscita la testata scende dall'alto, velo e figura arrivano in dissolvenza (la foto sotto è già quella vera) */
html[data-carica].in-carica-esce .barra{animation:prove-barra .8s cubic-bezier(.16,1,.3,1) .15s both}
html[data-carica].in-carica-esce :is(.hero__velo,.hero__figura,.hero__testo,.hero__frase){animation:prove-appare .45s linear both}
@keyframes prove-barra{from{transform:translateY(-100%)}}
/* progetto: la testata scende quando il taglio ha già scoperto la cima, ⛔ sopra il tavolo nero */
html[data-carica=progetto].in-carica-esce .barra{animation-delay:.4s}

/* ============ progetto — il tavolo di Figma sopra l'hero (i pezzi li costruisce src/carica-progetto.js) ============ */
.pg{position:absolute;inset:0;z-index:20;background:var(--nero);pointer-events:none;overflow:hidden;color:var(--crema)}
/* l'uscita: il tavolo si taglia sulla linea e si apre in su e in giù (il gesto di casa, src/carica.css), ⛔ sfuma:
   la dissolvenza del nero sull'arancio passava per un marrone sporco. Ogni riquadro sparisce dove passa il taglio e
   sotto c'è il pezzo vero, nello stesso posto. Senza @property il taglio si apre di colpo: niente di rotto */
@property --taglio{syntax:'<percentage>';inherits:false;initial-value:0%}
.pg{--taglio:0%;-webkit-mask-image:linear-gradient(to bottom,#000 calc(50% - var(--taglio)),transparent calc(50% - var(--taglio)) calc(50% + var(--taglio)),#000 calc(50% + var(--taglio)));
  mask-image:linear-gradient(to bottom,#000 calc(50% - var(--taglio)),transparent calc(50% - var(--taglio)) calc(50% + var(--taglio)),#000 calc(50% + var(--taglio)))}
.pg.pg--via{--taglio:51%;transition:--taglio .95s cubic-bezier(.83,0,.17,1)}
.pg__griglia{position:absolute;inset:0 var(--gronda);display:grid;grid-template-columns:repeat(12,1fr);column-gap:1.15vw}
.pg__griglia i{background:rgba(255,96,55,.08);transform:scaleY(var(--q,0));transform-origin:50% 0}
@media (max-width:40em){.pg__griglia{grid-template-columns:repeat(6,1fr);column-gap:12px}}
.pg__box{position:absolute;opacity:0}
.pg__box svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.pg__box rect{fill:rgba(255,96,55,.06);stroke:var(--arancio);stroke-width:1;vector-effect:non-scaling-stroke}
.pg__box b{position:absolute;width:7px;height:7px;margin:-3.5px 0 0 -3.5px;background:var(--crema);border:1px solid var(--arancio);transform:scale(0);transition:transform .25s cubic-bezier(.16,1,.3,1)}
.pg__box.pg--chiuso b{transform:none}
.pg__nome,.pg__misura{position:absolute;font-family:var(--mono);font-size:11px;font-weight:500;line-height:1;letter-spacing:.03em;text-transform:uppercase;white-space:nowrap}
.pg__nome{left:0;bottom:calc(100% + 7px);color:rgba(245,244,237,.72)}
.pg__box.pg--dentro .pg__nome{bottom:auto;top:9px;left:9px}
.pg__misura{left:50%;top:calc(100% + 7px);transform:translateX(-50%);padding:4px 5px;border-radius:2px;background:var(--arancio);color:var(--nero);font-variant-numeric:tabular-nums}
.pg__box.pg--basso .pg__misura{top:auto;bottom:9px}
.pg__misura{opacity:0;transition:opacity .2s linear}
.pg__box.pg--attivo .pg__misura,.pg__box.pg--cornice .pg__misura{opacity:1}
/* la cornice dell'hero: misura e nome dentro, in alto a destra, uno sotto l'altro (a sinistra c'è il logo, sotto le etichette) */
.pg__box.pg--cornice .pg__misura{top:9px;bottom:auto;left:auto;right:9px;transform:none}
.pg__box.pg--cornice .pg__nome{top:34px;bottom:auto;left:auto;right:9px}
.pg__cursore{position:absolute;left:0;top:0;will-change:transform}
.pg__cursore svg{transform-origin:2px 2px;transition:transform .12s cubic-bezier(.16,1,.3,1)}
.pg__cursore.pg--preme{transition:transform .14s cubic-bezier(.16,1,.3,1)}
.pg__cursore.pg--preme svg{transform:scale(.82)}
.pg__cursore svg{display:block;width:16px;height:20px}
.pg__cursore span{position:absolute;left:13px;top:17px;padding:3px 6px 4px;border-radius:3px 9px 9px 9px;background:var(--arancio);color:var(--nero);font-size:11px;line-height:1.1;white-space:nowrap;font-weight:500}

/* ── progetto · la tavola sul piano: l'hero è una tavola di Figma rimpicciolita (scala S da carica-progetto.js) ──
   il piano scuro è l'ombra piena dell'hero (sotto di lui, sopra il resto della pagina), un filo crema fa il bordo della tavola;
   nome, «Presenta» e cursore stanno sopra, su un livello fisso · i corpi dentro la tavola si contro-scalano, o a .8 sono 8,8 px */
.hero.pg-tavola{z-index:30;transform-origin:50% 50%;box-shadow:0 0 0 1px rgba(245,244,237,.16),0 0 0 100vmax #21120F}
.pg-tavola .pg__nome,.pg-tavola .pg__misura{font-size:calc(11px / var(--s,1))}
.pg-tavola .pg__box b{width:calc(7px / var(--s,1));height:calc(7px / var(--s,1));margin:calc(-3.5px / var(--s,1)) 0 0 calc(-3.5px / var(--s,1))}
.pg-piano{position:fixed;inset:0;z-index:40;pointer-events:none;color:var(--crema)}
.pg-piano__nome,.pg-piano__presenta{position:absolute;left:0;top:0;font-family:var(--mono);font-size:11px;font-weight:500;line-height:1;letter-spacing:.03em;text-transform:uppercase;white-space:nowrap}
.pg-piano__nome{color:rgba(245,244,237,.6)}
/* «Presenta» nasce dalla linea, al centro (Francesco, 19/10/2026): a 100 la linea si stringe alla larghezza del tasto e lui
   si apre in altezza da lì · crema, al passaggio del cursore arancio, premuto un filo più scuro */
.pg-piano__presenta{left:50%;top:50%;display:flex;align-items:center;gap:8px;padding:10px 15px 10px 13px;border-radius:5px;font-size:12px;
  background:var(--crema);color:var(--nero);transform:translate(-50%,-50%);opacity:0;clip-path:inset(calc(50% - 1px) 0 round 5px);
  transition:background-color .2s linear,color .2s linear}
.pg-piano__presenta.pg--appare{opacity:1;clip-path:inset(0 round 5px);transition:clip-path .34s cubic-bezier(.16,1,.3,1) .16s,opacity 0s linear .16s,background-color .2s linear}
.pg-piano__presenta i{width:0;height:0;border-style:solid;border-width:5px 0 5px 8px;border-color:transparent transparent transparent currentColor}
html[data-carica=progetto] .carica--piena .carica__linea{clip-path:inset(0 calc(50% - 52px));opacity:0;transition:clip-path .22s cubic-bezier(.65,0,.35,1),opacity .08s linear .16s}
.pg-piano__presenta.pg--pronto{background:var(--arancio);color:var(--nero)}
.pg-piano__presenta.pg--premuto{background:#E8502A}
.pg-piano{transition:opacity .3s linear}
.pg-piano.pg-piano--via{opacity:0}
.pg__cursore.pg--sx span{left:auto;right:12px;border-radius:9px 3px 9px 9px}

/* ============ sviluppo — il codice si scrive e diventa sito (i pezzi li costruisce src/carica-sviluppo.js) ============
   MENTRE CARICA  il sorgente della home si scrive sul nero col cursore, a colonne: lo schermo che si riempie È la barra
                  (⛔ la linea al centro), e in basso «(Sviluppo)» e il numero su tasselli crema, con fra i due la barra che si riempie
   A 100 (.sv-scansione)  una linea scende dall'alto: sopra di lei la pagina, appena sotto il codice si accende (lo sta
                  eseguendo). Velo, linea e fascia hanno la stessa durata e la stessa curva, così restano attaccati
   --H è l'altezza dello schermo in px (dal JS) · si muove tutto per trasformazioni */
html[data-carica=sviluppo].in-carica .carica{--sv-t:.75s;--sv-curva:cubic-bezier(.65,0,.35,1);--B:120px}
html[data-carica=sviluppo].in-carica:not(.sv-pronto) .carica{background:var(--nero)}   /* finché il codice ⛔ c'è, il nero */
html[data-carica=sviluppo] .carica__linea{display:none}

/* il velo: nero, a tutto schermo · a 100 scende di H e il suo contenuto risale di H: il codice resta fermo e si scopre dall'alto */
.sv-velo{position:absolute;inset:0;overflow:hidden;background:var(--nero)}
.sv-velo__dentro{position:absolute;left:0;right:0;top:0;height:var(--H,100vh)}

/* il codice: fitto e piccolo, a colonne che si riempiono dall'alto · sotto lascia il posto al tassello */
.sv-codice{position:absolute;inset:calc(var(--gronda) * .6) var(--gronda) calc(var(--gronda) * .6 + 34px);margin:0;padding:0;   /* ⛔ padding: le colonne in più ci sbucherebbero dentro */
  font:400 11px/1.5 var(--mono);letter-spacing:0;white-space:pre-wrap;overflow-wrap:anywhere;tab-size:2;
  column-count:4;column-gap:1.15vw;column-fill:auto;overflow:hidden;color:rgba(245,244,237,.34)}
.sv-codice .t{color:rgba(255,96,55,.7)}
.sv-codice .v{color:rgba(245,244,237,.46)}
.sv-codice .x{color:rgba(245,244,237,.56)}
.sv-misura{visibility:hidden;pointer-events:none}
.sv-codice--acceso{color:rgba(245,244,237,.55)}
.sv-codice--acceso .t{color:var(--arancio)}
.sv-codice--acceso .a{color:rgba(245,244,237,.78)}
.sv-codice--acceso :is(.v,.x){color:var(--crema)}
.sv-codice--acceso .c{color:rgba(245,244,237,.4)}
@media (max-width:64em){.sv-codice{column-count:2}}
@media (max-width:40em){.sv-codice{column-count:1;font-size:9px}}

/* il cursore: un blocco arancio in coda al codice · se la rete si ferma lampeggia, come un editor che aspetta */
.sv-cursore{display:inline-block;width:.62em;height:1.2em;margin-left:1px;vertical-align:-.25em;background:var(--arancio)}
.sv-cursore--attesa{animation:sv-batti 1.05s steps(1) infinite}
@keyframes sv-batti{50%{opacity:0}}

/* le scritte: in basso, fra le gronde, su un tassello crema (in mezzo al codice crema su nero ⛔ si leggerebbero) */
html[data-carica=sviluppo] .carica__righe{left:var(--gronda);right:var(--gronda);width:auto;bottom:calc(var(--gronda) * .6);color:var(--nero)}
html[data-carica=sviluppo] .carica__righe > span{background:var(--crema);padding:4px 8px 3px}
html[data-carica=sviluppo] .carica__righe *{color:var(--nero)}
/* fra le due scritte, la barra: il binario crema e il pieno arancio che sale con --p, come il numero (Francesco,
   19/10/2026: «deve proprio vedersi una barra di caricamento») · se ne va col velo, come le scritte */
html[data-carica=sviluppo] .carica__righe{align-items:center;gap:12px}
html[data-carica=sviluppo] .carica__righe::after{content:"";order:1;flex:1;height:2px;
  background:linear-gradient(var(--arancio),var(--arancio)) 0 0/calc(var(--p,0) * 100%) 100% no-repeat,rgba(245,244,237,.18)}
html[data-carica=sviluppo] .carica__n{order:2}
/* stanno dentro il velo (le sposta il JS): a 100 ⛔ si spengono, se le porta via la linea */
html[data-carica=sviluppo] .carica--piena .carica__righe{opacity:1;transition:none}

/* la scansione: il velo scende con la linea sul bordo, la fascia accesa la segue appena sotto
   (la fascia scende di H e il suo contenuto risale di H: il codice resta fermo, si accende solo dove passa) */
.sv-fascia{position:absolute;left:0;right:0;top:0;height:var(--B);overflow:hidden;pointer-events:none;opacity:0;
  -webkit-mask-image:linear-gradient(to bottom,rgba(53,30,28,1),rgba(53,30,28,.35) 45%,transparent);
          mask-image:linear-gradient(to bottom,rgba(53,30,28,1),rgba(53,30,28,.35) 45%,transparent)}
/* la linea è il bordo alto della fascia, che scende col velo: ⛔ può staccarsene di un fotogramma (la fascia sta sopra
   il velo, quindi la linea va qui; l'alone cade solo in giù, sul codice che si accende) */
.sv-fascia::after{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:var(--crema);
  box-shadow:0 2px 14px 1px rgba(245,244,237,.4)}
.sv-fascia__dentro{position:absolute;left:0;right:0;top:0;height:var(--H,100vh);background:var(--nero)}
html.sv-scansione .sv-velo{transform:translateY(var(--H,100vh));transition:transform var(--sv-t) var(--sv-curva)}
html.sv-scansione .sv-velo__dentro{transform:translateY(calc(var(--H,100vh) * -1));transition:transform var(--sv-t) var(--sv-curva)}
html.sv-scansione .sv-fascia{opacity:1;transform:translateY(var(--H,100vh));transition:transform var(--sv-t) var(--sv-curva)}
html.sv-scansione .sv-fascia__dentro{transform:translateY(calc(var(--H,100vh) * -1));transition:transform var(--sv-t) var(--sv-curva)}

/* sotto il codice la pagina è già al suo posto: la foto, la figura e il velo da subito (il nero li copre) */
html[data-carica=sviluppo].sv-pronto.in-carica :is(.hero__media img,.hero__velo,.hero__figura){visibility:visible}
/* tutto il resto lo scopre la linea: nessuna entrata propria all'uscita, o comparirebbe due volte */
html[data-carica=sviluppo].in-carica.sv-scansione :is(.hero__media img,.hero__figura,.hero__velo,.hero__testo,.hero__frase,.hero__etichette,.barra){visibility:visible}
html[data-carica=sviluppo].in-carica-esce .barra{animation:none}
html[data-carica=sviluppo].in-carica-esce :is(.hero__velo,.hero__figura,.hero__testo,.hero__frase){animation:none}