/* MSIIA Methodology · Framer Motion (vanilla-DOM) layer · v20260719-motion-v1 * * Gating class: `.mx-motion-active` is added on by * assets/pages/methodology-motion.js *only after* the framer-motion module * has loaded. If the module fails to load, class is never added and every * .mx-reveal / .mx-stagger element stays in its natural readable state. * * Capture-safe rule (kept from the previous system): opacity never drops to 0 * on any content element. Reveals use transform + filter only. Ensures * screenshot / print / no-JS fallback pathways still render the page. * * Reduced-motion: users with `prefers-reduced-motion: reduce` bypass the * hidden initial state entirely — content displays immediately, but the JS * module still runs subnav + scrollspy logic without transforms. */ /* ------------------------------------------------------------------------ * 01 · Initial hidden states (only when motion runtime is active) * ------------------------------------------------------------------------ */ .mx-motion-active .mx-reveal:not(.is-in){ transform: translateY(14px); filter: blur(4px); will-change: transform, filter; } .mx-motion-active .mx-stagger:not(.is-in) > *{ transform: translateY(12px); filter: blur(3px); will-change: transform, filter; } /* Hero entrance elements start slightly translated. The JS module drives * their reveal via framer-motion animate() with the .d1..d5 delay ladder. */ .mx-motion-active .mx-hero-in:not(.is-in){ transform: translateY(15px); filter: blur(5px); will-change: transform, filter; } /* Override the CSS-only reveal transitions the legacy sheet used to fire. * The JS module now drives these transitions directly via WAAPI, so the * .is-in transition here is a safety net for elements the observer misses * (deep-links, print, resize, back/forward cache restore). */ .mx-motion-active .mx-reveal.is-in, .mx-motion-active .mx-stagger.is-in > *, .mx-motion-active .mx-hero-in.is-in{ transform: none; filter: blur(0); will-change: auto; } .mx-motion-active .mx-reveal.is-in{ transition: transform .72s cubic-bezier(.16,1,.3,1), filter .72s cubic-bezier(.16,1,.3,1); } .mx-motion-active .mx-stagger.is-in > *{ transition: transform .6s cubic-bezier(.16,1,.3,1), filter .6s cubic-bezier(.16,1,.3,1); } /* Suppress the legacy CSS blur that fires against .mx-js .mx-reveal — the * new motion module owns these states while active. */ html.mx-motion-active .mx-js .mx-reveal{filter: none;} html.mx-motion-active .mx-js .mx-stagger > *{filter: none;} /* ------------------------------------------------------------------------ * 02 · Pipeline · framer-motion drives fill height + node lit/done classes * ------------------------------------------------------------------------ */ .mx-motion-active .mx-pipe-fill{ transition: height .18s linear; /* light smoothing on scroll-linked drives */ will-change: height; } .mx-motion-active .mx-stage-node{ transition: border-color .5s cubic-bezier(.22,.61,.36,1), box-shadow .5s cubic-bezier(.22,.61,.36,1), transform .35s cubic-bezier(.22,.61,.36,1); } .mx-motion-active .mx-stage.is-lit .mx-stage-node{ transform: scale(1.045); } .mx-motion-active .mx-stage.is-done .mx-stage-node{ transform: scale(1); } /* ------------------------------------------------------------------------ * 03 · Subnav progress · smoothed by requestAnimationFrame in JS * ------------------------------------------------------------------------ */ .mx-motion-active .mx-subnav-progress{ transition: width .16s linear; will-change: width; } .mx-motion-active .mx-subnav a{ transition: color .3s ease, text-shadow .3s ease; } /* ------------------------------------------------------------------------ * 04 · Card micro-interaction (touch-safe: hover only on fine pointer) * ------------------------------------------------------------------------ */ @media (hover: hover) and (pointer: fine){ .mx-motion-active .mx-card{ transition: transform .35s cubic-bezier(.22,.61,.36,1), border-color .35s ease, box-shadow .35s ease; } .mx-motion-active .mx-card:hover{ transform: translateY(-3px); } } /* ------------------------------------------------------------------------ * 05 · Reduced motion · content is immediate, no transforms, no blur * ------------------------------------------------------------------------ */ @media (prefers-reduced-motion: reduce){ .mx-motion-active .mx-reveal, .mx-motion-active .mx-stagger > *, .mx-motion-active .mx-hero-in{ transform: none !important; filter: none !important; transition: none !important; will-change: auto !important; } .mx-motion-active .mx-stage-node{ transform: none !important; transition: none !important; } .mx-motion-active .mx-subnav-progress, .mx-motion-active .mx-pipe-fill{ transition: none !important; } .mx-motion-active .mx-card:hover{ transform: none !important; } } /* ------------------------------------------------------------------------ * 06 · Print · reveal everything, disable ambient loops * ------------------------------------------------------------------------ */ @media print{ .mx-motion-active .mx-reveal, .mx-motion-active .mx-stagger > *, .mx-motion-active .mx-hero-in{ transform: none !important; filter: none !important; } }