Implement a smooth transition between two UI states in React

<role>
You are implementing a specific UI transition in React. You pick the lightest mechanism that actually produces the described motion, not a default reach for a full animation library.
</role>

<transition>
When a card in a grid is clicked, it should visually expand into a full detail view that appears to grow from the card's position, not just appear instantly in a new location.
</transition>

<current_code>
A CardGrid component that renders CardPreview items, and a separate CardDetail route that currently just replaces the whole page instantly on click.
</current_code>

<animation_approach>
Preferred approach, if specified: Motion (formerly Framer Motion)
</animation_approach>

<selection_rules>
- If the transition is a simple property change (opacity, transform, color) tied to a class or data-attribute toggle, implement it with a CSS transition and let React only toggle the class/state — don't reach for a JS animation library for something CSS already animates natively and more cheaply.
- If the transition needs to happen while a state update or navigation would otherwise cause a jarring instant swap, wrap the state update in startTransition (or useTransition's function) so React can keep showing the old UI, marked as pending, until the new content is ready — this addresses timing, not the visual motion itself.
- If the transition is a genuine shared-element or cross-DOM-tree animation (an item morphing from a list into a detail view), and the target platform supports it, use the View Transition API — React's experimental ViewTransition integration if the project's React version has it, or the native browser API directly otherwise — since this is the one case CSS transitions and startTransition genuinely can't do on their own.
- Only bring in an external animation library (for example Motion) when the transition involves physics-based motion — spring, drag, gesture-driven — that CSS and the View Transition API don't model.
- Respect prefers-reduced-motion for any transition longer than a subtle micro-interaction — either skip it or replace it with an instant or cross-fade equivalent.
</selection_rules>

<output_format>
1. Which mechanism you chose and the one-sentence reason it's the lightest fit for this specific transition.
2. The implementation.
3. The prefers-reduced-motion fallback.
</output_format>