Outline Text

Create a React + TypeScript component `OutlineText` rendering a giant outlined headline whose stroke draws itself letter by letter, then fills with a violet gradient on hover.

Implementation (SVG-based so the stroke can truly animate):
- Render an `<svg>` with a `<text>` node using `fill="none"`, `stroke="url(#outlineGrad)"`, `strokeWidth={1.5}`, `fontSize` driven by a `viewBox` so it scales responsively (`preserveAspectRatio="xMidYMid meet"`, `width: 100%`).
- Define a `<linearGradient id="outlineGrad">` from `#a78bfa` to `#f0abfc`.
- Draw animation: use `motion.text` with `strokeDasharray` / `strokeDashoffset` — measure the path length with `getComputedTextLength()` in a `useLayoutEffect`, set `strokeDasharray` to that length and animate `strokeDashoffset` from length to 0 over 2.2s with `ease: 'easeInOut'`, triggered by `useInView({ once: true })`.
- Hover fill: animate `fillOpacity` 0 -> 1 with the same gradient as `fill`, 400ms ease-out, plus a soft `filter: drop-shadow(0 0 24px rgba(167,139,250,0.5))`.
- Background `#07040f`; center the SVG; add a faint violet radial glow behind.