Update src/index.css

src/index.css

@@ -1,55 +1,75 @@
+/* Base Font Definitions */
 .font-orbitron { font-family: 'Orbitron', sans-serif; }
 .font-inter { font-family: 'Inter', sans-serif; }
 
-/* Neon Glow for the header - Adjusted for readability */
-@keyframes neon-glow {
-    0%, 100% {
-        /* Base text shadow for sharp inner glow */
+/* Enhanced Rainbow Glow for the Header (Flag Fluttering/Water Flowing Effect) */
+@keyframes rainbow-glow {
+    0% {
+        filter: hue-rotate(0deg) brightness(1.2);
+        text-shadow: 
+            0 0 8px rgba(255,0,0,0.8), /* Red */
+            0 0 15px rgba(255,100,0,0.6), /* Orange */
+            0 0 25px rgba(255,200,0,0.4); /* Yellow */
+        transform: scale(1) skewY(0deg);
+    }
+    25% {
+        filter: hue-rotate(90deg) brightness(1.3);
         text-shadow: 
-            0 0 4px rgba(0, 255, 255, 0.8), /* Cyan */
-            0 0 8px rgba(255, 255, 0, 0.6), /* Yellow */
-            0 0 12px rgba(0, 150, 255, 0.4); /* Electric Blue */
-        transform: scale(1);
+            0 0 8px rgba(200,255,0,0.8), /* Yellow-Green */
+            0 0 15px rgba(100,255,0,0.6), /* Green */
+            0 0 25px rgba(0,255,0,0.4); /* Bright Green */
+        transform: scale(1.01) skewY(0.5deg); /* Subtle flutter */
     }
     50% {
-        /* Expanded text shadow for soft outer glow */
+        filter: hue-rotate(180deg) brightness(1.4);
         text-shadow: 
-            0 0 6px rgba(0, 255, 255, 1), 
-            0 0 12px rgba(0, 255, 255, 0.8), 
-            0 0 20px rgba(255, 255, 0, 0.7), 
-            0 0 30px rgba(255, 255, 0, 0.5),
-            0 0 40px rgba(0, 150, 255, 0.6),
-            0 0 50px rgba(0, 150, 255, 0.4);
-        transform: scale(1.01);
+            0 0 8px rgba(0,255,255,0.8), /* Cyan */
+            0 0 15px rgba(0,150,255,0.6), /* Electric Blue */
+            0 0 25px rgba(0,50,255,0.4); /* Deep Blue */
+        transform: scale(1) skewY(-0.5deg); /* Subtle flutter */
+    }
+    75% {
+        filter: hue-rotate(270deg) brightness(1.3);
+        text-shadow: 
+            0 0 8px rgba(150,0,255,0.8), /* Purple */
+            0 0 15px rgba(200,0,255,0.6), /* Magenta */
+            0 0 25px rgba(255,0,255,0.4); /* Fuchsia */
+        transform: scale(1.01) skewY(0.5deg); /* Subtle flutter */
+    }
+    100% {
+        filter: hue-rotate(360deg) brightness(1.2);
+        text-shadow: 
+            0 0 8px rgba(255,0,0,0.8), /* Red */
+            0 0 15px rgba(255,100,0,0.6), /* Orange */
+            0 0 25px rgba(255,200,0,0.4); /* Yellow */
+        transform: scale(1) skewY(0deg);
     }
-}
-.animate-neon-glow {
-    animation: neon-glow 2s infinite alternate; /* Slower pulse for elegance */
-}
-
-/* New Rainbow Glow for Header */
-@keyframes rainbow-glow {
-    0% { filter: hue-rotate(0deg); text-shadow: 0 0 5px rgba(255,0,0,0.7), 0 0 10px rgba(255,100,0,0.5), 0 0 15px rgba(255,200,0,0.3); }
-    25% { filter: hue-rotate(90deg); text-shadow: 0 0 5px rgba(200,255,0,0.7), 0 0 10px rgba(100,255,0,0.5), 0 0 15px rgba(0,255,0,0.3); }
-    50% { filter: hue-rotate(180deg); text-shadow: 0 0 5px rgba(0,255,255,0.7), 0 0 10px rgba(0,150,255,0.5), 0 0 15px rgba(0,50,255,0.3); }
-    75% { filter: hue-rotate(270deg); text-shadow: 0 0 5px rgba(150,0,255,0.7), 0 0 10px rgba(200,0,255,0.5), 0 0 15px rgba(255,0,255,0.3); }
-    100% { filter: hue-rotate(360deg); text-shadow: 0 0 5px rgba(255,0,0,0.7), 0 0 10px rgba(255,100,0,0.5), 0 0 15px rgba(255,200,0,0.3); }
 }
 .animate-rainbow-glow {
-    animation: rainbow-glow 8s linear infinite alternate; /* Smooth, continuous rainbow shift */
+    animation: rainbow-glow 10s linear infinite alternate; /* Slower, more immersive shift */
 }
 
-/* Light theme rainbow glow */
+/* Light theme rainbow glow (adjusted for visibility on light backgrounds) */
 @keyframes rainbow-glow-light {
-    0% { filter: hue-rotate(0deg); text-shadow: 0 0 3px rgba(0,0,0,0.2), 0 0 6px rgba(0,0,0,0.1); }
-    50% { filter: hue-rotate(180deg); text-shadow: 0 0 4px rgba(0,0,0,0.3), 0 0 8px rgba(0,0,0,0.2); }
-    100% { filter: hue-rotate(360deg); text-shadow: 0 0 3px rgba(0,0,0,0.2), 0 0 6px rgba(0,0,0,0.1); }
+    0% { filter: hue-rotate(0deg) brightness(0.8); text-shadow: 0 0 3px rgba(0,0,0,0.2), 0 0 6px rgba(0,0,0,0.1); }
+    50% { filter: hue-rotate(180deg) brightness(0.9); text-shadow: 0 0 4px rgba(0,0,0,0.3), 0 0 8px rgba(0,0,0,0.2); }
+    100% { filter: hue-rotate(360deg) brightness(0.8); text-shadow: 0 0 3px rgba(0,0,0,0.2), 0 0 6px rgba(0,0,0,0.1); }
 }
 .animate-rainbow-glow-light {
-    animation: rainbow-glow-light 8s linear infinite alternate;
+    animation: rainbow-glow-light 10s linear infinite alternate;
+}
+
+/* Subtle pulse glow for UI elements */
+@keyframes pulse-glow {
+    0%, 100% { box-shadow: 0 0 5px rgba(0, 255, 255, 0.3), 0 0 10px rgba(0, 255, 255, 0.1); }
+    50% { box-shadow: 0 0 8px rgba(0, 255, 255, 0.5), 0 0 15px rgba(0, 255, 255, 0.2); }
+}
+.animate-pulse-glow {
+    animation: pulse-glow 3s ease-in-out infinite alternate;
 }
 
 
+/* Scan line effect for QR preview */
 @keyframes scan-light {
     0% {
         transform: translateX(-100%);
@@ -65,6 +85,7 @@
     animation: scan-light 3s infinite linear;
 }
 
+/* Custom scrollbar styles */
 .custom-scrollbar::-webkit-scrollbar {
     width: 8px;
 }