feat: add tech theme colors and animations to globals.css

src/app/globals.css

@@ -34,6 +34,10 @@
   --color-brand-primary-lighter: #E04A68;
   --color-brand-primary-bg: #FEF2F4;
   
+  --color-tech-blue: #00D9FF;
+  --color-tech-purple: #A855F7;
+  --color-tech-cyan: #06B6D4;
+  
   --color-success: #16A34A;
   --color-success-bg: #F0FDF4;
   --color-warning: #D97706;
@@ -112,6 +116,10 @@
   --color-brand-primary-lighter: #F08C9F;
   --color-brand-primary-bg: #1A0F11;
   
+  --color-tech-blue: #00D9FF;
+  --color-tech-purple: #A855F7;
+  --color-tech-cyan: #06B6D4;
+  
   --color-success: #22C55E;
   --color-success-bg: #052E16;
   --color-warning: #F59E0B;
@@ -605,3 +613,69 @@
     padding-bottom: var(--spacing-3xl);
   }
 }
+
+@keyframes glow {
+  0%, 100% {
+    box-shadow: 0 0 20px rgba(0, 217, 255, 0.3);
+  }
+  50% {
+    box-shadow: 0 0 40px rgba(0, 217, 255, 0.6);
+  }
+}
+
+@keyframes float {
+  0%, 100% {
+    transform: translateY(0px);
+  }
+  50% {
+    transform: translateY(-10px);
+  }
+}
+
+@keyframes pulse-glow {
+  0%, 100% {
+    opacity: 0.2;
+  }
+  50% {
+    opacity: 0.4;
+  }
+}
+
+.animate-glow {
+  animation: glow 2s ease-in-out infinite;
+}
+
+.animate-float {
+  animation: float 3s ease-in-out infinite;
+}
+
+.animate-pulse-glow {
+  animation: pulse-glow 2s ease-in-out infinite;
+}
+
+.tech-gradient {
+  background: linear-gradient(135deg, var(--color-tech-blue) 0%, var(--color-tech-purple) 100%);
+}
+
+.tech-gradient-text {
+  background: linear-gradient(135deg, var(--color-tech-blue) 0%, var(--color-tech-purple) 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+
+.tech-glow {
+  box-shadow: 0 0 20px rgba(0, 217, 255, 0.3);
+}
+
+.tech-glow-hover:hover {
+  box-shadow: 0 0 30px rgba(0, 217, 255, 0.5);
+}
+
+.tech-border {
+  border: 1px solid rgba(0, 217, 255, 0.3);
+}
+
+.tech-border-hover:hover {
+  border-color: rgba(0, 217, 255, 0.6);
+}