⚡ Optimize CSS animation to prevent layout thrashing

[xRahul]

💡 What:
Refactored the text swap animation in src/style.css and index.html. Instead of using a pseudo-element (::before) and animating the content property, I implemented a solution using multiple <span> elements stacked on top of each other using CSS Grid (display: grid; place-items: center). The animation now cycles through these elements by toggling their opacity and visibility properties.

🎯 Why:
The previous implementation animated the content property. Changing content forces the browser to recalculate the layout (reflow) and repaint the page, which is an expensive operation known as "layout thrashing." By using opacity (and visibility), the animation logic is offloaded to the compositor thread (mostly) and avoids layout shifts, resulting in smoother performance and lower CPU usage.

📊 Measured Improvement:

• Visual Baseline: The original animation functionality (text cycling) is exactly preserved.
• Performance: While direct layout thrashing metrics are hard to capture in this environment, this is a standard web performance optimization. Moving from content (Layout trigger) to opacity (Composite trigger) is a known performance win.
• Tests: Added tests/animation-verification.spec.ts to ensure the new DOM structure is correctly rendered. All existing tests passed. Verified visually with screenshots.

---

PR created automatically by Jules for task 3608634246665415621 started by @xRahul

[google-labs-jules]

👋 Jules, reporting for duty! I'm here to lend a hand with this pull request.

When you start a review, I'll add a 👀 emoji to each comment to let you know I've read it. I'll focus on feedback directed at me and will do my best to stay out of conversations between you and other bots or reviewers to keep the noise down.

I'll push a commit with your requested changes shortly after. Please note there might be a delay between these steps, but rest assured I'm on the job!

For more direct control, you can switch me to Reactive Mode. When this mode is on, I will only act on comments where you specifically mention me with @jules. You can find this option in the Pull Request section of your global Jules UI settings. You can always switch back!

New to Jules? Learn more at jules.google/docs.

---

For security, I will only act on instructions from the user who triggered this task.