Reveal Text Mask

Create a React + TypeScript component `RevealText` that reveals a massive headline from behind a horizontal light line, with a mirrored reflection underneath — cinematic, Apple keynote style.

Requirements:
- Wrapper: `relative overflow-hidden` block on a near-black background (#030303).
- The word is rendered in `font-black uppercase text-7xl md:text-9xl text-white tracking-tight`.
- Reveal: wrap the text in a container with `overflow-hidden`; animate the inner `motion.div` from `y: '110%'` to `y: '0%'` with `duration: 1.1, ease: [0.16,1,0.3,1]`. Split by word, stagger 0.08s.
- Light line: an absolutely positioned 1px div, `bg-gradient-to-r from-transparent via-white to-transparent`, animated `scaleX: 0 -> 1` (origin center) in 0.8s BEFORE the text rises, then fading to `opacity: 0.25`.
- Reflection: duplicate the headline with `scaleY(-1)`, `opacity-25`, a `mask-image: linear-gradient(to bottom, rgba(0,0,0,0.5), transparent 70%)` and `blur-[2px]`. It must animate in sync with the main text.
- Add a radial white glow (`bg-[radial-gradient(ellipse_at_center,rgba(255,255,255,0.12),transparent_70%)]`) behind the line.
- Trigger with `useInView(ref, { once: true, amount: 0.5 })`, not on mount, so it plays when scrolled into view.
- Reduced-motion: show the final state immediately.
- Fully responsive; reflection height clamps on mobile. Export default, no external libs beyond Framer Motion + Tailwind.


---

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.