design-system: motion system that respects prefers-reduced-motion

[joelpeace48-cell]

Problem

The landing page renders animated decoration — .landing-orbs plus the hero
treatment — with no prefers-reduced-motion handling anywhere in
app/globals.css. For users with vestibular disorders, continuous background
motion causes real symptoms, and honouring the preference is a WCAG 2.1
requirement rather than a nicety.

What to do

• Add a global @media (prefers-reduced-motion: reduce) block that disables
  decorative animation and reduces transitions to near-instant.
• Tokenise duration and easing (--motion-fast, --motion-base,
  --motion-ease) so motion is consistent and adjustable in one place.
• Keep animation to transform and opacity — animating layout properties
  causes reflow and drops frames.
• Distinguish decorative motion (disable entirely) from functional motion such
  as a menu transition (shorten, but keep the affordance).

Acceptance criteria

• prefers-reduced-motion honoured globally
• Motion tokens defined and used
• Animations limited to compositor-friendly properties
• Decorative and functional motion handled differently

Notes

The distinction matters: removing a menu's transition entirely can make the
interface feel broken, whereas removing drifting background orbs simply makes
it calmer.