/** * reveal.css — pattern d'ingresso allo scroll, componente condiviso. * * Estratto da home-epica.css §REVEAL (2026-08-01, piano claude/motion/PIANO-MOTION-SITO.md). * La home NON usa questo file: continua con la propria copia scoped .bg-epica. * Qui i selettori sono nudi, quindi a specificità 0,1,0 — più bassa di quelli * della home (0,2,0): anche caricati insieme non si sovrappongono. * * Lo stagger non sta in questo foglio. Nessun transition-delay, nessun nth-child: * la cascata la calcola reveal.js in ordine di documento (sulla home i delay in * CSS producevano 42 inversioni a scroll veloce — log 2026-07-29). * * Richiede: la classe `js` su (bg_js_flag in functions.php) e le variabili * di variables.css (--ease-out). */ /* DUE CURVE, NON UNA. --ease-out è cubic-bezier(.22,1,.36,1), una decelerazione aggressiva: giusta per il movimento, sbagliata per l'opacità (portava a 520ms l'immagine all'83% in 156ms — si leggeva come scatto). La luminosità l'occhio la legge in modo pressoché lineare: l'opacità va su `linear` e la dissolvenza dura quanto dice il numero. Su fondo #000 è già, otticamente, una dissolvenza dal nero. */ .reveal{transition:opacity 520ms linear,transform 520ms var(--ease-out)} .js .reveal{opacity:0;transform:translateY(16px)} .reveal.is-in{opacity:1;transform:none} /* elemento già scorso oltre il bordo alto: si mostra secco, senza cascata */ .reveal.no-anim,.reveal.no-anim img{transition:none} /* TRE PESI. La durata segue il tempo di permanenza in scena dell'elemento. 380ms — label, eyebrow, link operativo, righe FAQ: mezzo secondo su un'etichetta di due parole si legge come indugio. 520ms — testo, titoli, card (default, dichiarato sopra). 760ms — fotografie grandi: restano in scena per secondi e sono la cosa su cui ci si ferma; col tempo del testo minore scattavano. Sulla home i pesi sono elenchi di selettori per tag; qui sono classi esplicite, perché il componente serve pagine di cui non conosce il markup in anticipo. */ .reveal--minor{transition-duration:380ms} .reveal--photo{transition-duration:760ms} /* Layer secondario: la foto dentro il contenitore si assesta da un lieve zoom (1.03 → 1) un filo dopo il contenitore — profondità senza rotazione. */ .js figure.reveal img{transform:scale(1.03);transition:transform 900ms var(--ease-out) 140ms} figure.reveal.is-in img{transform:none} /* Accessibilità: resta la sola dissolvenza, sparisce ogni traslazione. I selettori dei pesi sono elencati anche se oggi non dichiarano transform: se un peso ne aggiungesse uno in futuro, questo blocco lo copre già. Il prefisso .js va ripetuto per pareggiare la specificità delle regole sopra — è l'errore già commesso e risolto sulla home. */ @media (prefers-reduced-motion: reduce){ .js .reveal, .js .reveal--minor, .js .reveal--photo, .reveal.is-in, .js figure.reveal img, figure.reveal.is-in img{transform:none} }