Sleep-brand hero that literally dims as you read it.

Build a hero page for sleep brand "HALCYON" with React + Tailwind. Concept: the page falls asleep. Background begins dusk #b7a8d3 and continuously deepens through #6b5b95 to near-black #14101f over 20 seconds after load (very slow keyframe, holds at end); a CSS crescent moon (two overlapping circles) brightens as the sky darkens; 30 stars (1-2px dots) fade in late, a few twinkling. Fonts: "Prata" display, "Mulish" body; text starts #241f33 and crossfades to #efe9f7 in sync with the sky (animate color on the same timeline). Headline "Engineered drowsiness." Sub "Weighted blanket, blackout mask, and a lamp that argues with your phone. The kit: €189." CTA "Start winding down" pill that dims and gains a soft glow as night falls. Footer whisper: "97% FALL ASLEEP FASTER — 3% ARE TODDLERS".
sleepdimming