/* reveal.css — animazioni di ingresso, sostituto di aos.css * * Regola chiave: tutto è condizionato a .js sull'. Senza JavaScript * niente viene nascosto, quindi la pagina resta leggibile. È il motivo per cui * serve lo snippet nel : * */ .js [data-aos] { opacity: 0; transition-property: opacity, transform; transition-duration: 600ms; transition-timing-function: cubic-bezier(.22, .61, .36, 1); will-change: opacity, transform; } .js [data-aos].aos-animate { opacity: 1; transform: none; will-change: auto; } /* Varianti: stessi nomi di AOS, così il markup non cambia. */ .js [data-aos="fade-up"] { transform: translateY(24px); } .js [data-aos="fade-down"] { transform: translateY(-24px); } .js [data-aos="fade-right"] { transform: translateX(-24px); } .js [data-aos="fade-left"] { transform: translateX(24px); } .js [data-aos="zoom-in"] { transform: scale(.94); } .js [data-aos="zoom-out"] { transform: scale(1.06); } .js [data-aos="flip-up"] { transform: perspective(800px) rotateX(8deg); } /* "fade" senza suffisso: solo opacità, nessuna trasformazione. */ /* Chi ha chiesto meno movimento vede il contenuto, non l'effetto. AOS questo non lo faceva. */ @media (prefers-reduced-motion: reduce) { .js [data-aos] { opacity: 1 !important; transform: none !important; transition: none !important; } } /* In stampa/PDF non c'è scroll reale: l'IntersectionObserver potrebbe non scattare mai per il contenuto sotto il fold, lasciandolo invisibile. */ @media print { .js [data-aos] { opacity: 1 !important; transform: none !important; transition: none !important; } }