Neon Sign Text

Create a React + TypeScript component `NeonSign` that reproduces a photorealistic pink/violet neon sign mounted on a dark brick wall, with a wet-floor reflection — pure CSS/Framer Motion, no images required.

Build:
- Wall: a `div` with a subtle brick pattern made of `repeating-linear-gradient` layers over `#0b0409`, plus a vignette (`radial-gradient` mask) and a magenta ambient glow behind the text.
- Lettering: `font-black uppercase text-7xl md:text-9xl tracking-widest`, color `#fff0fb`, with outline-style neon via `WebkitTextStroke: '2px #f472b6'` combined with layered `textShadow` (`0 0 8px #f472b6, 0 0 24px #e879f9, 0 0 60px #c026d3, 0 0 120px #a21caf`).
- Ambient spill: an `aria-hidden` blurred copy (`blur-[60px] opacity-70`) tinted magenta, scaled 1.05.
- Reflection: duplicate with `scaleY(-1)`, `blur-[6px]`, `opacity-40`, horizontally distorted with `skewX(-4deg)` and masked to fade downward, plus a faint moving highlight to suggest wet concrete.
- Animation: idle hum `opacity: [1,0.94,1]` over 2.6s infinite; a random flicker on one letter — implement by mapping characters to `motion.span`s and giving a chosen index a keyframe burst every ~5s using a `repeatDelay`.
- Hover on the sign brightens the whole assembly (`filter: brightness(1.2)`) in 200ms.
- Props: `text`, `hue?: 'pink' | 'violet'`.
- Responsive scaling, strict TS, `prefers-reduced-motion` renders a steady sign. React + Tailwind + Framer Motion only.


---

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.