/* # Motion — scroll-triggered reveals + hover flair for the services, service, about and case-study layouts. html.js-anim is set in (header.php) only when IntersectionObserver exists and the visitor hasn't asked for reduced motion. scripts/ml.js adds .in-view to each target as it scrolls in (selector list: ML_MOTION in ml.js — keep the two in sync) and html.anim-live once it's running. Without JS, or if ml.js never runs (4s failsafe in header.php), nothing is ever hidden. -------------------------------------------------------------------------------*/ :root { --ml-ease:cubic-bezier(.2,.7,.2,1); --ml-spring:cubic-bezier(.34,1.56,.64,1); } /* Rise — heading blocks + copy -------------------------------------------------------------------------------*/ .js-anim #hero .catalogue div[role="group"], .js-anim #hero.about .sect div[role="group"], .js-anim #hero.about .toolkits .core > h3, .js-anim #hero.about .toolkits .core > h4, .js-anim #hero.cs .sect h4, .js-anim #hero.cs .info > p, .js-anim #hero.cs .details > p { opacity:0; transform:translateY(28px); transition:opacity .8s ease, transform .9s var(--ml-ease); transition-delay:var(--d, 0s); } .js-anim #hero .catalogue div[role="group"].in-view, .js-anim #hero.about .sect div[role="group"].in-view, .js-anim #hero.about .toolkits .core > h3.in-view, .js-anim #hero.about .toolkits .core > h4.in-view, .js-anim #hero.cs .sect h4.in-view, .js-anim #hero.cs .info > p.in-view, .js-anim #hero.cs .details > p.in-view { opacity:1; transform:none; } /* Generic rise — any element with .st-reveal (studio layouts) -------------------------------------------------------------------------------*/ .js-anim #hero .st-reveal { opacity:0; transform:translateY(30px); transition:opacity .8s ease, transform .9s var(--ml-ease); transition-delay:var(--d, 0s); } .js-anim #hero .st-reveal.in-view { opacity:1; transform:none; } /* Track-in — "The Challenge / The Solution / The Result" -------------------------------------------------------------------------------*/ .js-anim #hero.cs .sect h3 { opacity:0; letter-spacing:.3em; filter:blur(6px); transition:opacity .9s ease, letter-spacing 1.1s var(--ml-ease), filter .9s ease; } .js-anim #hero.cs .sect h3.in-view { opacity:1; letter-spacing:0; filter:blur(0); } /* Cards — staggered rise + scale -------------------------------------------------------------------------------*/ .js-anim #hero .catalogue ul > li, .js-anim #hero.about .sect ul > li, .js-anim #hero.about .toolkits ul > li, .js-anim #hero.cs .info ul > li, .js-anim #hero.cs .sols > ul > li, .js-anim #hero.cs .gallery ul > li { opacity:0; transform:translateY(40px) scale(.96); transition:opacity .7s ease, transform .9s var(--ml-ease); transition-delay:var(--d, 0s); } .js-anim #hero .catalogue ul > li.in-view, .js-anim #hero.about .sect ul > li.in-view, .js-anim #hero.about .toolkits ul > li.in-view, .js-anim #hero.cs .info ul > li.in-view, .js-anim #hero.cs .sols > ul > li.in-view, .js-anim #hero.cs .gallery ul > li.in-view { opacity:1; transform:none; } /* Card icons — spring pop + one light sweep once the card lands. Animations (fill: backwards) rather than transitions, so the hover transform below takes over cleanly afterwards. ---------------------------------------------------------------------------*/ #hero .catalogue ul > li > i, #hero.about .sect ul > li > i, #hero.about .toolkits ul > li > i, #hero.cs .info ul > li > i, #hero.cs .sols > ul > li > i { overflow:hidden; } #hero .catalogue ul > li > i::before, #hero.about .sect ul > li > i::before, #hero.about .toolkits ul > li > i::before, #hero.cs .info ul > li > i::before, #hero.cs .sols > ul > li > i::before { z-index:1; position:absolute; top:0; right:0; bottom:0; left:0; background:linear-gradient(115deg, RGBA(255,255,255,0) 30%, RGBA(255,255,255,.5) 50%, RGBA(255,255,255,0) 70%); content:''; pointer-events:none; transform:translateX(-130%); } .js-anim #hero .catalogue ul > li > i, .js-anim #hero.about .sect ul > li > i, .js-anim #hero.about .toolkits ul > li > i, .js-anim #hero.cs .info ul > li > i, .js-anim #hero.cs .sols > ul > li > i { opacity:0; } .js-anim #hero .catalogue ul > li.in-view > i, .js-anim #hero.about .sect ul > li.in-view > i, .js-anim #hero.about .toolkits ul > li.in-view > i, .js-anim #hero.cs .info ul > li.in-view > i, .js-anim #hero.cs .sols > ul > li.in-view > i { opacity:1; animation:ml-pop .8s var(--ml-spring) calc(var(--d, 0s) + .22s) backwards; } .js-anim #hero .catalogue ul > li.in-view > i::before, .js-anim #hero.about .sect ul > li.in-view > i::before, .js-anim #hero.about .toolkits ul > li.in-view > i::before, .js-anim #hero.cs .info ul > li.in-view > i::before, .js-anim #hero.cs .sols > ul > li.in-view > i::before { animation:ml-shine 1s ease calc(var(--d, 0s) + .6s) 1 backwards; } /* Chips — toolkit badges pop in one by one -------------------------------------------------------------------------------*/ .js-anim #hero.cs .tools ul > li { opacity:0; } .js-anim #hero.cs .tools ul > li.in-view { opacity:1; animation:ml-pop .6s var(--ml-spring) var(--d, 0s) backwards; } /* Slide — link lists + solution steps -------------------------------------------------------------------------------*/ .js-anim #hero.cs .services nav a, .js-anim #hero.cs .sols ol > li { opacity:0; transform:translateX(-18px); transition:opacity .6s ease, transform .7s var(--ml-ease); transition-delay:var(--d, 0s); } .js-anim #hero.cs .services nav a.in-view, .js-anim #hero.cs .sols ol > li.in-view { opacity:1; transform:none; } /* Hover flair (pointer devices, motion OK) -------------------------------------------------------------------------------*/ @media (hover: hover) and (prefers-reduced-motion: no-preference) { #hero .catalogue ul > li > i, #hero.about .sect ul > li > i, #hero.about .toolkits ul > li > i, #hero.cs .info ul > li > i, #hero.cs .sols > ul > li > i { transition:transform .45s var(--ml-spring), filter .3s ease; } #hero .catalogue ul > li:hover > i, #hero.about .sect ul > li:hover > i, #hero.about .toolkits ul > li:hover > i, #hero.cs .info ul > li:hover > i, #hero.cs .sols > ul > li:hover > i { transform:translateY(-4px) scale(1.12) rotate(-7deg); filter:brightness(1.08); } #hero .catalogue ul > li:hover > i::before, #hero.about .sect ul > li:hover > i::before, #hero.about .toolkits ul > li:hover > i::before, #hero.cs .info ul > li:hover > i::before, #hero.cs .sols > ul > li:hover > i::before { transform:translateX(130%); transition:transform .8s ease; } #hero.cs .tools ul > li { transition:transform .4s var(--ml-spring), background-color .25s ease, color .25s ease; } #hero.cs .tools ul > li:hover { transform:translateY(-3px) scale(1.15) rotate(-6deg); background-color:#F8444F; color:#FFF; } } /* Icon shimmer — reusable. scripts/ml.js adds .ml-shine to the icon chips listed in ML_SHINE (pricing tiers, industry feature cards, homepage + city icons) and .ml-shine-host to their card. Nothing is hidden: the chip just catches one sweep of light as it scrolls in, and again on hover. -------------------------------------------------------------------------------*/ #hero .ml-shine { position:relative; overflow:hidden; } #hero .ml-shine::before { z-index:1; position:absolute; top:0; right:0; bottom:0; left:0; background:linear-gradient(115deg, RGBA(255,255,255,0) 30%, RGBA(255,255,255,.5) 50%, RGBA(255,255,255,0) 70%); content:''; pointer-events:none; transform:translateX(-130%); } .js-anim #hero .ml-shine.in-view::before { animation:ml-shine 1s ease calc(var(--d, 0s) + .35s) 1 backwards; } @media (hover: hover) and (prefers-reduced-motion: no-preference) { #hero .ml-shine { transition:transform .45s var(--ml-spring); } #hero .ml-shine-host:hover .ml-shine { transform:translateY(-3px) scale(1.1) rotate(-6deg); } #hero .ml-shine-host:hover .ml-shine::before { transform:translateX(130%); transition:transform .8s ease; } } @keyframes ml-pop { 0% { opacity:0; transform:scale(.3) rotate(-30deg); } 100% { opacity:1; transform:none; } } @keyframes ml-shine { 0% { transform:translateX(-130%); } 100% { transform:translateX(130%); } }