Shine Sweep

Create a shine sweep on a button. On hover, a diagonal streak of light crosses the button once, left to right. Implementation: button with position: relative and overflow: hidden. The streak is an absolutely positioned element about 38% of the button's width and 180% of its height, rotated ~20deg, filled with linear-gradient(90deg, transparent, rgba(255,255,255,0.35), transparent). On mouse enter, animate it from translateX(-160%) to translateX(320%) over 700ms ease-out, running exactly once per hover (re-trigger by remounting the element with a new key, or restarting the animation). The streak must not intercept clicks (pointer-events: none) and the label stays above it. On touch devices trigger the sweep on tap. Skip the effect when prefers-reduced-motion is enabled. 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.