Shine Sweep Text

Create a pure-CSS "shine sweep" text effect. A glowing yellow band of light travels left to right through the letters on a loop, with a soft glow that moves with it. It is not a static outline glow.

USAGE
<span class="shine" data-text="yoursite.com">yoursite.com</span>
(data-text must match the text exactly.)

.shine
- --shine-base: the normal text color (default #1e1e1e; override per use).
- --shine-band: transparent 38%, #e0a400 44%, #ffd000 48%, #fff3a0 50%, #ffd000 52%, #e0a400 56%, transparent 62%.
- position relative; display inline-block; isolation isolate; color transparent.
- Two background layers:
  - linear-gradient(100deg, var(--shine-band))
  - linear-gradient(var(--shine-base), var(--shine-base))
- background-size: 300% 100%, 100% 100%.
- -webkit-background-clip: text; background-clip: text.
- animation: shine-sweep 2.6s linear infinite.

.shine::before (the moving glow)
- content: attr(data-text); position absolute; inset 0; z-index -1; color transparent.
- Background: only the band gradient, at background-size 300% 100%, clipped to text.
- filter: blur(6px); the same animation; pointer-events none.

@keyframes shine-sweep
- From background-position 100% 0, 0 0. To 0% 0, 0 0.
- Moving the oversized gradient from 100% to 0% carries the band across the text from left to right, with a natural pause between passes.

ACCESSIBILITY
- @media (prefers-reduced-motion: reduce): turn the animation off for .shine and .shine::before.

NOTE
- Don't combine it with per-letter transform animations on the same text: background-clip: text won't paint through transformed child elements.