/* ───────────────────────────────────────────────────────────── Ceng — livello motion condiviso delle demo Scroll-driven dove il browser lo supporta (animation-timeline), fallback IntersectionObserver via motion.js. Tutto si spegne con prefers-reduced-motion. ───────────────────────────────────────────────────────────── */ /* barra di avanzamento lettura */ .mo-progress{position:fixed;top:0;left:0;right:0;height:2px;z-index:200; background:currentColor;opacity:.9;transform-origin:0 50%;transform:scaleX(0); color:var(--acc,#ff751f);pointer-events:none;} @supports (animation-timeline: scroll()){ .mo-progress{animation:mo-grow linear both;animation-timeline:scroll(root);} } @keyframes mo-grow{to{transform:scaleX(1);}} /* cursore personalizzato: solo desktop con mouse */ .mo-cursor{position:fixed;top:0;left:0;width:26px;height:26px;border-radius:50%; border:1.5px solid currentColor;color:var(--acc,#ff751f);z-index:210;pointer-events:none; transform:translate(-50%,-50%);transition:width .3s cubic-bezier(.22,1,.36,1), height .3s cubic-bezier(.22,1,.36,1),background-color .3s,opacity .3s; mix-blend-mode:difference;opacity:0;} .mo-cursor.on{opacity:1;} .mo-cursor.hot{width:58px;height:58px;background:currentColor;} @media (hover:none),(pointer:coarse){.mo-cursor{display:none;}} /* REGOLA D'ORO: gli stati che NASCONDONO qualcosa valgono solo dentro .mo, classe che motion.js mette su solo quando e' in grado di rivelarli. Senza JS, o se qualcosa va storto, il contenuto resta visibile. */ /* ── testo che si compone parola per parola ── */ [data-split]{--mo-d:0ms;} /* il padding/margin compensato lascia respirare le discendenti (g, p, q): senza, overflow:hidden le taglia a fine animazione */ .mo [data-split] .mo-line{display:block;overflow:hidden;padding-bottom:.16em;margin-bottom:-.16em;} .mo [data-split] .mo-w{display:inline-block;will-change:transform; transform:translateY(105%) rotate(2.5deg);opacity:0;} .mo [data-split].mo-in .mo-w{animation:mo-word .95s cubic-bezier(.22,1,.36,1) forwards; animation-delay:calc(var(--mo-d) + var(--i,0) * 55ms);} @keyframes mo-word{to{transform:none;opacity:1;}} /* ── immagini svelate da una maschera ── */ /* La maschera e' legata allo SCROLL, non a una transizione a tempo: una transizione che non parte lascerebbe l'immagine invisibile per sempre. Dove animation-timeline non c'e', l'immagine si vede e basta. */ @supports (animation-timeline: view()){ [data-mask]{animation:mo-mask linear both;animation-timeline:view(); animation-range:entry 10% cover 30%;} [data-mask] img{animation:mo-zoom linear both;animation-timeline:view(); animation-range:entry 10% cover 45%;} @keyframes mo-mask{from{clip-path:inset(0 0 88% 0);}to{clip-path:inset(0 0 0 0);}} /* se l'animazione non si applica, nessun clip-path: immagine visibile */ @keyframes mo-zoom{from{transform:scale(1.16);}to{transform:scale(1);}} } /* ── parallasse legato allo scroll ── */ [data-par]{will-change:transform;} @supports (animation-timeline: view()){ [data-par]{animation:mo-par linear both;animation-timeline:view(); animation-range:entry 0% exit 100%;} @keyframes mo-par{ from{transform:translate3d(0,var(--mo-par-from,7%),0);} to{transform:translate3d(0,var(--mo-par-to,-7%),0);} } } /* ── entrata generica, ma legata allo scroll dove supportato ── */ @supports (animation-timeline: view()){ .mo [data-up]{animation:mo-up linear both;animation-timeline:view(); animation-range:entry 5% cover 32%;} @keyframes mo-up{from{opacity:0;transform:translateY(38px);}to{opacity:1;transform:none;}} } @supports not (animation-timeline: view()){ .mo [data-up]{opacity:0;transform:translateY(38px); transition:opacity .9s cubic-bezier(.22,1,.36,1),transform .9s cubic-bezier(.22,1,.36,1);} .mo [data-up].mo-in{opacity:1;transform:none;} } /* ── bottoni magnetici ── */ [data-magnet]{will-change:transform;transition:transform .45s cubic-bezier(.22,1,.36,1);} /* ── velo d'apertura ── */ .mo-veil{position:fixed;inset:0;z-index:250;background:var(--bg,#111);pointer-events:none; animation:mo-veil 1s cubic-bezier(.76,0,.24,1) .15s forwards;} @keyframes mo-veil{to{transform:translateY(-101%);}} @media (prefers-reduced-motion: reduce){ .mo-progress,.mo-cursor,.mo-veil{display:none !important;} *,*::before,*::after{animation-duration:.01ms !important;animation-delay:0ms !important; transition-duration:.01ms !important;} [data-split] .mo-w,[data-up]{opacity:1 !important;transform:none !important;} [data-mask]{clip-path:none !important;} [data-mask] img,[data-par]{transform:none !important;} }