updated site

main.js

@@ -180,6 +180,67 @@ function initParallax() {
     }, { passive: true });
 }
 
+// ===== METRICS COUNTER ANIMATION =====
+function initMetricsCounter() {
+    const gauges = document.querySelectorAll('.gauge');
+    if (!gauges.length) return;
+  
+    const observer = new IntersectionObserver((entries) => {
+      entries.forEach(entry => {
+        if (entry.isIntersecting) {
+          animateGauge(entry.target);
+          observer.unobserve(entry.target);
+        }
+      });
+    }, { threshold: 0.5 });
+  
+    gauges.forEach(gauge => {
+      // Store original values
+      gauge.dataset.target = gauge.getAttribute('data-score');
+      // Reset to 0 for animation start
+      gauge.setAttribute('data-score', '0');
+      gauge.style.setProperty('--percent', '0%');
+      observer.observe(gauge);
+    });
+  
+    function animateGauge(gauge) {
+      // Check for reduced motion preference
+      const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+      const target = parseInt(gauge.dataset.target, 10);
+      
+      if (prefersReducedMotion) {
+          gauge.setAttribute('data-score', target);
+          gauge.style.setProperty('--percent', `${target}%`);
+          return;
+      }
+
+      const duration = 2000; // ms
+      const startTime = performance.now();
+  
+      function update(currentTime) {
+        const elapsed = currentTime - startTime;
+        const progress = Math.min(elapsed / duration, 1);
+        
+        // Easing (easeOutQuart)
+        const ease = 1 - Math.pow(1 - progress, 4);
+        
+        const currentVal = Math.floor(ease * target);
+        gauge.setAttribute('data-score', currentVal);
+        gauge.style.setProperty('--percent', `${currentVal}%`);
+  
+        if (progress < 1) {
+          requestAnimationFrame(update);
+        } else {
+          // Ensure final value is exact
+          gauge.setAttribute('data-score', target);
+          gauge.style.setProperty('--percent', `${target}%`);
+        }
+      }
+  
+      requestAnimationFrame(update);
+    }
+}
+
 // ===== INITIALIZE ALL =====
 document.addEventListener('DOMContentLoaded', () => {
   initTypewriter();
@@ -188,4 +249,5 @@ document.addEventListener('DOMContentLoaded', () => {
   initParticles();
   initTestimonials();
   initParallax();
+  initMetricsCounter();
 });