Prompt:
Build a standalone HTML page for "030 ocean-depth-story: scroll storytelling down ocean layers, parallax, depth gauge." Title it "Descent: Eleven Kilometers Down". It is a long vertical scroll story from the surface to Challenger Deep (10,935 m) in seven sections: a hero, the Sunlight zone (0 to 200 m), Twilight (200 to 1,000 m), Midnight (1,000 to 4,000 m), Abyss (4,000 to 6,000 m), Hadal trenches (6,000 to 10,935 m), and a final floor scene. Typography: an editorial serif stack ("Iowan Old Style", "Palatino Linotype", Palatino, Georgia) for headlines and body, light 400 weight with italic secondary phrases in a dimmer tone; "Helvetica Neue"/Arial for tiny tracked uppercase zone tags, facts and the gauge. Color: a fixed full-screen water layer whose background is interpolated by scroll progress through seven stops, from shallow turquoise (#7fd6e6) through cerulean, navy and ink to near-black (#010206). The accent is bioluminescent mint (#5ff5d2), with a pale sand (#f1d9a6) for the trench creature. The hero has a peach-to-aqua sky gradient, a soft sun disc, two layered SVG wave bands that swell sideways, a huge "Des-cent" wordmark with an italic second half, a subtitle, and a "Scroll to dive" cue with a dripping line. Each zone section has a mint tag (scientific zone name and depth range), a big two-part headline, a paragraph of evocative but accurate copy, and two fact figures. These blocks fade and rise in through IntersectionObserver. Inline SVG creature silhouettes sit in each zone and parallax at different rates (data-speed multipliers on their offset from viewport center): a fish school built from a reusable symbol and a sea turtle in the sunlight; a translucent violet jellyfish and a lanternfish with glowing photophores in twilight; an anglerfish with a radial-gradient pulsing lure at midnight; a tripod fish on stilt fins in the abyss; a pale segmented amphipod in the trench. A fixed canvas overlay draws about 90 particles: rising ring bubbles near the surface, then drifting marine snow that fades in with depth, then pulsing mint bioluminescent glows below 800 m. Particles also drift against scroll velocity for parallax. A fixed vertical depth gauge on the right shows a track with tick labels (0, 200, 1k, 4k, 6k, 10.9k m), a gradient fill and a glowing marker. A glassy readout card in the bottom right shows the zone name, an eased depth counter in meters, pressure (1 + depth / 10.06 atm), interpolated temperature, and remaining light percent (exp(-depth / 43)). Depth is calculated from which section crosses the viewport midline and how far through it you are. The floor section ends with a "Return to the surface" pill button that smooth-scrolls to the top. On phones, gauge labels and secondary stats hide. Reduced motion: no smooth scroll, no wave, drip or glow animations, reveals shown immediately, no parallax, static particles, instant depth counter.

Title: Descent: Eleven Kilometers Down

Description: A cinematic scroll documentary that sinks the reader from a warm, sunlit surface to the darkest point in the ocean. The water color deepens continuously as you scroll, silhouettes of creatures from each zone drift past at parallax speeds, and the particle layer changes from surface bubbles to marine snow to living light. A fixed instrument gauge and readout track depth, pressure, temperature and remaining light in real time, so every paragraph feels like another stage of a dive.

Visual techniques:
- Scroll-mapped background color interpolation across seven depth stops
- Section-based depth calculation driving an eased numeric readout and gauge marker
- Inline SVG creature silhouettes with a reusable symbol, radial gradient lure and pulse animations
- Per-element parallax using offset from viewport center times a speed factor
- DPR-aware canvas particle layer that switches between bubbles, marine snow and bioluminescent glows by depth, with scroll-velocity drift
- IntersectionObserver fade-and-rise reveals with long cubic-bezier easing
- Layered SVG wave bands and a sky-gradient hero
- Glassy fixed readout card with backdrop blur and tabular figures

Interaction model: The reader simply scrolls. The descent drives everything: water color, creature parallax, particle behavior, the depth gauge and the live depth, pressure, temperature and light readout. Each zone's story block reveals as it enters view. At the bottom, the "Return to the surface" button scrolls back to the top, smoothly unless reduced motion is preferred.