/* The page's one family of motion: "gather and settle" (docs/marketing/inside-research/transitions.md).
   Every section entrance uses these tokens, so the page moves one way: pieces start away from where they belong
   and come together with the same spring, distances and scroll ranges. Sections only pick keyframes.

   Rules every entrance follows:
   - The finished layout is the default CSS. Motion lives only inside
     @supports (animation-timeline: view()) and @media (prefers-reduced-motion: no-preference),
     so browsers without scroll-driven animations, and Reduce Motion, just show the final state.
   - Firefox (no animation-timeline yet): motion.js adds .mo-in once a [data-mo] block enters, which plays the same
     keyframes once (not scrubbed). Don't hide anything waiting for that class: start states live inside the
     @supports / .mo-in rules only.
   - Animate transform, opacity and clip-path. Blur sparingly and only on small things.
   - No exit animations (scrolling back up never shows empty space). */
:root {
  --mo-ease: linear(0, .32 8%, .64 17%, .86 27%, 1.005 38%, 1.04 47%, 1.02 60%, 1);  /* the settle: a small overshoot */
  --mo-ease-soft: cubic-bezier(.22, 1, .36, 1);                                    /* for fades and curtains */
  --mo-dist: 48px;        /* how far a piece travels to its place */
  --mo-dist-far: 120px;   /* columns, sides */
  --mo-dur: 900ms;        /* the one-shot fallback's length (Firefox) */
  --mo-stagger: 90ms;     /* between sibling pieces in the fallback */
  --mo-range: entry 0% entry 70%;        /* arrive while entering the screen */
  --mo-range-late: entry 25% cover 45%;  /* arrive a little later (windows, diagrams) */
}