/* ============================================================
   FlowLocal — motion tokens
   Shared by every concept site under /work/.

   One easing curve, used everywhere. That consistency is what
   reads as deliberate; a page with four different curves on it
   reads as assembled. Durations are graded by how far a thing
   travels, not by what kind of element it is.

   Loaded BEFORE each site's own stylesheet so a site can
   override any of it without editing this file.
   ============================================================ */

:root{
  /* The curve. Decelerating, slightly long tail — things arrive
     and settle rather than stopping dead. */
  --ease:       cubic-bezier(.22, .61, .36, 1);

  /* Sharper, for things that should feel mechanical rather than
     physical: a hover state, a colour change. */
  --ease-snap:  cubic-bezier(.4, 0, .2, 1);

  --dur-tap:    .16s;   /* colour, background — no travel */
  --dur-hover:  .3s;    /* small movement, a lift or a scale */
  --dur-move:   .5s;    /* an element repositioning */
  --dur-reveal: .7s;    /* something entering the page */

  --stagger:    70ms;   /* between siblings in a group */
}

/* The OS setting wins over every duration above. Kept here so a
   site cannot forget it — it inherits the guard with the tokens. */
@media (prefers-reduced-motion: reduce){
  :root{
    --dur-tap: .001s;
    --dur-hover: .001s;
    --dur-move: .001s;
    --dur-reveal: .001s;
    --stagger: 0ms;
  }
}