# Data Story: Global Water Crisis

Build a single-file HTML scrollytelling data story on the global water crisis.

## Requirements

1. **File**: One `index.html`, no external images, no external libraries (vanilla JS / CSS / Canvas).
2. **Sections**: At least 5 narrative sections with purposeful scroll-triggered transitions.
3. **Visuals**:
   - Annotated charts using Canvas or SVG (bar chart, map heatmap, trend line).
   - All visuals must be programmatic (no image files).
4. **Navigation**:
   - Progress indicator (dots or bar) showing current section.
   - Keyboard navigation (arrow keys / page up / page down).
   - Optional click-to-section nav.
5. **Transitions**:
   - Sections animate in/out based on scroll position using Intersection Observer.
   - Charts animate / draw themselves as they enter viewport.
6. **Tone**: Data-driven yet human. Informative but not dry.
7. **Responsiveness**: Works on desktop and mobile (stacked layout, reduced chart sizes).

## Section Outline

1. **The Blue Marble** — Hero with animated water droplet / wave visualization.
2. **The Scarcity Gap** — Bar chart: renewable freshwater per capita by region, 1960 vs today.
3. **A World of Stress** — World map heatmap of water stress levels by country.
4. **The Human Cost** — Narrative with key statistics on health, agriculture, and conflict.
5. **Pathways Forward** — Solutions radar chart + call to action.

## Technical Constraints

- Vanilla HTML5, CSS3, ES6.
- Single file only.
- No frameworks, no CDNs.
- All data hardcoded as JS objects.
- Use `position: sticky` and `IntersectionObserver` for scroll effects.
- CSS transitions: `transform` and `opacity` only for performance.