Merge version_4_1777316815828 into main

Merge version_4_1777316815828 into main

src/components/AnimatedBlueBackground.tsx

@@ -0,0 +1,17 @@
+export default function AnimatedBlueBackground() {
+  return (
+    <div className="fixed inset-0 z-[-1] overflow-hidden pointer-events-none bg-background">
+      <div 
+        className="absolute top-[-10%] left-[-10%] w-[40%] h-[40%] rounded-full bg-[#3b82f6]/20 blur-[100px] animate-blue-pulse" 
+      />
+      <div 
+        className="absolute bottom-[-10%] right-[-10%] w-[50%] h-[50%] rounded-full bg-[#2563eb]/20 blur-[120px] animate-blue-pulse" 
+        style={{ animationDelay: '2s', animationDuration: '12s' }}
+      />
+      <div 
+        className="absolute top-[20%] right-[20%] w-[30%] h-[30%] rounded-full bg-[#60a5fa]/20 blur-[80px] animate-blue-pulse" 
+        style={{ animationDelay: '4s', animationDuration: '10s' }}
+      />
+    </div>
+  );
+}

src/components/Layout.tsx

@@ -1,6 +1,7 @@
 import FooterBrandReveal from '@/components/sections/footer/FooterBrandReveal';
 import NavbarDropdown from '@/components/ui/NavbarDropdown';
 import { Outlet } from 'react-router-dom';
+import AnimatedBlueBackground from '@/components/AnimatedBlueBackground';
 
 export default function Layout() {
   const navItems = [
@@ -44,6 +45,7 @@ export default function Layout() {
       }}
      navItems={navItems} />
       <main className="flex-grow">
+        <AnimatedBlueBackground />
         <Outlet />
       </main>
       <FooterBrandReveal
@@ -101,4 +103,4 @@ export default function Layout() {
     />
     </>
   );
-}
+}

src/index.css

@@ -3,6 +3,15 @@
 @import "./styles/masks.css";
 @import "./styles/animations.css";
 
+@keyframes blue-pulse {
+  0%, 100% { opacity: 0.3; transform: scale(1) translate(0, 0); }
+  50% { opacity: 0.6; transform: scale(1.1) translate(2%, 2%); }
+}
+
+.animate-blue-pulse {
+  animation: blue-pulse 8s ease-in-out infinite;
+}
+
 :root {
   /* @colorThemes/lightTheme/grayNavyBlue */
   --background: #0a0a0a;