# Micro-animations & interactions

Small, tasteful motion that makes daysout feel delightful and premium —
never gratuitous, always fast, and mobile-performant. Respect
`prefers-reduced-motion` (disable non-essential motion). Use CSS
transitions/transforms (GPU-friendly); avoid layout-thrashing animation.

## Signature moments
- **Favourite heart ❤️** — tap = a satisfying pop + fill (scale 1→1.3→1,
  ~250ms, ease-out-back) + a tiny burst. The hero micro-interaction.
- **Card hover/press** — gentle lift (translateY -2px + soft shadow) on
  desktop hover; a subtle scale-down on mobile press (active state).
- **"Use my location" 📍** — a soft pulsing ring while locating, then the
  cards slide/fade into distance order.
- **Filter chips** — selected chip springs (scale + colour fill); results
  cross-fade/stagger in (50ms stagger per card) rather than hard-swap.

## Loading & transitions
- **Skeleton shimmer** cards while data loads (no spinners on the home page).
- **Page transitions** — quick fade/slide between routes (SvelteKit
  view-transitions where supported).
- **Image fade-in** — attraction photos fade from a blurred placeholder
  (LQIP) as they load — feels Airbnb-smooth.
- **Carousel rows** — momentum horizontal scroll with snap on mobile.

## Feedback
- **Toasts** slide up from the bottom (favourite saved, error) and auto-dismiss.
- **Buttons** — subtle press state + a brief loading spinner inline on submit.
- **Map pins** — drop-in animation; selected pin bounces once.
- **Pull-to-refresh** on lists (mobile).

## Principles
- Fast (150–300ms), purposeful, never blocks input.
- Tokens-driven durations/easings (design-system discipline).
- `prefers-reduced-motion: reduce` → swap motion for instant state changes.
- Test on a mid-range phone; motion must not cost scroll smoothness.