Add motion tokens and interaction choreography (D52)

[mrmarmac]

Implements "Warm Bauhaus" motion design and refined interaction feedback across the app, introducing CSS motion tokens, exit-commit animation patterns, and gesture support for touch swipe actions.

Summary

This PR adds a comprehensive motion system to the UI, replacing static interactions with choreographed animations that provide clear feedback for task state changes. It introduces two new custom hooks (useRowExit and useSwipeAction) to coordinate animations with state commits, ensuring visual feedback completes before data changes land.

Key Changes

Motion tokens & animations:

• Added CSS motion variables (--dur-quick, --dur-move, --ease-brisk, --ease-settle) to styles.css with a "crisp and physical" aesthetic (no bouncy springs)
• New colour wash tokens (--flash-sage, --hover-wash, --token-wash) for visual feedback across light/dark themes
• Keyframe animations for task completion (task-completing, task-strike), task entry (task-enter), and add-form feedback (add-sweep, token-pop)

Task row interactions (D52):

• Refactored .task structure: visible content now wraps in .task__surface to enable swipe translation without moving the row's border or background
• Added hover wash on ruled-paper rows (hover-capable media only)
• Completion choreography: checkbox tick draws, title strikes through, row washes sage, then slides right and fades before committing to Done
• Master rows now show a "Move to Today" button (.task__move) on hover/focus, with destination-coloured styling

Custom checkbox styling (D52/WP8):

• Replaced native checkbox appearance with custom-drawn tick animation
• Micro-interactions: grow on hover, compress on press
• Shared styling between task and subtask checkboxes with size variants

Add form enhancements (D52/WP7):

• Mirror overlay (.add__mirror) tracks input text with transparent glyphs, revealing an ochre pill (.add__token) under recognized date tokens
• Sweep animation on form commit as field clears
• Scroll syncing between input and mirror for long titles

Touch swipe gesture (D52):

• New useSwipeAction hook implements horizontal swipe-to-act for touch
• Today rows swipe left to return to Master; Master rows swipe right to move to Today
• Resistance damping when swiped in wrong direction or when action is disabled (recurring master with live day-copy)
• Fling-out animation with fallback timeout for commit

Exit-commit pattern (D52):

• New useRowExit hook opens an animation window for instant state reducers
• Marks row with animation class, waits for animation end, then commits state
• Fallback timeout ensures commit even if animationend event is dropped
• Used for task completion, move-to-column, and swipe-out actions

Column flash states:

• TodayColumn and DoneColumn now accept flashId prop to highlight newly arrived tasks
• Separate flash animations: task--flash (ochre, for created/moved tasks) and task--flash-done (sage, for completed tasks)
• Only 'created' tasks scroll into view; completed/moved rows land where user was looking

Drag handle & mark button feedback:

• Drag handle scales on hover with colour change
• Mark button (active toggle) scales on hover (1.35x) and press (0.85x)
• All transitions use motion tokens for consistency

Edit panel:

• Soft open animation (edit-panel-in) on mount
• Click-away closes and persists edits (blur-commits before close)
• Move button now shows destination text ("Today"/"Master") with destination-coloured tint

Implementation Details

• Motion tokens live in :root only (theme-independent, crisp aesthetic)
• All durations clamp to ~0 under prefers-reduced-motion, but animations still fire so commits aren't gated on visible duration
• Swipe gesture uses pointer events with intent threshold (12px horizontal, 1.5x ratio over vertical) to avoid hijacking vertical scroll
• Rubber-band resistance function for swipe

https://claude.ai/code/session_0138ccb6URP1H46oAjNs3Toz