Split Color Text

Create a React + TypeScript component `SplitText` that renders a huge word cut horizontally in half: the top half stays white, the bottom half is a violet gradient — with the two halves sliding apart then snapping together on entrance.

Implementation:
- Wrapper `relative inline-block select-none`, font `font-black uppercase text-7xl md:text-9xl tracking-tighter leading-none`.
- Render the SAME text twice, stacked absolutely:
  - Top layer: `text-white`, clipped with `clipPath: 'inset(0 0 50% 0)'`.
  - Bottom layer: `bg-clip-text text-transparent bg-gradient-to-r from-violet-500 to-fuchsia-500`, clipped with `clipPath: 'inset(50% 0 0 0)'`.
- A third invisible copy (`opacity-0`) provides natural layout size so the absolute layers align pixel-perfect.
- Entrance with Framer Motion: top layer animates `y: -40 -> 0`, bottom layer `y: 40 -> 0`, both `opacity 0 -> 1`, duration 0.9, `ease: [0.22,1,0.36,1]`, triggered by `whileInView` once.
- Hover: on the wrapper, the two halves separate by 6px (`whileHover` on a parent with variants so both children react) and a thin violet line fades in at the split, using a spring `{ stiffness: 300, damping: 24 }`.
- Add `text-shadow` glow on the bottom half via a blurred duplicate.
- Props: `text`, `className`, `gradient?: [string,string]`.
- Handle `prefers-reduced-motion` and strict TypeScript. Only React, Tailwind, Framer Motion.


---

TECHNICAL SPEC (must be respected)

Stack:
- React 18 + TypeScript (strict), Tailwind CSS, Framer Motion
- No extra animation library, no canvas unless explicitly required

Design tokens:
- Base background #0a0a0f, surfaces rgba(255,255,255,0.04)
- Borders rgba(255,255,255,0.08), primary violet #8b5cf6, secondary #a855f7
- Radius 20-28px, backdrop-blur(24px), inner highlight inset 0 1px 0 rgba(255,255,255,0.12)
- Typography: tight tracking on headings (-0.02em), 15-16px body, muted text at 60% opacity

Motion rules:
- Entrance: opacity 0 -> 1, y 24 -> 0, duration 0.7s, ease [0.16, 1, 0.3, 1]
- Stagger children by 0.06s, trigger with useInView({ once: true, margin: "-80px" })
- Hover: translateY(-6px) + soft violet glow, 250ms
- Animate only transform, opacity and filter. 60fps, will-change on animated layers
- Respect prefers-reduced-motion: disable loops, keep final states

Quality bar:
- Fully responsive (mobile-first, no horizontal scroll)
- Accessible: semantic HTML, focus-visible rings, contrast AA
- No layout shift, no dummy lorem ipsum, realistic copy
- Clean, reusable, production-ready components with typed props

Deliver the complete code, ready to paste, with no placeholder comments.