/* ========================================================================== CineArts Motion — preloader e comparsa dei contenuti L'andamento è lo stesso già usato dal sito per gli hover: cubic-bezier(0.16, 1, 0.3, 1). ========================================================================== */ /* Preloader --------------------------------------------------------------- */ .cm-preloader { position: fixed; inset: 0; z-index: 2147483000; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; background: var(--cm-pre-bg, #f4f4f4); opacity: 1; visibility: visible; transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), visibility 0s linear 0.7s; /* Rete di sicurezza: se il JavaScript non parte o va in errore, il velo sparisce da solo e la pagina resta usabile. */ animation: cm-failsafe 0s linear 6s forwards; } @keyframes cm-failsafe { to { opacity: 0; visibility: hidden; pointer-events: none; } } .cm-preloader.is-done { opacity: 0; visibility: hidden; pointer-events: none; } .cm-preloader__mark { font-family: "Gotham Ultra", "Helvetica Neue", Arial, sans-serif; font-size: clamp(24px, 3.6vw, 40px); line-height: 1; color: var(--cm-pre-fg, #0b0b0b); letter-spacing: 0.3em; /* Lo spazio a destra compensa l'ultima lettera, che altrimenti resta spostata dal letter-spacing e sballa il centraggio. */ padding-left: 0.3em; opacity: 0; transform: translateY(10px); animation: cm-mark 1.1s cubic-bezier(0.16, 1, 0.3, 1) 0.08s forwards; } @keyframes cm-mark { to { opacity: 1; transform: none; letter-spacing: 0.06em; } } .cm-preloader__rule { display: block; width: 0; height: 1px; background: var(--cm-pre-fg, #0b0b0b); opacity: 0.3; animation: cm-rule 1.5s cubic-bezier(0.16, 1, 0.3, 1) 0.22s forwards; } @keyframes cm-rule { to { width: clamp(80px, 11vw, 150px); } } /* Comparsa dei contenuti -------------------------------------------------- La classe sull' la mette uno script nell'head, prima che il body venga disegnato: senza, i contenuti lampeggerebbero visibili per poi sparire. E se lo script non gira, nulla viene mai nascosto. */ html.cm-reveal-on .cm-reveal { /* Salita ampia e asciutta, come su criterion.com: l'elemento sale da 100px più in basso mentre entra in dissolvenza. I due valori stanno qui per poterli tarare in un punto solo. */ --cm-rise: 130px; --cm-dur: 0.85s; opacity: 0; transform: translate3d(0, var(--cm-rise), 0); transition: opacity var(--cm-dur) ease-out, transform var(--cm-dur) ease-out; } html.cm-reveal-on .cm-reveal.is-in { opacity: 1; transform: translate3d(0, 0, 0); } /* Variante orizzontale: l'elemento entra da sinistra invece che dal basso. La classe si mette nel markup, resta inerte finche' lo script non aggiunge anche .cm-reveal. */ html.cm-reveal-on .cm-reveal.cm-reveal--sx { transform: translate3d(calc(-1 * var(--cm-rise)), 0, 0); } html.cm-reveal-on .cm-reveal.cm-reveal--sx.is-in { transform: translate3d(0, 0, 0); } /* Accessibilità ---------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { .cm-preloader { animation: none; transition: none; } .cm-preloader__mark, .cm-preloader__rule { animation: none; opacity: 1; transform: none; letter-spacing: 0.06em; } .cm-preloader__rule { width: clamp(80px, 11vw, 150px); opacity: 0.3; } html.cm-reveal-on .cm-reveal, html.cm-reveal-on .cm-reveal.is-in { opacity: 1; transform: none; transition: none; } }