perf: deep react code splitting, next-intl payload scoping, and SVG hardware acceleration for PageSpeed 100

styles/globals.css

@@ -43,11 +43,11 @@
   --animate-slide-up: slide-up 0.6s ease-out;
   --animate-slow-zoom: slow-zoom 20s linear infinite;
   --animate-reveal: reveal 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
-  --animate-slight-fade-in-from-bottom: slight-fade-in-from-bottom 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
+  --animate-slight-fade-in-from-bottom: slight-fade-in-from-bottom 0.8s
+    cubic-bezier(0.16, 1, 0.3, 1) forwards;
   --animate-gradient-x: gradient-x 15s ease infinite;
 
   @keyframes gradient-x {
-
     0%,
     100% {
       background-position: 0% 50%;
@@ -135,10 +135,31 @@
       transform: translate(0, 0) scale(1);
     }
   }
+
+  @keyframes spin-slow {
+    to {
+      transform: rotate(360deg);
+    }
+  }
+
+  @keyframes flow {
+    to {
+      stroke-dashoffset: 0;
+    }
+  }
+
+  @keyframes solar-pulse {
+    0%,
+    100% {
+      fill-opacity: 0.2;
+    }
+    50% {
+      fill-opacity: 0.5;
+    }
+  }
 }
 
 @layer base {
-
   .bg-primary a,
   .bg-primary-dark a {
     @apply text-white/90 hover:text-white transition-colors;
@@ -321,4 +342,4 @@
 @utility content-visibility-auto {
   content-visibility: auto;
   contain-intrinsic-size: 1px 1000px;
-}
+}