feat: random light pulse along threads + box outlines

A blurred light pulse glides along one of the 5 wave threads
(wave1/2/3, thread1/2) every 2.5-7s. Color matches the active
theme (cyan on home/portfolio/about, pink/magenta on contact).

Pulse also follows the outline of designated boxes marked with
data-trail-box:
  - Home: 'Looking for inspiration?' + 'Ready to collaborate?'
  - Contact: 'Waiting to hear from you' card

Boxes are rebuilt on every pulse so they stay aligned during scroll
and respect viewport (off-screen boxes are skipped).

Pulse uses requestAnimationFrame + path.getPointAtLength for native
smoothness, fade-in 15% / hold 70% / fade-out 15%, screen blend
mode so it blends with the dark background.

src/pages/index.astro

@@ -51,7 +51,7 @@ import WaveBackground from '../components/WaveBackground.astro';
     
     <div class="flex flex-col md:flex-row gap-12 md:gap-24 items-center text-center">
       
-      <div class="flex flex-col items-center">
+      <div data-trail-box class="flex flex-col items-center px-6 py-4 rounded-2xl">
         <h2 class="text-3xl md:text-4xl text-white font-bold mb-6">Looking for inspiration?</h2>
         <a href="/portfolio" class="inline-block px-8 py-3 bg-white text-black font-bold rounded-full hover:bg-gray-200 transition transform hover:scale-105">
           My Portfolio
@@ -79,7 +79,7 @@ import WaveBackground from '../components/WaveBackground.astro';
         </a>
       </div>
 
-      <div class="flex flex-col items-center">
+      <div data-trail-box class="flex flex-col items-center px-6 py-4 rounded-2xl">
         <h2 class="text-3xl md:text-4xl text-white font-bold mb-6">Ready to collaborate?</h2>
         <a href="/contact" class="inline-block px-8 py-3 bg-white text-black font-bold rounded-full hover:bg-gray-200 transition transform hover:scale-105">
           Contact me