/* Motion is quiet: short fades and small translations. No bounce, no spring, no scale-up
   entrances. Hover is a colour or opacity shift; press is a colour shift, never a shrink. */

:root {
  --duration-instant: 100ms; /* @kind other */
  --duration-fast: 150ms; /* @kind other */
  --duration-base: 200ms; /* @kind other */ /* DESIGN.md: background 200ms ease-out */
  --duration-slow: 320ms; /* @kind other */
  --duration-reveal: 600ms; /* @kind other */ /* scroll-in fades */

  --ease-standard: ease-out; /* @kind other */
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); /* @kind other */
  --ease-emphasized: cubic-bezier(0.22, 1, 0.36, 1); /* @kind other */

  --transition-color: color var(--duration-base) var(--ease-standard), background-color var(--duration-base) var(--ease-standard), border-color var(--duration-base) var(--ease-standard); /* @kind other */
  --transition-transform: transform var(--duration-base) var(--ease-emphasized); /* @kind other */
  --transition-fade: opacity var(--duration-base) var(--ease-standard); /* @kind other */

  --hover-lift: translateY(-2px); /* @kind other */
  --hover-nudge-x: 4px; /* @kind spacing */
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-instant: 0ms; /* @kind other */
    --duration-fast: 0ms; /* @kind other */
    --duration-base: 0ms; /* @kind other */
    --duration-slow: 0ms; /* @kind other */
    --duration-reveal: 0ms; /* @kind other */
    --hover-lift: none; /* @kind other */
  }
}