/* IL CARICAMENTO — la pagina si mostra solo quando è pronta (Francesco, 19/10/2026: «un caricamento accattivante,
   e presentala solo quando tutto è pronto»; poi «puoi fare di meglio»; poi, sui 14 progetti a scatti nella finestra:
   «più minimal, e che si percepisca che è un caricamento vero e proprio»).
   src/carica.js lo accende, fa salire la linea e lo toglie.
   COSA     un foglio nero e, a metà altezza, UNA linea che si riempie d'arancio quanto la pagina è pronta davvero;
            sopra, ai suoi capi, «(Caricamento)» e il numero. Nient'altro: la linea È il caricamento
   USCITA   a 100 le scritte se ne vanno e la linea corre ai bordi dello schermo; lì il foglio si taglia e le due metà
            si aprono, su e giù (la curva del passaggio, 1 s). Solo transform, opacity e un clip-path su 2 px
   ARMATURA senza JavaScript la classe html.in-carica non c'è e il pannello non esiste: la pagina si vede subito, intera
   MENO MOVIMENTO  la linea sale senza corse; l'uscita è una dissolvenza */
.carica{display:none}
html.in-carica .carica{display:block;position:fixed;inset:0;z-index:1200;pointer-events:auto;color:var(--crema);
  --l:clamp(200px,26vw,400px);--passo:cubic-bezier(.83,0,.17,1);--entra:cubic-bezier(.16,1,.3,1)}

/* le due metà del foglio: si sovrappongono di un filo, così sul taglio non passa luce prima del tempo */
.carica__meta{position:absolute;left:0;right:0;height:50.5%;background:var(--nero);will-change:transform}
.carica__meta--su{top:0}
.carica__meta--giu{bottom:0}

/* la linea: il binario è largo quanto lo schermo e il ritaglio ne mostra solo --l, al centro; il pieno sale con --p */
.carica__linea{position:absolute;left:0;right:0;top:50%;height:2px;margin-top:-1px;background:rgba(245,244,237,.16);
  clip-path:inset(0 calc(50% - var(--l) / 2));animation:carica-linea .9s var(--entra) both}
.carica__pieno{position:absolute;top:0;bottom:0;left:calc(50% - var(--l) / 2);width:var(--l);background:var(--arancio);
  transform:scaleX(var(--p,0));transform-origin:0 50%}

/* sopra la linea, ai due capi: cosa succede e quanto manca */
.carica__righe{position:absolute;left:calc(50% - var(--l) / 2);width:var(--l);bottom:calc(50% + 14px);margin:0;
  display:flex;justify-content:space-between;align-items:baseline;color:rgba(245,244,237,.62);animation:carica-entra .9s var(--entra) .15s both}
.carica__n{color:var(--crema);font-variant-numeric:tabular-nums}

@keyframes carica-linea{from{clip-path:inset(0 50%)}}
@keyframes carica-entra{from{opacity:0;transform:translateY(8px)}}

/* a 100: via le scritte, la linea (ormai tutta arancio) corre ai bordi */
.carica--piena .carica__righe{opacity:0;transition:opacity .25s}
.carica--piena .carica__linea{background:var(--arancio);clip-path:inset(0 0);transition:clip-path .55s var(--passo)}
.carica--piena .carica__pieno{display:none}

/* il taglio: le metà si aprono, la linea si spegne appena il foglio si separa */
html.in-carica-esce .carica{pointer-events:none}
@media (prefers-reduced-motion:no-preference){
  html.in-carica-esce .carica__meta{transition:transform 1s var(--passo)}
  html.in-carica-esce .carica__meta--su{transform:translateY(-100%)}
  html.in-carica-esce .carica__meta--giu{transform:translateY(100%)}
  html.in-carica-esce .carica__linea{opacity:0;transition:opacity .2s linear .1s}
}
/* il velo NEUTRO (src/carica.js, la pagina si riapre a metà): il foglio è crema come la pagina, niente linea né scritte,
   e se ne va sfumando, ⛔ col taglio: sotto c'è una sezione qualunque, e la scena qui non racconterebbe niente */
html[data-carica=neutro] .carica__meta{background:var(--crema)}
html[data-carica=neutro] .carica__linea,html[data-carica=neutro] .carica__righe{display:none}
html[data-carica=neutro].in-carica-esce .carica{opacity:0;transition:opacity .55s cubic-bezier(.16,1,.3,1)}
html[data-carica=neutro].in-carica-esce .carica__meta{transform:none;transition:none}
@media (prefers-reduced-motion:reduce){
  .carica__linea,.carica__righe{animation:none}
  .carica--piena .carica__linea{transition:none}
  html.in-carica-esce .carica{opacity:0;transition:opacity .4s}
}