/* ============================================================ Animazioni di ingresso. Tutto è appeso a .mc-anima sull'elemento , che viene aggiunta da js/animazioni.js. Senza JavaScript quella classe non c'è, nessuna regola qui sotto si applica, e la pagina si vede per intero: le animazioni sono un di più, mai una condizione per leggere il contenuto. Si muovono solo opacity e transform: nessun reflow, nessun contributo al CLS. ============================================================ */ /* --- Il blocco che entra -------------------------------------- */ /* Lo stato di partenza è SELEZIONATO IN MODO STRUTTURALE, non tramite una classe messa dal JavaScript. È la differenza che evita lo sfarfallio: se aspettassi che uno script in fondo alla pagina marchi i blocchi, il browser li avrebbe già dipinti e li vedresti sparire per poi rientrare. :first-child -> la hero resta sempre visibile (è l'LCP). [uk-scrollspy] -> le sezioni che anima UIkit non le tocco. Nessuna transizione qui: sparire dev'essere istantaneo. */ .mc-anima #maincontent > *:not(:first-child):not([uk-scrollspy]) { opacity: 0; transform: translate3d(0, 16px, 0); } /* La transizione vive solo sull'entrata. I due :not() vanno ripetuti anche qui: senza, questa regola peserebbe meno di quella sopra e "nascondi" vincerebbe su "rivela" — con il risultato che un blocco marcato come visibile resterebbe trasparente. Non si vede leggendo il CSS, si vede solo provandolo. */ .mc-anima #maincontent > *:not(:first-child):not([uk-scrollspy]).mc-anima--dentro { opacity: 1; transform: none; transition: opacity .6s cubic-bezier(.22, .61, .36, 1), transform .6s cubic-bezier(.22, .61, .36, 1); } /* --- Gli elementi dentro, a scalare --------------------------- Il ritardo arriva da --mc-i, impostata dallo script sul figlio. Fermata a 5 dallo script: oltre si legge come lentezza. ------------------------------------------------------------ */ .mc-anima .mc-anima__voce { opacity: 0; transform: translate3d(0, 12px, 0); } /* Le voci stanno dentro un blocco già nascosto, quindi qui la classe messa dal JavaScript non crea sfarfallio: nessuno le ha mai viste. */ .mc-anima .mc-anima--dentro .mc-anima__voce { opacity: 1; transform: none; transition: opacity .5s cubic-bezier(.22, .61, .36, 1), transform .5s cubic-bezier(.22, .61, .36, 1); transition-delay: calc(var(--mc-i, 0) * 70ms); } /* --- Micro-interazioni ---------------------------------------- Non legate allo scroll: reagiscono a quello che fa la persona. Restano discrete di proposito. ------------------------------------------------------------ */ /* Nessuno scroll-behavior: smooth globale, di proposito. I bottoni con ancora usano uk-scroll, che anima lo scorrimento in JavaScript: aggiungere anche quello nativo farebbe sommare due animazioni sullo stesso movimento. */ /* Le ancore non devono finire sotto la navbar appiccicata. Circoscritto al contenuto: [id] da solo colpirebbe qualsiasi elemento del sito, modali e overlay compresi. */ #maincontent [id] { scroll-margin-top: 90px; } /* Le immagini dentro le card respirano appena al passaggio. */ .mc-caso__media img, .mc-tool__logo img { transition: transform .35s cubic-bezier(.22, .61, .36, 1); } .mc-caso:hover .mc-caso__media img { transform: scale(1.03); } /* Il focus da tastiera si deve vedere: è la cosa che più spesso viene tolta per estetica e che serve di più a chi naviga così. */ a:focus-visible, button:focus-visible, summary:focus-visible { outline: 2px solid #007df9; outline-offset: 3px; border-radius: 3px; } /* --- Chi ha chiesto meno animazioni ------------------------- Lo script già si ferma prima, ma se la preferenza cambia a pagina aperta queste regole tengono comunque tutto fermo. ------------------------------------------------------------ */ @media (prefers-reduced-motion: reduce) { .mc-anima #maincontent > *, .mc-anima .mc-anima__voce { opacity: 1 !important; transform: none !important; transition: none !important; } .mc-caso__media img, .mc-tool__logo img { transition: none; } .mc-caso:hover .mc-caso__media img { transform: none; } }