Lovable prompt for an animated hero background

My Lovable landing page already has a hero for a project management SaaS — headline, buttons, maybe an email field. Add an animated background layer behind that hero without rewriting any of its content. This task touches only the hero's container and adds one layer; everything else on the page stays as it is.

Layering: give the hero container relative positioning with hidden overflow, insert the effect as an absolutely positioned full-bleed div stacked beneath the existing content, and set pointer-events to none on it so buttons and inputs keep working — Lovable heroes often carry a signup form, and the layer must never intercept a click or a focus.

Prefer CSS-only animation here: two or three large, heavily blurred gradient shapes on looping keyframes if the visual direction reads soft; a slowly panning geometric line pattern if it reads stark or editorial; fall back to a canvas particle field only for genuinely technical, dark directions, capped at 60 particles.

Non-negotiables:
- Animate transform and opacity only — nothing that triggers layout.
- A prefers-reduced-motion media query pauses every animation and shows the static arrangement.
- The area behind the headline and the primary button labelled "start a free trial" stays calm, so copy read by engineering managers at startups at a glance never fights the effect; add a soft scrim if contrast dips.
- Keep roughly 64px of visual quiet around the copy block; shapes drift around it, never through it.

Visual direction:
Minimal dark style. Near-black canvas (#0A0A0B) with one elevated surface tone (#141416) for cards — never more than two surface steps. Hairline borders (1px, white at 8% opacity) instead of shadows; if a shadow is unavoidable use 0 1px 2px rgba(0,0,0,0.4) and nothing softer. Text in exactly three steps: white at 92% for headings, 60% for body, 40% for captions. Generous negative space — section padding at least 120px on desktop, 64px on mobile. The accent color appears only on interactive elements and one hero highlight, nowhere else.

Palette: a strict neutral ramp (white, #F5F5F5, #E5E5E5, #737373, #171717) carries the entire interface; pick one accent and use it only for primary CTAs, active states, and a single hero highlight. If the accent appears more than five times per viewport it stops being an accent. Keep semantic colors (success, error) desaturated so the accent stays in charge.
Typography: one geometric sans (a Futura/Poppins-class face) at three weights maximum (400/500/700). Scale: 64-88px hero, 32px section heads, 18px lede, 16px body, 13px caps labels with 0.08em tracking. Tight headline leading (1.05-1.1), relaxed body (1.6). Let the geometry carry the personality — no italics; weight and size do all hierarchy.
Motion: none. Zero scroll animations, zero entrance effects — the page is fully composed the instant it paints. Spend the motion budget on input feedback instead: 120-150ms ease-out color and transform transitions on hover and press states only. Hold this constraint absolutely; it is a statement, not an omission.

Motion sets the tempo: quieter settings mean fewer shapes moving shorter distances more slowly.

On phones, drop to two shapes at most and slow the loop — dense motion feels frantic on a small screen.

Before publishing, verify: (1) every hero button and field still clicks and focuses, (2) enabling reduced motion in the browser stops all movement, (3) headline contrast holds over the brightest moving shape, (4) the published site animates exactly like the editor preview. Then publish and check once on a phone.