/* ==========================================================================
   LE RIVELAZIONI ALLO SCORRIMENTO — 7/9/2026.

   Ordine di Gabriele, guardando la home online: «per lo scorrimento della
   pagina, vorrei che avesse lo stesso tipo di effetti» del suo modello.

   Nel disegno del 9/8 gli elementi entrano mentre la pagina scorre: sono
   **31 nodi con `data-rise`** e 3 con `data-msticky`, contati nelle sette
   sezioni già spezzate (`_disegno/sezioni/leggibili/*.txt`). La home vera
   non ne aveva **nessuno**.

   ┌────────────────────────────────────────────────────────────────────────┐
   │ LE TRE REGOLE CHE QUESTO FILE SI DÀ, E PERCHÉ                          │
   │                                                                        │
   │ 1. **Chi non ha JavaScript vede tutto.** Lo stato di partenza non è    │
   │    «invisibile»: è visibile. È il JS che, se parte, mette              │
   │    `data-rivela="attesa"` e da lì l'elemento entra. Il contrario —     │
   │    nascondere in CSS e mostrare col JS — è il modo classico di far     │
   │    sparire mezza pagina quando uno script non arriva.                  │
   │                                                                        │
   │ 2. **`prefers-reduced-motion: reduce` spegne tutto**, e non a metà:    │
   │    niente spostamento, niente dissolvenza, niente attesa. Chi ha       │
   │    chiesto meno movimento non lo ha chiesto per gusto.                 │
   │                                                                        │
   │ 3. **Non si muove niente che porti informazione in un'altra posizione**│
   │    — solo opacità e 12px di traslazione. Un elemento che entra da      │
   │    fuori schermo sposta il testo sotto mentre si legge.                │
   └────────────────────────────────────────────────────────────────────────┘
   ========================================================================== */

[data-rivela="attesa"] {
	opacity: 0;
	transform: translateY(12px);
}

[data-rivela="entrata"] {
	opacity: 1;
	transform: none;
	transition:
		opacity   .55s cubic-bezier(.22, .61, .36, 1),
		transform .55s cubic-bezier(.22, .61, .36, 1);
}

/* Le voci di un elenco entrano una dopo l'altra, non tutte insieme: è quello
   che il disegno fa con i `data-rise` numerati (1, 2, 3) dentro la stessa
   sezione. Il ritardo si ferma alla sesta — oltre, chi scorre veloce aspetta
   un elemento che avrebbe già dovuto vedere. */
[data-rivela][data-rivela-ordine="2"] { transition-delay: .07s; }
[data-rivela][data-rivela-ordine="3"] { transition-delay: .14s; }
[data-rivela][data-rivela-ordine="4"] { transition-delay: .21s; }
[data-rivela][data-rivela-ordine="5"] { transition-delay: .28s; }
[data-rivela][data-rivela-ordine="6"] { transition-delay: .35s; }

@media (prefers-reduced-motion: reduce) {
	[data-rivela="attesa"],
	[data-rivela="entrata"] {
		opacity: 1;
		transform: none;
		transition: none;
		transition-delay: 0s;
	}
}