Fix hero image SVG animations and enhance data line effects

- Move SVG path definitions to defs section for proper animation references
- Add staggered data-pulse animations to data lines with sequential delays
- Fix animateMotion path references for moving particles

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>

assets/css/main.css

@@ -3590,3 +3590,33 @@ main {
 .grecaptcha-badge {
     visibility: hidden !important;
 }
+
+/* Additional hero graphic animations */
+.hero-graphic .data-line-1,
+.hero-graphic .data-line-2,
+.hero-graphic .data-line-3,
+.hero-graphic .data-line-4,
+.hero-graphic .data-line-5,
+.hero-graphic .data-line-6 {
+    animation: data-pulse 3s ease-in-out infinite;
+}
+
+.hero-graphic .data-line-2 {
+    animation-delay: 0.5s;
+}
+
+.hero-graphic .data-line-3 {
+    animation-delay: 1s;
+}
+
+.hero-graphic .data-line-4 {
+    animation-delay: 1.5s;
+}
+
+.hero-graphic .data-line-5 {
+    animation-delay: 2s;
+}
+
+.hero-graphic .data-line-6 {
+    animation-delay: 2.5s;
+}

assets/css/main.min.css

@@ -3542,3 +3542,33 @@ main {
 .grecaptcha-badge {
     visibility: hidden !important;
 }
+
+/* Additional hero graphic animations */
+.hero-graphic .data-line-1,
+.hero-graphic .data-line-2,
+.hero-graphic .data-line-3,
+.hero-graphic .data-line-4,
+.hero-graphic .data-line-5,
+.hero-graphic .data-line-6 {
+    animation: data-pulse 3s ease-in-out infinite;
+}
+
+.hero-graphic .data-line-2 {
+    animation-delay: 0.5s;
+}
+
+.hero-graphic .data-line-3 {
+    animation-delay: 1s;
+}
+
+.hero-graphic .data-line-4 {
+    animation-delay: 1.5s;
+}
+
+.hero-graphic .data-line-5 {
+    animation-delay: 2s;
+}
+
+.hero-graphic .data-line-6 {
+    animation-delay: 2.5s;
+}

index.php

@@ -478,6 +478,11 @@ $twitter_card_image = "https://ukdataservices.co.uk/assets/images/ukds-main-logo
             <div class="hero-image">
                 <div class="hero-graphic">
                     <svg width="500" height="400" viewBox="0 0 500 400" xmlns="http://www.w3.org/2000/svg">
+                        <!-- Path definitions for animations -->
+                        <defs>
+                            <path id="extraction-path" d="M290 140 Q350 120 380 160"/>
+                        </defs>
+                        
                         <!-- Background circles for depth -->
                         <circle cx="400" cy="200" r="180" fill="#179e83" opacity="0.08" class="bg-circle-1"/>
                         <circle cx="350" cy="150" r="120" fill="#ffffff" opacity="0.03" class="bg-circle-2"/>
@@ -559,10 +564,6 @@ $twitter_card_image = "https://ukdataservices.co.uk/assets/images/ukds-main-logo
                             <animate attributeName="cy" values="360;340;360" dur="3.5s" repeatCount="indefinite"/>
                         </circle>
                         
-                        <!-- Hidden path for particles -->
-                        <defs>
-                            <path id="extraction-path" d="M290 140 Q350 120 380 160"/>
-                        </defs>
                     </svg>
                 </div>
             </div>