What the agent must do

• No skill or library needed: implement it directly with a few lines of vanilla JS and font-variation-settings.
• Use only on the hero headline, and only if the heading font is a variable font: load its full wght range (e.g. wght@100..900) from Google Fonts; if it is not variable, skip this look and say so.
• Split the headline into per-character spans with aria-hidden, keep the full text in an aria-label (or a visually hidden copy), and lock each span's width to avoid reflow.
• Animate font-variation-settings "wght" along a sine wave across characters for one pass on load (under 1.5 s) and while hovered; settle back to the token weight; never loop forever.
• Under prefers-reduced-motion, render the headline at its token weight with no split and no animation.
• Ship it as a few lines of vanilla JS (no animation library) loaded after the font is ready (document.fonts.ready).