/* * Scroll reveal — stato nascosto/rivelato di titoli, testi e media. * * Scope: .wbg-anim-scope, il wrapper che avvolge SOLO il contenuto principale * (tra nav e footer), aggiunto da templates-custom/private.php. Cosi' menu e * footer restano fuori dall'animazione. * * Attivo SOLO sotto html.wbg-reveal: la classe la aggiunge lo snippet inline in * (private.php) solo se IntersectionObserver e' supportato e l'utente non * ha richiesto meno movimento. Senza quel gate il contenuto resta normalmente * visibile: nessun testo invisibile, nessun flash (lo stato nascosto e' gia' * applicato al primo paint). * * NB: selettori e classi DEVONO restare allineati a scroll-reveal.js. */ /* === Stato iniziale di blocco (flash-free) ================================== */ html.wbg-reveal .wbg-anim-scope h1, html.wbg-reveal .wbg-anim-scope h2, html.wbg-reveal .wbg-anim-scope h3, html.wbg-reveal .wbg-anim-scope h4, html.wbg-reveal .wbg-anim-scope h5, html.wbg-reveal .wbg-anim-scope h6, html.wbg-reveal .wbg-anim-scope p, html.wbg-reveal .wbg-anim-scope ul, html.wbg-reveal .wbg-anim-scope ol, html.wbg-reveal .wbg-anim-scope blockquote, html.wbg-reveal .wbg-anim-scope table { opacity: 0; transform: translateY(28px); transition: opacity .7s cubic-bezier(.22, .61, .36, 1), transform .7s cubic-bezier(.22, .61, .36, 1); } /* * Reveal di blocco: la classe .wbg-reveal-in la aggiunge il JS quando l'elemento * entra nel viewport. Specificita' (0,3,1) > stato iniziale (0,2,2): vince. */ html.wbg-reveal .wbg-anim-scope .wbg-reveal-in { opacity: 1; transform: none; } /* === Titoli: animazione riga per riga (maschera + slide-up in cascata) ====== */ /* Maschera della singola riga */ html.wbg-reveal .wbg-line { display: block; overflow: hidden; } /* Contenuto della riga: parte sotto la maschera e sale */ html.wbg-reveal .wbg-line-inner { display: block; transform: translateY(120%); transition: transform .8s cubic-bezier(.22, .61, .36, 1); } /* * Il titolo "splittato" non si muove come blocco e non sfuma: lo fanno le sue * righe. Annulla lo stato nascosto di blocco (specificita' 0,3,1 > 0,2,2). */ html.wbg-reveal .wbg-anim-scope .wbg-split { opacity: 1; transform: none; } /* Reveal delle righe: il ritardo per-riga e' impostato inline dal JS -> cascata */ html.wbg-reveal .wbg-anim-scope .wbg-reveal-in .wbg-line-inner { transform: none; } /* Durante il ricalcolo righe su resize: niente transizioni (no ri-animazione) */ html.wbg-reveal-noanim .wbg-line-inner { transition: none !important; } /* === Accessibilita': nessuna animazione se l'utente ha ridotto il movimento == */ @media (prefers-reduced-motion: reduce) { html.wbg-reveal .wbg-anim-scope h1, html.wbg-reveal .wbg-anim-scope h2, html.wbg-reveal .wbg-anim-scope h3, html.wbg-reveal .wbg-anim-scope h4, html.wbg-reveal .wbg-anim-scope h5, html.wbg-reveal .wbg-anim-scope h6, html.wbg-reveal .wbg-anim-scope p, html.wbg-reveal .wbg-anim-scope ul, html.wbg-reveal .wbg-anim-scope ol, html.wbg-reveal .wbg-anim-scope blockquote, html.wbg-reveal .wbg-anim-scope table, html.wbg-reveal .wbg-line-inner { opacity: 1; transform: none; transition: none; } }