:root {
  /* Durations */
  --motion-instant: 90ms;
  --motion-fast: 150ms;
  --motion-base: 220ms;
  --motion-slow: 320ms;
  --motion-expressive: 440ms;

  /* Easings */
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-enter: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-exit: cubic-bezier(0.4, 0, 1, 1);
  --ease-emphasized: cubic-bezier(0.2, 0.8, 0.2, 1);

  /* Distances */
  --motion-shift-xs: 2px;
  --motion-shift-sm: 4px;
  --motion-shift-md: 8px;
  --motion-shift-lg: 16px;

  /* Scale */
  --motion-hover-scale: 1.02;
  --motion-press-scale: 0.985;
}

/* Opt-in utility. Do not use this as an excuse to animate everything. */
.motion-transform {
  transition:
    transform var(--motion-fast) var(--ease-standard),
    opacity var(--motion-fast) var(--ease-standard);
}

@media (prefers-reduced-motion: reduce) {
  .motion-transform {
    transition: opacity 80ms linear;
    transform: none !important;
  }
}