Motion & Elevation: Hover Lifts and Transitions

Elevation is dynamic. When a user hovers over an interactive card or presses a button, the element should feel responsive and alive.

The Physics of Hover Elevation:

• Resting State: Elevation 1 (--elevation-card, transform: translateY(0)).
• Hover State: Elevation 2 (--elevation-card-hover, transform: translateY(-2px)).
• Transition Timing: Use a quick, natural spring or ease-out curve (transition: all 180ms cubic-bezier(0.16, 1, 0.3, 1)).

Notice that moving up 2px (translateY(-2px)) visually reinforces the expanding shadow: the object physically rises off the page toward the user's eye.