Animated Gradient Text

Create animated gradient text. A headline whose letters are filled with a warm gradient that slowly flows through them. Implementation: set a linear-gradient background on the text element with 3-4 warm brand stops that loop (first color repeated at the end, e.g. accent, a lighter orange, deep rust, accent), background-size: 300% 100%. Clip it to the glyphs: -webkit-background-clip: text (plus the unprefixed background-clip: text) and color: transparent. Animate background-position from 0% 50% to 100% 50% and back, 6s ease-in-out infinite. Details: repeat the first color as the last stop so the loop has no visible seam; apply it to short display text (a headline or a single emphasized word inside one), never to body copy; keep font-weight heavy (700-800), where the gradient reads best; and verify every gradient stop has enough contrast against the page background, since the lightest stop is the effective text color at its worst. Under prefers-reduced-motion, freeze the gradient at its midpoint. Build the component, not this demo of it. - Ambient motion that IS the component may loop: a drifting background, a marquee, a spinner while something is genuinely loading. - Do not add any timer, interval, loop or script that performs a person's action by itself. No auto-hover, no auto-click, no cycling through states, no pretend submitting, no replaying the interaction on a schedule. - Every state that answers a person waits for a real event from that person. - Placeholder copy and sample content are welcome. Simulated behaviour is not.