# Motion and interaction

## Character

Use fluid, slightly viscous motion that makes work and state legible without moving layout. Avoid bounce, elastic easing, abrupt unmounts, and decorative page choreography.

Use `cubic-bezier(0.16, 1, 0.3, 1)` for arrivals and interaction feedback.

- hover and press: 180-300ms;
- popover/tooltip: 90-180ms;
- panel reveal: 420-600ms;
- state color and glow: 600-900ms;
- progress or numeric tween: about 900ms.

## State controls

- Transition inactive gray to the route accent slowly when a service becomes active, and back to gray when stopped.
- Animate icon color, localized light, and SVG shadow together while keeping the hit target fixed.
- Use a short `scale(0.97)` press followed by a slower release.
- Show checking and running work with restrained motion that finishes cleanly; do not stop spinners or cycles at arbitrary coordinates.

## Changing content

- Crossfade alternate labels inside one fixed slot. Do not replace text in normal flow when its length can move the interface.
- Animate only what changed. Unchanged labels, icons, surrounding rows, and route nodes stay fixed.
- Update data immediately when it arrives; finishing a decorative cycle must not delay the result.
- Repeated background polling updates quietly and does not replay entrance choreography.
- Keep mode selectors outside the keyed content they replace. Let the new content enter with a short directional fade and blur while focus remains on the selected mode.
- For user-triggered sorting, fade and lightly blur the reordered list as one surface; row stagger stays bounded and saved data order does not change.

## Lists and disclosures

- Reveal dynamic rows with opacity, light blur, and a small transform.
- On hover, let a row lift one or two pixels and reveal a restrained local surface/light; keep resting rows visually flat.
- Animate status dots through color, light, and a small scale change instead of animating a surrounding badge or border.
- Keep departing rows mounted until their exit animation completes; remove immediately under reduced motion.
- Bound list stagger to 60-100ms and never make interaction latency grow with list length.
- Tooltips appear quickly above the trigger as independent translucent surfaces and never inherit trigger transforms or filters.

## Reduced motion

Under `prefers-reduced-motion: reduce`, remove transforms, filters, transitions, and keyframes while preserving final state, focus, contrast, status wording, and all functionality.