explosion

index.html

@@ -88,7 +88,7 @@
           <span class="label">Pure Yinglet</span>
         </div>
         <div class="stat reveal" style="transition-delay: 0.2s">
-          <span class="number" data-target="100000" data-duration="2000" data-final="∞">∞</span>
+          <span class="number" data-target="100000" data-target-min="60000" data-target-max="100000" data-duration="1000" data-final="∞">∞</span>
           <span class="label">Swagger Units</span>
         </div>
         <div class="stat reveal" style="transition-delay: 0.3s">

script.js

@@ -1056,6 +1056,11 @@
           var numbers = document.querySelectorAll('.stat .number[data-target]');
           numbers.forEach(function(el) {
             var target = parseInt(el.getAttribute('data-target'));
+            var randMax = parseInt(el.getAttribute('data-target-max'));
+            if (randMax) {
+              var randMin = parseInt(el.getAttribute('data-target-min')) || 0;
+              target = randMin + Math.floor(Math.random() * (randMax - randMin + 1));
+            }
             var suffix = el.getAttribute('data-suffix') || '';
             var current = 0;
             if (target <= 0) return;
@@ -1070,7 +1075,70 @@
                 current = target;
                 clearInterval(timer);
                 if (final) {
+                  var digits = el.textContent.replace(/[^0-9]/g, '').split('');
+                  if (digits.length === 0) digits = ['0'];
+                  var rect = el.getBoundingClientRect();
+                  var fontSize = parseInt(window.getComputedStyle(el).fontSize);
+                  var charW = rect.width / digits.length;
+                  var frags = [];
+                  el.style.opacity = '0';
+                  for (var d = 0; d < digits.length; d++) {
+                    var frag = document.createElement('div');
+                    frag.className = 'fragment';
+                    frag.textContent = digits[d];
+                    var dx = rect.left + d * charW + charW / 2;
+                    var dy = rect.top + rect.height / 2;
+                    var angle = Math.random() * Math.PI * 2;
+                    var speed = 3 + Math.random() * 8;
+                    frag.style.cssText = 'position:fixed;left:' + dx + 'px;top:' + dy + 'px;font-size:' + fontSize + 'px;font-weight:900;color:#f5a623;font-family:Inter,system-ui,sans-serif;pointer-events:none;z-index:999;opacity:1;transform:translate(-50%,-50%);text-shadow:0 0 20px rgba(245,166,35,0.5);';
+                    document.body.appendChild(frag);
+                    frags.push({
+                      el: frag,
+                      x: dx,
+                      y: dy,
+                      vx: Math.cos(angle) * speed + (Math.random() - 0.5) * 3,
+                      vy: Math.sin(angle) * speed - 6,
+                      rot: 0,
+                      rotSpeed: (Math.random() - 0.5) * 30,
+                    });
+                  }
+                  var gravity = 0.35;
+                  var running = true;
+                  var startTime = Date.now();
+                  function animateFrags() {
+                    if (!running) return;
+                    var alive = false;
+                    var elapsed = Date.now() - startTime;
+                    for (var k = 0; k < frags.length; k++) {
+                      var f = frags[k];
+                      f.vy += gravity;
+                      f.x += f.vx;
+                      f.y += f.vy;
+                      f.rot += f.rotSpeed;
+                      f.vx *= 0.99;
+                      var alpha = Math.max(0, 1 - elapsed / 2500);
+                      f.el.style.left = f.x + 'px';
+                      f.el.style.top = f.y + 'px';
+                      f.el.style.transform = 'translate(-50%,-50%) rotate(' + f.rot + 'deg)';
+                      f.el.style.opacity = alpha;
+                      if (alpha > 0 && f.y < window.innerHeight + 200) {
+                        alive = true;
+                      }
+                    }
+                    if (alive) {
+                      requestAnimationFrame(animateFrags);
+                    }
+                  }
+                  animateFrags();
                   el.textContent = final;
+                  el.style.opacity = '';
+                  el.classList.add('fade-in-final');
+                  setTimeout(function() {
+                    running = false;
+                    for (var j = 0; j < frags.length; j++) {
+                      frags[j].el.remove();
+                    }
+                  }, 2500);
                   return;
                 }
               }

style.css

@@ -35,6 +35,32 @@
   50% { box-shadow: 0 0 40px rgba(var(--glow-rgb), 0.25); }
 }
 
+@keyframes explodeNum {
+  0% { transform: scale(1); opacity: 1; letter-spacing: normal; filter: blur(0); }
+  40% { transform: scale(1.6); opacity: 0.6; letter-spacing: 0.15em; filter: blur(1px); color: #ff6b6b; }
+  100% { transform: scale(2.5); opacity: 0; letter-spacing: 0.4em; filter: blur(6px); color: #ff6b6b; }
+}
+
+@keyframes fadeInFinal {
+  0% { opacity: 0; transform: scale(0.3); filter: blur(10px); }
+  100% { opacity: 1; transform: scale(1); filter: blur(0); }
+}
+
+.number.exploding {
+  animation: explodeNum 0.7s ease-out forwards;
+  position: relative;
+  z-index: 2;
+}
+
+.number.fade-in-final {
+  animation: fadeInFinal 0.5s ease-out forwards;
+}
+
+.fragment {
+  pointer-events: none;
+  will-change: transform, opacity, left, top;
+}
+
 .reveal {
   opacity: 0;
   transform: translateY(30px);
@@ -228,6 +254,7 @@ section h2 {
   border-radius: 1rem;
   padding: 2rem 1rem;
   transition: transform 0.3s, border-color 0.3s, box-shadow 0.3s;
+  position: relative;
 }
 
 .stat:hover {