From f16add60ce644dddaaf2a3e071a6af4ad9eaba45 Mon Sep 17 00:00:00 2001
From: root <root@vm6.template>
Date: Wed, 16 Jul 2025 10:13:27 +0000
Subject: [PATCH] Fix hero image SVG animations and enhance data line effects
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 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     | 30 ++++++++++++++++++++++++++++++
 assets/css/main.min.css | 30 ++++++++++++++++++++++++++++++
 index.php               |  9 +++++----
 3 files changed, 65 insertions(+), 4 deletions(-)

diff --git a/assets/css/main.css b/assets/css/main.css
index 3100f9d..09f651b 100644
--- a/assets/css/main.css
+++ b/assets/css/main.css
@@ -3589,4 +3589,34 @@ main {
 /* Hide reCAPTCHA badge */
 .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;
 }
\ No newline at end of file
diff --git a/assets/css/main.min.css b/assets/css/main.min.css
index 86cb51b..6e22319 100644
--- a/assets/css/main.min.css
+++ b/assets/css/main.min.css
@@ -3541,4 +3541,34 @@ main {
 /* Hide reCAPTCHA badge */
 .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;
 }
\ No newline at end of file
diff --git a/index.php b/index.php
index c60f42d..8fab89c 100644
--- a/index.php
+++ b/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>