/* ============================================================ mx motion language v1.0, DARWIN newsroom Dependency-free. Compositor only: transform + opacity. Primary engine: CSS scroll-driven animations (@supports gated). Fallback: motion.js adds .mx-jsreveal to and .mx-in on entry (IntersectionObserver, Firefox and older browsers). Every decorative effect lives under prefers-reduced-motion: no-preference. Base styles are the finished end state, so no-JS and reduced-motion readers see the full page with zero hidden content. Class contract .mx-reveal rise on entry, any block .mx-fig figure reveal: rise plus image de-zoom .mx-card hover physics: lift plus inner nudge .mx-bar bar row (gets .mx-in in the fallback path) .mx-barfill bar sweep via scaleX (width is set once in JS) .mx-in fallback end state, added by motion.js .mx-nav-solid nav state past 40px, toggled by motion.js .mx-boot hook for the hero load moment .mx-jsreveal hook for the fallback reveal path ============================================================ */ /* Keyframes are inert until referenced; references below are all gated under no-preference. */ @keyframes mx-ch-in{from{opacity:0;transform:translateY(115%)}to{opacity:1;transform:none}} @keyframes mx-fade-up{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}} @keyframes mx-rise{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}} @keyframes mx-unzoom{from{transform:scale(1.07)}to{transform:scale(1)}} @keyframes mx-fillx{from{transform:scaleX(0)}to{transform:scaleX(1)}} @keyframes mx-hero-parallax{from{transform:translateY(-3%)}to{transform:translateY(9%)}} /* Base: finished end states. Nothing hidden by default. */ .mx-barfill{transform:scaleX(1);transform-origin:left center} /* Hero load moment (homepage). motion.js splits #heroWord into .ch spans and adds .mx-boot to before first paint. */ @media (prefers-reduced-motion: no-preference){ .mx-boot .hero-word .ch{display:inline-block;animation:mx-ch-in .9s cubic-bezier(.16,1,.3,1) both} .mx-boot .hero-word .ch:nth-child(1){animation-delay:.15s} .mx-boot .hero-word .ch:nth-child(2){animation-delay:.205s} .mx-boot .hero-word .ch:nth-child(3){animation-delay:.26s} .mx-boot .hero-word .ch:nth-child(4){animation-delay:.315s} .mx-boot .hero-word .ch:nth-child(5){animation-delay:.37s} .mx-boot .hero-word .ch:nth-child(6){animation-delay:.425s} .mx-boot .hero-word .ch:nth-child(7){animation-delay:.48s} .mx-boot .hero-word .ch:nth-child(8){animation-delay:.535s} .mx-boot .hero-kicker{animation:mx-fade-up .8s ease .9s both} .mx-boot .hero-sub{animation:mx-fade-up .8s ease 1.03s both} .mx-boot .hero-meta{animation:mx-fade-up .8s ease 1.16s both} } /* Scroll-driven primary: view timelines per element, compositor only. Ranges are entry-based so even viewport-taller elements finish revealed once their top arrives. Fill mode is backwards (not both) so the finished state falls back to the base style and hover transitions keep working after the reveal completes. */ @supports (animation-timeline: view()){ @media (prefers-reduced-motion: no-preference){ .mx-reveal{animation:mx-rise 1s linear backwards;animation-timeline:view();animation-range:entry 0% entry 100%} .mx-fig{animation:mx-rise 1s linear backwards;animation-timeline:view();animation-range:entry 0% entry 100%} .mx-fig img{animation:mx-unzoom 1.2s linear backwards;animation-timeline:view();animation-range:entry 0% entry 100%} .mx-barfill{animation:mx-fillx 1s linear backwards;animation-timeline:view();animation-range:entry 10% entry 100%} } } /* Hero image drift on the root scroller, same -3% to +9% travel the old scrubbed tween used, transform only. */ @supports (animation-timeline: scroll()){ @media (prefers-reduced-motion: no-preference){ #heroImg{animation:mx-hero-parallax 1s linear backwards;animation-timeline:scroll();animation-range:0 110svh} } } /* Fallback path (no CSS scroll timelines): from-states apply only when motion.js has added .mx-jsreveal, so no-JS browsers never see hidden content. .mx-in is added by IO on entry. */ @media (prefers-reduced-motion: no-preference){ .mx-jsreveal .mx-reveal{opacity:0;transform:translateY(26px)} .mx-jsreveal .mx-fig{opacity:0;transform:translateY(24px)} .mx-jsreveal .mx-fig img{transform:scale(1.07)} .mx-jsreveal .mx-barfill{transform:scaleX(0)} .mx-reveal,.mx-fig{transition:opacity .7s ease,transform .7s cubic-bezier(.16,1,.3,1)} .mx-fig img{transition:transform 1.1s cubic-bezier(.16,1,.3,1)} .mx-barfill{transition:transform 1.3s cubic-bezier(.16,1,.3,1)} .mx-in.mx-reveal,.mx-in.mx-fig{opacity:1;transform:none} .mx-fig.mx-in img{transform:scale(1)} .mx-bar.mx-in .mx-barfill{transform:scaleX(1)} } /* Card hover physics: lift the card, nudge the arrow or title. Placed after the reveal rules so hover wins once revealed. */ @media (prefers-reduced-motion: no-preference){ .mx-card{transition:transform .35s cubic-bezier(.16,1,.3,1)} .mx-card:hover{transform:translateY(-5px) scale(1.012)} .mx-card .sc-cta,.mx-card .pg-t{transition:transform .3s ease} .mx-card:hover .sc-cta{transform:translateX(5px)} .sh{transition:transform .25s ease} .sh:hover{transform:translateY(-2px)} } /* Nav: state class plus underline micro-interactions. */ nav.mx-nav-solid{background:rgba(4,7,10,.98)} nav .links a{position:relative} @media (prefers-reduced-motion: no-preference){ nav .links a::after{content:"";position:absolute;left:0;right:0;bottom:-5px;height:2px; background:var(--teal,#2de1c2);transform:scaleX(0);transform-origin:left center; transition:transform .3s ease} nav .links a:hover::after,nav .links a.active::after{transform:scaleX(1)} } /* Smooth anchors, motion-safe. Pages already declare smooth; the reduce block below reverts it because this stylesheet loads last. */ @media (prefers-reduced-motion: no-preference){html{scroll-behavior:smooth}} @media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} .ticker-track{animation:none} }