/* GENERATED FILE. DO NOT EDIT.
 * Copied verbatim by scripts/sync-tokens.mjs from ../site/design-system/motion.css.
 * The checkout must move the way the site moves.
 */
/* ============================================================================
   MOTION, the fifth foundation layer.
   ----------------------------------------------------------------------------
   Colour, type, surface and the button primitive all live in one place and flow
   one way into the checkout. Motion did not, and it showed. Measured 14 Aug:

     the site       cubic-bezier(.22,1,.36,1), written out 214 times, no token
     the checkout   plain `ease` at .12s / .15s / .18s, 16 transitions, and NOT
                    ONE of them using the site's curve
     the outcome    a third curve I invented the same afternoon

   Three motion languages in one product, none of them named. Amr: "did u
   consider all the animations and the transitions so we have the same vibe of
   the homepage and marketing landing pages." No, and this is why.

   THE CURVE IS THE SIGNATURE. cubic-bezier(.22,1,.36,1) is a hard ease-out:
   almost all of the distance is covered in the first third, then it settles.
   That is what makes the site feel like things ARRIVE rather than drift, and it
   is the single most recognisable thing about how this brand moves. It belongs
   in one declaration, not in 214.

   THE THREE DURATIONS are not a scale for its own sake, they are three
   different jobs:
     --dur-1  something answering your pointer. Must feel instant.
     --dur-2  something changing state on its own: a panel opening, a mark
              landing. Long enough to be read as a change.
     --dur-3  something arriving from nowhere, on scroll or on load.

   THE REVEAL is the site's whole feel: content sits 28px low and transparent,
   then rises. Siblings are staggered by document position, 90ms apart, capped
   at four, so a long list walks rather than appearing as one block. Copied here
   as numbers so the checkout can do the same thing without guessing.

   EVERY CONSUMER MUST HONOUR prefers-reduced-motion. These tokens do not
   enforce it; the stylesheet that uses them does.
   ========================================================================= */
:root {
  /* The signature. Named --ease because it is THE ease of this brand, and a
     second one would need a reason nobody has yet. */
  --ease: cubic-bezier(.22, 1, .36, 1);
  /* For a thing leaving, where the settle is wrong: it should just go. */
  --ease-out: cubic-bezier(.4, 0, 1, 1);

  --dur-1: .2s;   /* pointer: hover, focus, press */
  --dur-2: .45s;  /* state: open, close, land */
  --dur-3: .7s;   /* arrival: reveal on scroll or on load */

  --rise: 28px;   /* how far an arriving block travels */
  --stagger: 90ms;/* between siblings arriving together, capped at 4 */
}