# Motion & animations (`animations.md`)

## Marketing (`layouts/app`)

| Utility | Parameters | Role |
| --- | --- | --- |
| `smooth-transition` | `all 0.4s cubic-bezier(0.4,0,0.2,1)` | Buttons, anchors, subtle hovers |
| `hover-lift` | Scale / translate interplay | Hover emphasis on selectable tiles |
| `animate-slide-up` | `slideUp 0.8s ease-out` | Entry transitions |
| `animate-fade-in` / `animate-scale-in` | Opacity/transform reveals | Lightweight entrance |

Scroll reveal `.reveal` waits for `.active` class toggled typically via intersection observers in page JS (`opacity/transform 0.8s ease-out`).

## Prefers-reduced-motion

Layouts neutralize animations (`.smooth-transition`, `.reveal`, scroll smoothness) respecting accessibility expectations.

Adding new animations **must**:

1. Respect the media query suppression pattern.
2. Avoid essential information encoded only via motion paths.

## Dashboard (`dashboard/leads/index.blade.php`)

| Utility | Timing |
| --- | --- |
| `animate-slide-up` | `slideUp 0.6s cubic-bezier(0.16,1,0.3,1)` |
| `animate-scale-in` | `scaleIn 0.4s same easing` |

Card-hover uses translateY elevation + swapped shadow curves.

Sticky CTA on marketing uses `transition-transform duration-300 ease-out` script toggling class `translate-y-full`.

### Performance guidance

Defer large JS-driven parallax—not present canonically today. Maintain GPU-friendly transforms (`translate`, `scale`) vs layout-thrashing width animations.