/* ═══════════════════════════════════════════════════════════════════════════ TRUEDRIVE MOTION METHOD v1 --------------------------------------------------------------------------- One curve, one distance, one duration, one stagger. Everything on every TrueDrive build moves the same way, which is what makes it read as designed rather than decorated. The rules: 1. Motion only ever confirms a relationship — content arriving, a control responding. Nothing moves for its own sake. 2. One easing curve. Never linear, never bounce. 3. Content rises, it never slides sideways, spins, or scales in. 4. Nothing animates longer than 700ms; nothing waits longer than 420ms. 5. Everything is opacity + transform only. No layout properties, ever — those cost a reflow per frame and stutter on a mid-range Android. 6. prefers-reduced-motion removes motion, never content. Usage — declarative, no per-element JS: data-mk-reveal rise + fade when it enters data-mk-reveal="left" from the left (use sparingly, for images) data-mk-reveal="right" from the right data-mk-reveal="scale" settle in from 98% (hero art only) data-mk-delay="2" delay in stagger steps (1 = 70ms) data-mk-stagger stagger this element's children automatically data-mk-count="22" count up to a number when it enters ═══════════════════════════════════════════════════════════════════════ */ :root{ --mk-ease: cubic-bezier(.2,.8,.2,1); --mk-ease-in: cubic-bezier(.4,0,.2,1); --mk-dur: .7s; --mk-dur-fast:.32s; --mk-rise: 18px; --mk-shift: 26px; --mk-step: 70ms; } /* ── reveal ────────────────────────────────────────────────────────────── Hidden state is only applied once JS confirms it can observe. Without .mk-motion on nothing is hidden, so a JS failure leaves a fully readable page instead of a blank one. This is the single most important line in the file. */ .mk-motion [data-mk-reveal]{ opacity:0; transform:translate3d(0,var(--mk-rise),0); transition:opacity var(--mk-dur) var(--mk-ease), transform var(--mk-dur) var(--mk-ease); transition-delay:calc(var(--mk-step) * var(--mk-d,0)); will-change:opacity,transform; } .mk-motion [data-mk-reveal="left"] { transform:translate3d(calc(var(--mk-shift) * -1),0,0); } .mk-motion [data-mk-reveal="right"]{ transform:translate3d(var(--mk-shift),0,0); } .mk-motion [data-mk-reveal="scale"]{ transform:scale(.98); } .mk-motion [data-mk-reveal="fade"] { transform:none; } .mk-motion [data-mk-reveal].is-in{ opacity:1; transform:none; will-change:auto; } /* ── stagger ───────────────────────────────────────────────────────────── Children inherit the reveal and step their own delay. Capped at 8 so a long list never leaves the reader waiting on the last item. */ .mk-motion [data-mk-stagger] > *{ opacity:0; transform:translate3d(0,var(--mk-rise),0); transition:opacity var(--mk-dur) var(--mk-ease), transform var(--mk-dur) var(--mk-ease); } .mk-motion [data-mk-stagger].is-in > *{ opacity:1; transform:none; } .mk-motion [data-mk-stagger].is-in > *:nth-child(1){ transition-delay:calc(var(--mk-step) * 0); } .mk-motion [data-mk-stagger].is-in > *:nth-child(2){ transition-delay:calc(var(--mk-step) * 1); } .mk-motion [data-mk-stagger].is-in > *:nth-child(3){ transition-delay:calc(var(--mk-step) * 2); } .mk-motion [data-mk-stagger].is-in > *:nth-child(4){ transition-delay:calc(var(--mk-step) * 3); } .mk-motion [data-mk-stagger].is-in > *:nth-child(5){ transition-delay:calc(var(--mk-step) * 4); } .mk-motion [data-mk-stagger].is-in > *:nth-child(6){ transition-delay:calc(var(--mk-step) * 5); } .mk-motion [data-mk-stagger].is-in > *:nth-child(n+7){ transition-delay:calc(var(--mk-step) * 6); } /* ── response ──────────────────────────────────────────────────────────── Controls acknowledge the pointer with the same curve, at half duration. Only where a hover actually exists — a phone gets no lift, which is why the sticky states never got stuck on touch in earlier rounds. */ @media (hover:hover){ .mk-lift{ transition:transform var(--mk-dur-fast) var(--mk-ease), box-shadow var(--mk-dur-fast) var(--mk-ease); } .mk-lift:hover{ transform:translateY(-3px); } } /* ── reduced motion ────────────────────────────────────────────────────── Content is revealed, transitions are removed. Nothing is hidden, nothing is lost, and the marquees and counters stop. */ @media (prefers-reduced-motion:reduce){ .mk-motion [data-mk-reveal], .mk-motion [data-mk-stagger] > *{ opacity:1!important; transform:none!important; transition:none!important; } .mk-credbar__track{ animation:none!important; } .mk-lift:hover{ transform:none!important; } html{ scroll-behavior:auto!important; } }