Underline slide in

.underline-slide {
  position: relative;
  text-decoration: none;
}

.underline-slide::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 100%;
  height: 2px;
  background: oklch(0.72 0.19 265);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
}

.underline-slide:hover::after {
  transform: scaleX(1);
}

@media (prefers-reduced-motion: reduce) {
  .underline-slide::after { transition: none; }
}

You are a senior frontend engineer building navigation hover effects.

Goal: An animated underline that slides in from the left on hover using a ::after pseudo-element — no JavaScript.

Technical constraints:
- Use ::after with position: absolute, bottom: -2px, width: 100%, height: 2px.
- Animate with transform: scaleX(0) → scaleX(1) for GPU-composited performance.
- Set transform-origin: left for left-to-right reveal.
- Use oklch() for the underline color, not hex or rgba().
- Transition: 0.3s ease for a smooth slide.
- Include @media (prefers-reduced-motion: reduce) to disable the transition.

Framework variant (pick one):
A) Vanilla CSS class applicable to any link or text element.
B) React component — accept color, thickness, and direction props.

Edge cases to handle:
- Parent must have position: relative for the pseudo-element to anchor correctly.
- Works on multi-word links — the underline spans the full text width.
- For right-to-left slide, change transform-origin to right.
- For center-out, use transform-origin: center.

Return CSS.