Parallax Sections

# Visual style: Parallax Sections

An immersive layout creating depth parallax effects through fixed backgrounds and scrolling content, with each full-screen section having its own background layer. Ideal for brand stories, product showcases, and immersive experience pages.

## Philosophy
Parallax Sections creates depth through differential scrolling speeds between background and foreground, letting users experience a layered visual journey while scrolling.

Core principles:
- Depth layering: Fixed backgrounds with scrolling content create a three-dimensional spatial feel
- Immersive experience: Each section stands as its own scene, like flipping through a picture book
- Rhythm control: Full-screen sections control the user's browsing pace
- Visual focus: Each section highlights one primary information point

## Do
- Use bg-fixed to create fixed background parallax effect
- Each section uses min-h-screen full-screen height
- Content areas use semi-transparent backgrounds bg-white/90 for readability
- Use sticky top-0 for sticky scroll effects
- Background images use bg-cover bg-center to maintain proportions
- Transition sections use gradient or blur effects
- Interactions prioritize opacity and blur changes to express depth of field, avoiding large displacement animations that cause dizziness
- Cards can add slow sweep light layers (Glass Glare) to enhance lens reflection feel
- Uniformly use longer easing duration-500/700 for cinematic narrative rhythm

## Don't
- No insufficient contrast between background images and content
- No inconsistent section heights that break rhythm
- No excessive parallax layers causing performance issues
- No ignoring mobile parallax degradation handling
- No overly dense content that breaks focus
- No large vertical card hover jumps (background already has displacement, foreground should be restrained)
- No short, abrupt animations (would break immersive narrative)

## Rules for the AI
You are a Parallax Sections layout expert. Generated code must follow:

## Layout Rules
- Each section uses min-h-screen full-screen height
- Backgrounds use bg-fixed bg-cover bg-center
- Content uses semi-transparent backgrounds (bg-white/90 or bg-black/40 depending on scene) with backdrop-blur
- Navigation uses fixed + backdrop-blur-lg

## Forbidden
- Using bg-scroll (breaks parallax effect)
- Inconsistent section heights
- Insufficient contrast between background and content

## Animation & Interaction Rules
- Decoupled Depth: Foreground cards avoid large Y-axis floating, prioritize opacity and blur to reinforce depth of field feedback.
- Glass Glare: Can use gradient sweep layers that slowly appear on hover, simulating lens reflection.
- Cinematic Slowness: Interaction rhythm uses duration-500 to 700, maintaining narrative continuity and immersion.
- Immersive Focus: Active feedback prioritizes background brightness changes, avoiding obvious scaling that breaks layout stability.

## Layout & Spacing
- Section padding: py-16 md:py-24
- Card padding: p-6 md:p-8
- Gap between cards: gap-6 md:gap-8
- Max content width: max-w-6xl mx-auto

## Responsive Design
- Mobile-first approach with Tailwind breakpoints
- Stack elements vertically on mobile (flex-col), row on desktop (md:flex-row)
- Reduce font sizes on mobile: text-3xl md:text-5xl for headings
- Touch-friendly targets: min 44px for interactive elements

## Self-Check Verification
After generating code, verify:
1. All interactive elements have hover/focus/active states
2. Color contrast meets WCAG 2.1 AA (4.5:1 for text)
3. Layout is responsive across breakpoints
4. Typography hierarchy is clear (h1 > h2 > h3 > body)
5. Spacing is consistent using the defined scale
6. All animations respect prefers-reduced-motion