feat: replace glitch flicker with smooth color gradient animation

Update title with decryption effect and continuous color cycle animation.

Co-authored-by: Simon <85533298+handsomezhuzhu@users.noreply.github.com>

app/globals.css

@@ -124,3 +124,32 @@
     @apply bg-background text-foreground;
   }
 }
+
+/* Cyber gradient flow animation */
+@keyframes gradient-flow {
+  0% {
+    background-position: 0% 50%;
+  }
+  50% {
+    background-position: 100% 50%;
+  }
+  100% {
+    background-position: 0% 50%;
+  }
+}
+
+.cyber-title {
+  background: linear-gradient(
+    90deg,
+    oklch(0.75 0.12 180),
+    oklch(0.7 0.15 220),
+    oklch(0.65 0.18 280),
+    oklch(0.7 0.15 320),
+    oklch(0.75 0.12 180)
+  );
+  background-size: 300% 100%;
+  animation: gradient-flow 6s ease infinite;
+  -webkit-background-clip: text;
+  background-clip: text;
+  -webkit-text-fill-color: transparent;
+}

components/site-navigation.tsx

@@ -374,7 +374,7 @@ function getServerBadgeStyle(server: string) {
 export function SiteNavigation() {
   const [searchQuery, setSearchQuery] = useState("")
   const [displayText, setDisplayText] = useState("")
-  const [glitchActive, setGlitchActive] = useState(false)
+  const [isAnimationDone, setIsAnimationDone] = useState(false)
   const fullText = "SIMON站点导航"
 
   useEffect(() => {
@@ -396,18 +396,12 @@ export function SiteNavigation() {
       if (frame > totalFrames) {
         clearInterval(interval)
         setDisplayText(fullText)
+        setIsAnimationDone(true)
       }
     }, 40)
 
-    // Periodic glitch effect
-    const glitchInterval = setInterval(() => {
-      setGlitchActive(true)
-      setTimeout(() => setGlitchActive(false), 150)
-    }, 4000)
-
     return () => {
       clearInterval(interval)
-      clearInterval(glitchInterval)
     }
   }, [])
 
@@ -431,14 +425,9 @@ export function SiteNavigation() {
         {/* Header - 居中设计 */}
         <header className="mb-16 text-center">
           <h1
-            className={`text-4xl md:text-6xl font-bold tracking-widest mb-4 font-mono transition-all duration-75 ${
+            className={`text-4xl md:text-6xl font-bold tracking-widest mb-4 font-mono transition-all duration-500 ${
-              glitchActive ? "text-primary [text-shadow:2px_0_#ff0080,-2px_0_#00ffff]" : "text-foreground"
+              isAnimationDone ? "cyber-title" : "text-foreground"
             }`}
-            style={{
-              textShadow: glitchActive
-                ? "2px 0 #ff0080, -2px 0 #00ffff, 0 0 20px rgba(var(--primary), 0.8)"
-                : "0 0 30px oklch(0.75 0.12 180 / 0.3)",
-            }}
           >
             {displayText || "SIMON站点导航"}
           </h1>