→ i figli entrano in sequenza (max 8 passi da 45 ms) */
/* :where() = specificità zero: le animazioni dei componenti dentro vincono. Riempire il contenitore UNA volta (ogni nuovo figlio rientra). */
:where([data-ingresso]) > * { animation: n-ingresso var(--n-dur-3) var(--n-curva-entrata) both; }
:where([data-ingresso]) > :nth-child(2) { animation-delay: 45ms; } :where([data-ingresso]) > :nth-child(3) { animation-delay: 90ms; } :where([data-ingresso]) > :nth-child(4) { animation-delay: 135ms; }
:where([data-ingresso]) > :nth-child(5) { animation-delay: 180ms; } :where([data-ingresso]) > :nth-child(6) { animation-delay: 225ms; } :where([data-ingresso]) > :nth-child(7) { animation-delay: 270ms; }
:where([data-ingresso]) > :nth-child(n+8) { animation-delay: 315ms; }
@keyframes n-ingresso { from { opacity: 0; transform: translateY(var(--n-sp-2)); } }
/* grafici che si disegnano (SVG): linee tracciate (
) e barre che crescono dalla base.
.n-cresce/.n-cresce-x sono per elementi SVG: su elementi HTML con padding/bordo l'origine si sposta (per le barre HTML c'è .n-elenco-barre). */
/* il tratteggio esiste SOLO durante l'animazione: alla fine (o senza pathLength="1", o con riduzione del movimento) la linea è piena */
.n-traccia { animation: n-traccia calc(var(--n-dur-4) * 1.5) var(--n-curva-entrata) backwards; }
@keyframes n-traccia { from { stroke-dasharray: 1; stroke-dashoffset: 1; } to { stroke-dasharray: 1; stroke-dashoffset: 0; } }
.n-cresce { transform-box: fill-box; transform-origin: 50% 100%; animation: n-cresce var(--n-dur-4) var(--n-curva-entrata) both; }
.n-cresce-x { transform-box: fill-box; transform-origin: 0 50%; animation: n-cresce-x var(--n-dur-4) var(--n-curva-entrata) both; }
@keyframes n-cresce { from { transform: scaleY(0); } }
@keyframes n-cresce-x { from { transform: scaleX(0); } }
@media (prefers-reduced-motion: reduce) {
:where([data-ingresso]) > *, .n-cresce, .n-cresce-x, .n-traccia { animation: none; }
}
/* ---------- 21. v1.3.2: OMBRA DI SCORRIMENTO ----------
I contenitori che scorrono in orizzontale (.n-tabella-contenitore, .n-scorre) mostrano un'ombra sul bordo SOLO dove c'è altro
contenuto: due veli «local» coprono le ombre «scroll» quando si è all'inizio o alla fine. Solo CSS, nessun JavaScript. */
.n-tabella-contenitore, .n-scorre {
overflow-x: auto;
background:
linear-gradient(to right, var(--n-carta) 30%, transparent) left center / 2.5rem 100% no-repeat local,
linear-gradient(to left, var(--n-carta) 30%, transparent) right center / 2.5rem 100% no-repeat local,
radial-gradient(farthest-side at 0 50%, var(--n-velo), transparent) left center / .9rem 100% no-repeat scroll,
radial-gradient(farthest-side at 100% 50%, var(--n-velo), transparent) right center / .9rem 100% no-repeat scroll,
var(--n-carta);
}
.n-tabella-contenitore .n-tabella th { background: transparent; } /* l'intestazione non copre l'ombra */
/* carattere dei titoli: Montserrat (SIL OFL 1.1, licenza in noga-titoli.OFL.txt), acceso da src/titoli.conf */
@font-face { font-family: "Noga Titoli"; src: url("noga-titoli.v1.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
:root { --n-font-titoli: "Noga Titoli", var(--n-font); }