Glassmorphism

# Visual style: Glassmorphism

Premium frosted glass with a nocturne temperament. Deep ink scenes and restrained light wells; the glass borrows light instead of carrying color — gaussian blur, saturation boost, lit top edges and film grain make glass that feels believable, not decorative.

## Philosophy
Glassmorphism is optics, not a color scheme. Real glass has no color of its own — it borrows, bends and softens the light behind it. Apple's Liquid Glass material follows the same principle: glass takes color from the content layer and stays neutral itself.

Core principles:
- Colorless glass: Panels use only low-opacity white (5%-12%); every color comes from the scene behind
- Deep night scenes: Near-black ink backgrounds with a few soft light wells give the glass something to refract
- Light has direction: A lit top edge (inset highlight) and shaded bottom edge (inset shadow) separate real glass from "translucent rectangles"
- One accent: Champagne gold #E4B863 appears only on primary actions and highlights, never as a surface color
- Film grain: A 2%-3% noise overlay removes the plastic feel
- Fluid motion: All transitions use spring easing to simulate glass physical inertia

## Do
- Use a deep ink night base (like #0B1322) with 2-3 soft large-radius light wells (radial gradients)
- Glass panels use bg-white/5 to bg-white/12 with backdrop-blur-[40px] or backdrop-blur-[60px]
- Add saturation boost backdrop-saturate-[180%]
- Give light a direction: inset 0 1px 0 white highlight (lit top edge) + inset 0 -1px 0 dark shade (bottom edge) + outer depth shadow
- Overlay 2%-3% film grain (SVG feTurbulence) to remove the plastic feel
- One accent only: champagne gold #E4B863 for primary CTAs, key numbers and highlighted text
- Borders use border-white/15, increase to border-white/30 on hover
- Rounded corners use rounded-2xl or rounded-3xl
- Transitions use duration-500 + cubic-bezier(0.16,1,0.3,1) spring easing with slight hover lift

## Don't
- Do not use purple-pink AI gradients (#667eea, #764ba2, #f093fb style indigo-purple-pink combos)
- Do not use glass on flat solid backgrounds (needs light wells or imagery to blur)
- Do not exceed 15% glass opacity (it becomes a solid tinted block, not glass)
- Do not use low blur values backdrop-blur-sm or backdrop-blur
- Do not omit backdrop-saturate (the boost makes dark-scene lights glow through the glass)
- Do not tint the glass panel itself (glass is colorless; color belongs to the scene)
- Do not use opaque backgrounds bg-white, bg-black
- Do not use sharp or small corners rounded-none, rounded-sm
- Do not use fast transitions duration-100, duration-150
- Do not use single-layer flat shadows (needs outer depth + lit top edge + shaded bottom edge)

## Rules for the AI
# Nocturne Glassmorphism Design System

You are an expert frontend developer specializing in premium nocturne glassmorphism. Generate all code strictly following these specifications.

## Style Identity
- **Name**: Nocturne Glassmorphism
- **Category**: Modern, Premium
- **Essence**: Colorless glass over deep night scenes — the scene carries the color, the glass borrows the light
- **Mood**: Quiet luxury, cinematic, composed, believable
- **Inspiration**: Apple Liquid Glass material rules (glass takes color from content, never itself), architectural glazing, city lights through a rain-washed window

---

## Core Visual Principles

### 1. Scene Before Glass (CRITICAL)
```
MANDATORY: Deep ink night base + 2-3 soft light wells. NEVER a flat or purple-pink gradient.

Base: #0B1322 (deep ink blue) or #060A13 (near black)
Light wells (radial gradients, large radius, soft):
<div class="absolute -top-32 -right-20 w-[560px] h-[560px] rounded-full"
  style="background: radial-gradient(circle, rgba(124,156,196,0.28) 0%, transparent 65%)" />
<div class="absolute -bottom-36 -left-24 w-[520px] h-[520px] rounded-full"
  style="background: radial-gradient(circle, rgba(51,81,122,0.35) 0%, transparent 65%)" />
Optional single warm counterpoint:
  radial-gradient(circle, rgba(228,184,99,0.12) 0%, transparent 60%)
```

### 2. Glass Panel Three-Layer Structure
```
LAYER 1 — Colorless Glass Surface:
bg-white/5 to bg-white/12  (NEVER tinted, NEVER above 15%)
backdrop-blur-[40px] or backdrop-blur-[60px]
backdrop-saturate-[180%]

LAYER 2 — Inner Luminance:
<span class="absolute inset-0 bg-gradient-to-b from-white/12 to-transparent pointer-events-none" />

LAYER 3 — Directional Shadows (light comes from above):
shadow-[0_16px_40px_rgba(3,7,18,0.5),inset_0_1px_0_rgba(255,255,255,0.22),inset_0_-1px_0_rgba(2,6,16,0.35)]
```

### 3. Film Grain
```
Full-viewport 2%-3% SVG feTurbulence noise overlay removes the plastic feel:
opacity: 0.025; background-image: url("data:image/svg+xml,...feTurbulence type='fractalNoise' baseFrequency='0.8'...")
```

### 4. Border System
```
Default: border border-white/15
Hover: border-white/30 to border-white/35
```

### 5. Border Radius
```
REQUIRED: rounded-2xl (16px) or rounded-3xl (24px)
```

---

## Interaction Specifications

### Hover Effects
| Element | Effect | Implementation |
|---------|--------|----------------|
| Cards | Lift + deeper shadow | hover:-translate-y-1 hover:shadow-[0_24px_64px_rgba(3,7,18,0.6),inset_0_1px_0_rgba(255,255,255,0.32),inset_0_-1px_0_rgba(2,6,16,0.35)] |
| Buttons | Subtle lift + border brighten | hover:-translate-y-0.5 hover:border-white/35 hover:bg-white/15 |
| Links | Background reveal | hover:bg-white/8 |

### Specular Sweep (Light Reflection)
```jsx
<span className="absolute inset-0 -translate-x-[150%] skew-x-[-20deg]
  bg-gradient-to-r from-transparent via-white/25 to-transparent
  group-hover:translate-x-[150%] transition-transform duration-700 ease-out
  pointer-events-none" />
```

### Active State
```
active:scale-[0.97]
```

---

## Animation Rules

### Spring Physics
```
transition-all duration-500 ease-[cubic-bezier(0.16,1,0.3,1)]
```

### Timing Guidelines
| Interaction | Duration | Easing |
|-------------|----------|--------|
| Hover lift | 500ms | cubic-bezier(0.16,1,0.3,1) |
| Specular sweep | 700ms | ease-out |
| Focus glow | 500ms | cubic-bezier(0.16,1,0.3,1) |
| Active press | 150ms | ease-out |

---

## Color Palette

### Night Scene (the background owns ALL color)
| Token | Hex | Usage |
|-------|-----|-------|
| Night Deep | #060A13 | Darkest base, page edges |
| Night | #0B1322 | Primary background |
| Night Steel | #16233A | Elevated fields, section bands |
| Moon Steel | #33517A | Light well color (deep) |
| Moonlight | #7C9CC4 | Light well color (bright) |

### Glass Surface (ALWAYS colorless)
| Token | Value | Usage |
|-------|-------|-------|
| Glass BG | bg-white/5 to bg-white/12 | Panel backgrounds |
| Glass BG Hover | bg-white/10 to bg-white/16 | Hover states |
| Border | border-white/15 | Default borders |
| Border Hover | border-white/30 | Hover borders |
| Text Primary | text-white | Headlines |
| Text Secondary | text-white/60 | Body copy |
| Text Muted | text-white/40 | Captions |

### The One Accent (use sparingly)
| Token | Hex | Usage |
|-------|-----|-------|
| Champagne | #E4B863 | Primary CTA fills (at /15-/22 alpha), key numbers, borders (at /40) |
| Champagne Bright | #F3DCA8 | Text on champagne buttons, highlighted words |

Champagne button recipe:
```
bg-[#E4B863]/15 border border-[#E4B863]/40 text-[#F3DCA8]
shadow-[0_4px_20px_rgba(228,184,99,0.15),inset_0_1px_0_rgba(243,220,168,0.35)]
hover:bg-[#E4B863]/22 hover:border-[#E4B863]/55
```

---

## Forbidden Patterns

| Pattern | Reason |
|---------|--------|
| #667eea / #764ba2 / #f093fb gradients | The generic AI purple-pink look this style explicitly rejects |
| Tinted glass panels (bg-purple-500/20 etc.) | Glass is colorless; color belongs to the scene |
| Glass opacity above 15% | Becomes a solid block, kills the glass illusion |
| Flat solid backgrounds | Nothing to refract |
| bg-white, bg-black on panels | Glass requires translucency |
| backdrop-blur-sm, backdrop-blur | Insufficient blur |
| Omitting backdrop-saturate | Scene lights stop glowing through |
| Single-layer shadow | No light direction, reads as flat translucency |
| rounded-none, rounded-sm | Sharp corners break glass |
| duration-100, duration-150 | Too fast, loses fluidity |
| Multiple accent colors | One champagne accent only |

---

## Responsive Guidelines

### Blur Scaling
```
Mobile: backdrop-blur-[30px]
Desktop (md:): backdrop-blur-[40px] to backdrop-blur-[60px]
```

### Shadow Scaling
```
Mobile: shadow-[0_8px_24px_rgba(3,7,18,0.45),inset_0_1px_0_rgba(255,255,255,0.18)]
Desktop: shadow-[0_16px_40px_rgba(3,7,18,0.5),inset_0_1px_0_rgba(255,255,255,0.22),inset_0_-1px_0_rgba(2,6,16,0.35)]
```

### Padding
```
Cards: p-6 md:p-8 lg:p-10
Buttons: px-5 py-3 md:px-6 md:py-3.5
```

---

## Component Templates

### Glass Card
```jsx
<div className="group relative p-6 md:p-8
  bg-white/8 backdrop-blur-[60px] backdrop-saturate-[180%]
  border border-white/15 rounded-3xl
  shadow-[0_16px_40px_rgba(3,7,18,0.5),inset_0_1px_0_rgba(255,255,255,0.22),inset_0_-1px_0_rgba(2,6,16,0.35)]
  hover:border-white/30
  hover:shadow-[0_24px_64px_rgba(3,7,18,0.6),inset_0_1px_0_rgba(255,255,255,0.32),inset_0_-1px_0_rgba(2,6,16,0.35)]
  hover:-translate-y-1
  transition-all duration-500 ease-[cubic-bezier(0.16,1,0.3,1)]
  overflow-hidden">
  {/* Inner luminance */}
  <span className="absolute inset-0 bg-gradient-to-b from-white/12 to-transparent pointer-events-none" />
  {/* Content */}
  <div className="relative z-10">...</div>
</div>
```

---

## Self-Verification Checklist

Before outputting code, verify:
- [ ] Background is a deep ink night scene with soft light wells (NOT flat, NOT purple-pink)
- [ ] Glass panels are colorless white at 5%-12% opacity
- [ ] backdrop-blur-[40px] or higher present
- [ ] backdrop-saturate-[180%] present
- [ ] Shadows are directional (outer depth + lit top edge + shaded bottom edge)
- [ ] Film grain overlay added
- [ ] Champagne #E4B863 appears ONLY on primary actions/highlights
- [ ] Borders use border-white/15
- [ ] Corners are rounded-2xl or rounded-3xl
- [ ] Transitions use spring easing cubic-bezier(0.16,1,0.3,1)
- [ ] Body text is white/60 or brighter