/* Tempo tokens for pages styled by CSS alone: the middle of each tempo's range from Sonder's motion playbook.
   Put data-tempo on <html> (drift, calm, precise or bounce; calm when absent) and use the tokens in transitions:
     transition: opacity var(--t-reveal) var(--t-ease), transform var(--t-reveal) var(--t-ease);
   --t-k scales every duration (set it on an element for a slower or quicker version of the same feel). With
   reduced motion every duration is 0, so transitions land on their finished state at once. tempo.js gives the
   same values at any point on the range, for the project's Motion setting. */

:root {
  --t-k: 1;
  --t-reveal-base: 1000ms; --t-hover-base: 300ms; --t-stagger-base: 105ms;
  --t-ease: cubic-bezier(0.16, 1, 0.3, 1); --t-press: 0.97;
}
[data-tempo="drift"] { --t-reveal-base: 1600ms; --t-hover-base: 500ms; --t-stagger-base: 140ms; --t-ease: cubic-bezier(0.16, 1, 0.3, 1); }
[data-tempo="calm"] { --t-reveal-base: 1000ms; --t-hover-base: 300ms; --t-stagger-base: 105ms; --t-ease: cubic-bezier(0.16, 1, 0.3, 1); }
[data-tempo="precise"] { --t-reveal-base: 500ms; --t-hover-base: 150ms; --t-stagger-base: 50ms; --t-ease: cubic-bezier(0.2, 0, 0, 1); }
[data-tempo="bounce"] { --t-reveal-base: 650ms; --t-hover-base: 210ms; --t-stagger-base: 70ms; --t-ease: cubic-bezier(0.34, 1.56, 0.64, 1); --t-press: 0.94; }

:root, [data-tempo] {
  --t-reveal: calc(var(--t-reveal-base) * var(--t-k));
  --t-hover: calc(var(--t-hover-base) * var(--t-k));
  --t-stagger: calc(var(--t-stagger-base) * var(--t-k));
}
@media (prefers-reduced-motion: reduce) {
  :root, [data-tempo] { --t-k: 0; }
}