explosion

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 {