TITLE: Morphos — Four Living Processes

PROMPT: Build a single self-contained HTML page: a brand page for a fictional bio-design studio on a cream #f6f1e7 ground with a CSS paper texture (two fine repeating-linear-gradients plus soft terracotta and olive radial washes). Split layout: left column with a small tracked uppercase eyebrow with a terracotta dot, a Georgia italic wordmark "Morphos." at clamp(3.1rem,8.4vw,7rem) with a terracotta full stop, a serif lede, a four-row hairline service list (01 Grow / 02 Bend / 03 Bloom / 04 Cure with italic descriptors) and a mono meta footer; right column a 2x2 cluster of four huge organic clay blobs that reflows to one column under 560px. Each blob is a real button with aspect-ratio 1, a nine-value animated border-radius keyframe (58% 42% 47% 53% / 46% 54% 46% 54% cycling through four organic states over 15-21s with staggered negative delays), a radial-gradient clay body in olive #6b7f59, terracotta #e2725b, honey #f2c14e and espresso #2f2a26, dual inset shadows for clay depth, an outer contact shadow, and a slowly rotating conic-gradient sheen layer clipped by overflow:hidden. Behind the wordmark a morphing terracotta halo blob drifts. Hover or focus inflates a blob to 1.055, lifts its uppercase label 7px and dims its siblings to 0.42 opacity and 0.95 scale; pointer proximity pulls each blob toward the cursor with squared falloff via --px/--py custom properties on a rAF-throttled transform. Clicking a blob (or a service row) opens an inline detail panel using the grid-template-rows 0fr to 1fr technique with a serif italic heading, body copy and tag pills; Escape or Close collapses it. All state declared above boot, geometry cached once per layout change, prefers-reduced-motion disables morph, spin and pull.

DESCRIPTION: A warm, tactile brand page where the product is literally soft: four clay blobs, each a different earth colour, breathe and morph at their own tempo under a paper-textured cream sky. The studio's voice is set in Georgia italic on the left, the evidence is the four shapes on the right. Hovering a shape makes it swell while the others recede; clicking opens a quiet panel that unfolds below the manifesto rather than covering the work.

TECHNIQUES: multi-value border-radius keyframe animation; rotating conic-gradient sheen clipped by overflow:hidden; dual inset box-shadows for clay depth; radial-gradient body shading; CSS paper grain from repeating-linear-gradients; grid-template-rows 0fr to 1fr panel expansion; CSS custom properties (--px/--py/--sc/--ink) driving a single composed transform; rAF-throttled pointer proximity with squared falloff; cached geometry via offsetLeft/offsetTop; staggered negative animation-delay for desynchronised morphs; prefers-reduced-motion overrides.

INTERACTION: Hovering or keyboard-focusing a blob inflates it, lifts its label and dims the other three; the same happens when hovering a service row in the list. Clicking a blob or a service row (or pressing Enter on it) expands the inline detail panel with that process's copy and deliverable tags, marks the row active and updates an aria-live announcement; clicking the same blob again, pressing Close or pressing Escape collapses it. Moving the pointer pulls nearby blobs a few pixels toward the cursor with a soft spring, and the whole cluster reflows to a single column on narrow screens.