/* Regole comuni delle pagine interne, da caricare dopo layout.css: barra dal caricamento, apertura breve, comparsa allo scorrere. */
/* anche su uno schermo alto il footer parte sotto la piega: la barra si vede dal caricamento */
main { min-height: calc(100svh - 64px); }
@media (max-width: 43.75rem) { main { min-height: calc(100svh - 56px); } }
/* senza JavaScript la barra è visibile da subito e a fine pagina resta nel suo spazio, sotto il footer */
html:not(.js) .dispo { position: sticky; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); }

/* ===== Apertura breve: al massimo 1,4 s, solo con html.apre. data-intro: "titolo" si scopre a righe, "filo" si traccia, "dopo" arriva con l'header ===== */
.sipario { display: none; }
.apre .sipario { display: block; position: fixed; inset: 0; z-index: 100; pointer-events: none; animation: sip-via 0s linear 0.8s forwards; }
/* grigio caldo: sul nero uguale al fondo le fasce non si vedrebbero */
.sip-f { position: absolute; left: 0; right: 0; top: calc(var(--k) * 25%); height: 25.2%; background: #2F2D29; }
.apre .sip-f { animation: sip-f 0.22s steps(3, end) calc(0.3s + var(--k) * 0.07s) forwards; }
.sip-linea { position: absolute; z-index: 1; left: 0; right: 0; top: 50%; height: 2px; margin-top: -1px; background: var(--acc); transform-origin: 0 50%; }
.apre .sip-linea { animation: sip-linea 0.3s steps(6, end) both, sip-spegni 0s linear 0.46s forwards; }
.apre [data-intro="titolo"] { animation: riga 0.26s steps(4, end) 0.62s backwards; }
.apre .testa, .apre [data-intro="dopo"] { animation: appare 0.16s steps(2, end) 1.02s backwards; }
.apre .g::before, .apre .g::after { animation: linee 0.24s steps(3, end) 1.02s backwards; }
.apre [data-intro="filo"] { animation: filo 0.3s steps(8, end) 1.02s backwards; }
@keyframes sip-via { to { visibility: hidden; } }
@keyframes sip-f { to { clip-path: inset(0 0 100% 0); } }
@keyframes sip-linea { from { transform: scaleX(0); } }
@keyframes sip-spegni { to { opacity: 0; } }
@keyframes riga { from { clip-path: inset(100% 0 0 0); } }
@keyframes appare { from { opacity: 0; } }
@keyframes linee { from { clip-path: inset(0 0 100% 0); } }

/* ===== Comparsa allo scorrere, parola per parola. Classi: .sv-testo (parole, o righe se lungo), .sv-uno (di colpo), .sv-filo (si traccia).
   Gli stati nascosti esistono solo con html.sv ===== */
:root { --dur: 0.3s; }
@media (max-width: 43.75rem) { :root { --dur: 0.22s; } }
.sv :is(.sv-uno, .sv-testo, .mail a, .riga-piede):not(.s-via) { opacity: 0; }
.sv :is(.sv-filo, .piede .filo):not(.s-via) { transform: scaleX(0); }
.sv-filo { transform-origin: 0 50%; }
@keyframes filo { from { transform: scaleX(0); } }
@keyframes riga-su { from { transform: translateY(100%); } }
@keyframes parola { to { opacity: 1; } }
@keyframes lampo { 0%, 50% { opacity: 0; } 51%, 100% { opacity: 1; } }
.s-filo { animation: filo 0.36s steps(8, end) backwards; }
/* paragrafi lunghi: le righe, solo durante l'animazione */
.l { display: block; white-space: nowrap; clip-path: inset(0 0 -0.12em 0); }
.li { display: block; animation: riga-su var(--dur) steps(4, end) var(--d, 0ms) backwards; }
/* una parola alla volta, comparsa istantanea */
.parole .w { opacity: 0; animation: parola 1ms steps(1, end) var(--d, 0ms) forwards; }
.parole .w-acc { color: var(--acc); }
.lampo { animation: lampo 0.3s steps(1, end); }