Style: Parallax Storytelling. Type: General. Keywords: Scroll-driven, narrative, layered scrolling, immersive, progressive disclosure, cinematic, scroll-triggered. Primary Colors: Story-dependent, often gradients and natural colors, section-specific palettes. Secondary Colors: Section transition colors, depth layer colors, narrative mood colors. Effects & Animation: transform: translateY(scroll), position: fixed/sticky, perspective: 1px, scroll-triggered animations. Best For: Brand storytelling, product launches, case studies, portfolios, annual reports, marketing campaigns. Do Not Use For: E-commerce, dashboards, mobile-first, SEO-critical, accessibility-required. Light Mode: ✓ Full. Dark Mode: ✓ Full. Performance: ❌ Poor. Accessibility: ❌ Poor (motion). Mobile-Friendly: ✗ Low. Conversion-Focused: ✓ High. Framework Compatibility: GSAP ScrollTrigger 10/10, Locomotive Scroll 10/10. Era/Origin: 2020s Modern. Complexity: High. AI Prompt Keywords: Design a parallax storytelling page. Use: scroll-driven narrative, layered backgrounds (3-5 layers), fixed/sticky sections, cinematic transitions, progressive disclosure, full-screen chapters, depth perception.. CSS/Technical: position: fixed/sticky, transform: translateY(calc()), perspective: 1px, z-index layering, scroll-snap-type, Intersection Observer for triggers, will-change: transform. Implementation Checklist: ☐ Layers parallax smoothly, ☐ Story flows naturally, ☐ Mobile alternative provided, ☐ Performance optimized, ☐ Skip option available, ☐ Reduced motion fallback. Design System Variables: --parallax-speed-bg: 0.3, --parallax-speed-mid: 0.6, --parallax-speed-fg: 1, --section-height: 100vh, --transition-duration: 600ms, --perspective: 1px.