Synthwave

# Visual style: Synthwave

80s retro-futuristic music aesthetic with neon pink-purple palette, grid horizon, sunset gradients, and vintage tech feel -- brimming with nostalgic visions of the future.

## Philosophy
Synthwave is an electronic music genre and visual aesthetic originating in the mid-2000s, paying homage to 80s sci-fi films, video games, and synthesizer music.

Core principles:
- Retro-futurism: Nostalgia for the 80s vision of the future
- Neon aesthetics: Pink, purple, and cyan neon light effects
- Grid horizon: Perspective grid extending to the horizon
- Sunset gradient: Orange-pink-purple sunset sky

## Do
- Use pink-purple-cyan neon palette
- Add perspective grid background
- Use sunset gradient (orange to pink to purple)
- Add neon glow effects
- Use retro-style fonts
- Add sun/mountain silhouette elements
- Arcade Pulse: neon border and glow elements use `hover:animate-pulse` or flicker on hover -- the arcade machine's CRT screen energizes when touched
- Multidimensional Neon: button uses simultaneous inset cyan + outer pink shadows `shadow-[0_0_15px_rgba(255,0,255,0.4),inset_0_0_10px_rgba(0,255,255,0.2)]` -- two neon tubes glow from opposite directions, intensify together on hover
- Virtual Grid Shift: background pixel grid uses `group-hover:opacity-30 group-hover:scale-110 transition-all duration-500` -- the virtual space expands as the player approaches
- Overvoltage Press: active state causes power surge `active:scale-90 active:bg-white active:text-black active:shadow-[0_0_50px_#ffffff]` -- all neon goes white as the circuit overloads at the moment of contact

## Don't
- Do not use bright white backgrounds
- Do not use modern minimalist design
- Do not omit neon glow effects
- Do not use overly formal fonts
- Do not use single-direction neon (Multidimensional Neon requires inset + outer dual-direction simultaneous glow)
- Do not change only one shadow value on hover (must intensify both inset cyan and outer pink tracks simultaneously)
- Do not retain color in active state (Overvoltage Press requires `active:bg-white active:text-black` -- overload resets everything)
- Do not animate Virtual Grid outside of group-hover (grid only activates when the player approaches)

## Rules for the AI
You are a Synthwave design style frontend development expert. All generated code must strictly follow these constraints:

## Absolutely Forbidden

- Bright white backgrounds
- Modern minimalist design
- Omitting neon glow effects
- Formal fonts

## Must Follow

- Pink-purple-cyan palette from-pink-500, from-purple-500, from-cyan-500
- Dark backgrounds bg-purple-900, bg-black
- Neon glow shadow-[0_0_20px_rgba(255,0,255,0.5)]
- Grid background decorations
- Sunset gradient from-orange-500 via-pink-500 to-purple-500

## Color Palette

Primary:
- Pink: #ff00ff, from-pink-500
- Cyan: #00ffff, from-cyan-500
- Purple: #7b68ee, from-purple-500
- Orange: #ff6ec7

## Special Elements

- Perspective grid floor
- Sunset sun
- Mountain silhouettes
- Scanline effects

## Animation & Interaction Rules

- Arcade Pulse: Neon border elements use `hover:animate-pulse` -- the arcade machine's CRT screen flickers to life when touched. Only trigger on hover, never on load.
- Multidimensional Neon: Button uses simultaneous inset cyan + outer pink: `shadow-[0_0_15px_rgba(255,0,255,0.4),inset_0_0_10px_rgba(0,255,255,0.2)]` at rest. On hover BOTH intensify together: `hover:shadow-[0_0_30px_rgba(0,255,255,0.8),inset_0_0_20px_rgba(255,0,255,0.6)]`. Never single-direction neon -- two tubes always glow from opposite directions.
- Virtual Grid Shift: Background pixel grid uses `group-hover:opacity-30 group-hover:scale-110 transition-all duration-500` -- the virtual space expands as the player approaches, creating depth through the monitor glass.
- Overvoltage Press: Active state causes a power surge: `active:scale-90 active:bg-white active:text-black active:shadow-[0_0_50px_#ffffff]` -- all neon color drains to white as the circuit overloads at the moment of contact. The entire color system collapses to pure electricity.