/* Optimal interface motion is 150–500ms. No bounce, no motion blur, no scroll hacking. */
:root{
  --duration-short:150ms;  /* @kind other */
  --duration-medium:250ms; /* @kind other */
  --duration-long:400ms;   /* @kind other */
  --duration-stagger:24ms; /* @kind other */ /* between items in a list */

  --ease-linear:cubic-bezier(0,0,1,1); /* @kind other */ /* colour/opacity only */
  --ease-in:cubic-bezier(.4,0,1,1); /* @kind other */ /* leaving for good */
  --ease-out:cubic-bezier(0,0,.5,1); /* @kind other */ /* entering from off-screen */
  --ease-in-out:cubic-bezier(.4,0,.5,1); /* @kind other */ /* moving within the viewport */

  --transition-control:background-color var(--duration-short) var(--ease-linear),border-color var(--duration-short) var(--ease-linear),color var(--duration-short) var(--ease-linear),box-shadow var(--duration-short) var(--ease-linear); /* @kind other */
  --transition-surface:transform var(--duration-medium) var(--ease-in-out),box-shadow var(--duration-medium) var(--ease-in-out); /* @kind other */
}
@media (prefers-reduced-motion:reduce){:root{--duration-short:0ms; /* @kind other */ --duration-medium:0ms; /* @kind other */ --duration-long:0ms; /* @kind other */ --duration-stagger:0ms; /* @kind other */}}