Animation - Shining Text with Shadow

Concept

Add a glowing shadow effect to the shining text animation using `text-shadow`.

Key Addition: Text Shadow

Animate `text-shadow` in Keyframes

@keyframes shine {
    0%, 100% {
        color: #333;
        text-shadow: none;
    }
    50% {
        color: #2962ff;
        text-shadow: 0 0 10px rgba(41, 98, 255, 0.5);
    }
}

**`text-shadow` syntax:** `offset-x offset-y blur-radius color`

• `0 0 10px` = no offset, 10px blur radius
• `rgba(41, 98, 255, 0.5)` = semi-transparent blue glow

How It Works

Same technique as basic shining text:

1. Split text into character spans
2. Use CSS custom properties (`--i`) for staggered delays
3. Animate both `color` and `text-shadow` together
4. Shadow creates a glow effect when the character is active

The glow enhances the wave effect by making active characters more prominent.