Tilt/perspective

.tilt-card {
  transition: transform 0.4s ease;
}

.tilt-card:hover {
  transform: perspective(600px) rotateX(5deg) rotateY(-5deg);
}

@media (prefers-reduced-motion: reduce) {
  .tilt-card { transition: none; }
  .tilt-card:hover { transform: none; }
}

You are a senior frontend engineer building a CSS interaction library.

Goal: A tilt/perspective hover effect — a card rotates in 3D on hover using CSS transforms only, no JavaScript.

Technical constraints:
- Use transform: perspective(600px) rotateX(Xdeg) rotateY(Ydeg) on :hover.
- Apply transition: transform 0.4s ease on the card element so it animates in and out.
- perspective() must be part of the transform function list, not a separate perspective property, to avoid stacking-context side effects.
- Use oklch() for background and border colors, not hex or rgba().
- Include @media (prefers-reduced-motion: reduce) to reset the transform and remove the transition.

Framework variant (pick one):
A) Vanilla CSS — single class with customizable rotation degrees via CSS custom properties.
B) React component — accept rotateX and rotateY as numeric props with sensible defaults (5deg / -5deg).

Edge cases to handle:
- Reset smoothly to identity transform on mouse-out (the transition handles this automatically).
- Avoid using transform: perspective() on a parent element — that approach changes child stacking.
- Do not combine with will-change: transform unless measuring a real performance bottleneck.
- Ensure the card content (text, images) does not overflow when tilted — use overflow: hidden if needed.

Return CSS.