塗り走査ボタン

Implement the following web visual TECHNIQUE as a small, self-contained demo (single HTML file, inline CSS/JS; GSAP via CDN is allowed if it fits the recipe). Invent your own placeholder content (original text/shapes/colors) — do NOT copy any existing site's content or branding.

## Technique: Fill Sweep Button (塗り走査ボタン)

What happens: ホバーで背景色が端から走査線のように塗り潰し、文字色が反転する

## Implementation recipe (normative)

CSSのみ。`background:linear-gradient(#000,#000) no-repeat 0 100%/0% 100%`→hoverで`100% 100%`(またはbackground-position走査)

## Timing values chosen by the user (normative — use these exact values)

- Easing: `cubic-bezier(0.22, 1, 0.36, 1)`
- Base duration: 1.30s
- Intensity 1/5: Keep amplitudes minimal (2-8px movements, opacity-led, no overshoot) — the motion should be barely-there and elegant.

## Quality bar

- Runs at 60fps; animate only transform/opacity/filter where possible.
- Make the initial state legible immediately. Preserve the full timing above, including deliberately slow transitions. Repeat only when the recipe calls for a loop; give finite effects a clear ending and replay action.
- Respect prefers-reduced-motion: show a legible resting state without autoplay. Keep every operation available through keyboard and touch; allow deliberate playback of the effect for inspection.
- Difficulty reference: 低. If the recipe mentions specific libraries or shader work, follow it rather than substituting a simpler approach.