Holographic

# Visual style: Holographic

Rainbow spectrum iridescent gradient aesthetics simulating holographic prismatic refraction and dynamic light effects for an otherworldly iridescent experience.

## Philosophy
Holographic simulates the prismatic beauty of holographic foil -- rainbow spectrum gradients that shift and flow with viewing angle, creating an otherworldly iridescent experience.

Core principles:
- Prismatic refraction: multi-color spectrum gradients with 3+ color stops
- Cosmic deep space: dark backgrounds make holographic elements leap forward
- Dynamic light effects: gradient position animation simulates holographic foil angle changes
- Translucent layering: glass-textured cards with backdrop blur

## Do
- Use multi-color gradient backgrounds (linear-gradient with 3+ color stops)
- Apply background-size animation for moving gradient effects
- Use semi-transparent cards over dark cosmic backgrounds
- Add prismatic box-shadow with multiple colored glows
- Include holographic sticker badges with full spectrum gradients
- Use dark purple/navy backgrounds (#0a0a1f, #1a0b2e) to make holographic elements pop
- Spectrum Shift: use bg-[length:200%_auto] on gradient buttons + hover:bg-right for lateral color flow
- Prismatic Glow: buttons hover to multi-color shadow
- Buttons must have active:scale-95 + focus:ring-2 focus:ring-purple-400 focus:ring-offset-2 focus:ring-offset-[#0a0a1f]
- Card gradient text uses bg-[length:200%_auto] + group-hover:bg-right for synchronized color shift

## Don't
- Don't use flat solid colors without gradient
- Don't use light/white backgrounds (kills the holographic effect)
- Don't use muted or desaturated colors
- Don't use sharp corners without any glow
- Don't use more than 2 non-gradient elements in a row
- Don't use hover:scale-105 alone -- always combine with gradient shift and prismatic shadow
- Don't omit active:scale-95 from buttons (no tactile confirmation)
- Don't use focus:ring without focus:ring-offset-[#0a0a1f] (ring invisible on dark cosmic background)

## Rules for the AI
## Holographic Style Rules
- Background: Deep dark (#0a0a1f or #1a0b2e) - cosmic/space feel
- Primary effect: Rainbow spectrum gradients using linear-gradient with 3+ stops
- Gradient colors: #ff0080 -> #ff6b00 -> #ffd700 -> #00ff88 -> #00d4ff -> #6366f1 -> #a855f7
- Cards: Semi-transparent (bg-white/5 to bg-white/10) with backdrop-blur
- Text highlights: Use bg-clip-text with gradient for headings
- Borders: Subtle white/10 to white/20 with purple/prismatic glow on hover
- Animate gradients: Use background-size: 200% and animate background-position
- Holographic badges: Small elements with full rainbow gradient + shimmer overlay
- All interactive elements should have prismatic box-shadow on hover
- Never use light/white backgrounds
- Never use flat solid colors without gradient treatment
- Never use muted or desaturated color palettes

## Animation & Interaction Rules

### Spectrum Shift (Gradient Slide)
- Apply bg-[length:200%_auto] to all gradient buttons and card headings
- On hover: hover:bg-right — gradient slides laterally, simulating angle-dependent holographic foil color shift
- Transition: transition-[background-position] duration-500 (smooth spectrum sweep)
- NEVER use hover:bg-right without bg-[length:200%_auto] (no movement without oversized gradient)

### Prismatic Glow (Multi-Color Shadow)
- Button hover: hover:shadow-[0_0_40px_rgba(0,212,255,0.6),0_0_20px_rgba(255,0,128,0.4)] — dual cyan+magenta glows
- Card hover: hover:shadow-[0_0_30px_rgba(147,51,234,0.3)] — purple prism glow
- Resting shadow always present: shadow-[0_0_20px_rgba(147,51,234,0.5)]

### Liquid Glass (Card Float)
- Always use group class on card containers
- Cards: hover:-translate-y-2 hover:bg-white/10 hover:border-purple-400/40
- Card headings use Spectrum Shift synchronized with card hover via group-hover:bg-right

### Jelly Press (Active State)
- All buttons: active:scale-95 active:translate-y-0 — jelly press confirms interaction
- Focus: focus:ring-2 focus:ring-purple-400 focus:ring-offset-2 focus:ring-offset-[#0a0a1f]
- ring-offset-[#0a0a1f] mandatory — ring invisible on dark cosmic background without it

### Duration
- Button transitions: duration-500 ease-out (slow = luxurious holographic feel)
- Card transitions: duration-300 ease-out