feat: replace canvas-based particle background with high-performance LiquidEther fluid simulation component

src/index.css

@@ -4,18 +4,42 @@
 
 @layer base {
   :root {
-    --bg-color: #050505;
-    --text-primary: #f8fafc;
-    --text-secondary: #94a3b8;
+    --background: 222.2 84% 4.9%;
+    --foreground: 210 40% 98%;
+    --card: 222.2 84% 4.9%;
+    --card-foreground: 210 40% 98%;
+    --popover: 222.2 84% 4.9%;
+    --popover-foreground: 210 40% 98%;
+    --primary: 217.2 91.2% 59.8%;
+    --primary-foreground: 222.2 47.4% 11.2%;
+    --secondary: 217.2 32.6% 17.5%;
+    --secondary-foreground: 210 40% 98%;
+    --muted: 217.2 32.6% 17.5%;
+    --muted-foreground: 215 20.2% 65.1%;
+    --accent: 217.2 32.6% 17.5%;
+    --accent-foreground: 210 40% 98%;
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 210 40% 98%;
+    --border: 217.2 32.6% 17.5%;
+    --input: 217.2 32.6% 17.5%;
+    --ring: 224.3 76.3% 48%;
+    --radius: 0.5rem;
+    --bg-color: hsl(var(--background));
+    --text-primary: hsl(var(--foreground));
+    --text-secondary: hsl(var(--muted-foreground));
+  }
+}
+
+@layer base {
+  * {
+    @apply border-border;
   }
-  
   html {
     scroll-behavior: smooth;
     background-color: var(--bg-color);
   }
-
   body {
-    @apply bg-background text-slate-100 font-sans antialiased selection:bg-primary/30 selection:text-white;
+    @apply bg-background text-foreground font-sans antialiased selection:bg-primary/30 selection:text-white;
     min-height: 100vh;
     overflow-x: hidden;
   }
@@ -34,16 +58,8 @@
     @apply bg-clip-text text-transparent bg-gradient-to-r from-blue-400 via-indigo-400 to-purple-400;
   }
 
-  /* Animated shimmer text */
   .text-shimmer {
-    background: linear-gradient(
-      90deg,
-      #60a5fa 0%,
-      #a78bfa 25%,
-      #22d3ee 50%,
-      #a78bfa 75%,
-      #60a5fa 100%
-    );
+    background: linear-gradient(90deg, #60a5fa 0%, #a78bfa 25%, #22d3ee 50%, #a78bfa 75%, #60a5fa 100%);
     background-size: 200% auto;
     -webkit-background-clip: text;
     background-clip: text;
@@ -58,16 +74,12 @@
     background-size: 50px 50px;
   }
 
-  /* Glow behind cards */
   .glow-effect::before {
     content: '';
     @apply absolute inset-0 -z-10 bg-primary/20 blur-2xl rounded-full opacity-0 transition-opacity duration-300;
   }
-  .glow-effect:hover::before {
-    @apply opacity-100;
-  }
+  .glow-effect:hover::before { @apply opacity-100; }
 
-  /* Neon text glow */
   .text-glow {
     text-shadow:
       0 0 20px rgba(99, 130, 246, 0.5),
@@ -75,16 +87,106 @@
       0 0 100px rgba(99, 130, 246, 0.1);
   }
 
-  /* Pulsing ring */
-  .pulse-ring {
-    position: relative;
-  }
+  .pulse-ring { position: relative; }
   .pulse-ring::after {
     content: '';
     @apply absolute inset-0 rounded-full;
     border: 1px solid rgba(99, 130, 246, 0.5);
     animation: pulse-expand 2s ease-out infinite;
   }
+
+  /* ── Premium Glassmorphism ── */
+  .glass-premium {
+    background: linear-gradient(135deg, rgba(255,255,255,0.07) 0%, rgba(255,255,255,0.03) 100%);
+    backdrop-filter: blur(20px) saturate(180%);
+    -webkit-backdrop-filter: blur(20px) saturate(180%);
+    border: 1px solid rgba(255,255,255,0.08);
+    box-shadow:
+      0 8px 32px 0 rgba(0,0,0,0.45),
+      inset 0 1px 0 rgba(255,255,255,0.10),
+      inset 0 -1px 0 rgba(0,0,0,0.20);
+    transition: border-color 0.3s ease, box-shadow 0.3s ease;
+  }
+  .glass-premium:hover {
+    border-color: rgba(255,255,255,0.14);
+    box-shadow:
+      0 16px 48px 0 rgba(0,0,0,0.5),
+      inset 0 1px 0 rgba(255,255,255,0.15),
+      inset 0 -1px 0 rgba(0,0,0,0.20),
+      0 0 0 1px rgba(99,130,246,0.12);
+  }
+
+  /* Light refraction lines (top & left edge highlight) */
+  .glass-refract {
+    position: relative;
+    overflow: hidden;
+  }
+  .glass-refract::before {
+    content: '';
+    position: absolute;
+    top: 0; left: 0; right: 0;
+    height: 1px;
+    background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.45) 35%, rgba(255,255,255,0.12) 70%, transparent 100%);
+    z-index: 2;
+    pointer-events: none;
+  }
+  .glass-refract::after {
+    content: '';
+    position: absolute;
+    top: 0; bottom: 0; left: 0;
+    width: 1px;
+    background: linear-gradient(180deg, rgba(255,255,255,0.35) 0%, rgba(255,255,255,0.05) 50%, transparent 100%);
+    z-index: 2;
+    pointer-events: none;
+  }
+
+  /* Spotlight radial glow above element */
+  .spotlight {
+    position: relative;
+    isolation: isolate;
+  }
+  .spotlight::before {
+    content: '';
+    position: absolute;
+    inset: -80px;
+    background: radial-gradient(circle at 50% -10%, rgba(99,130,246,0.18) 0%, transparent 55%);
+    z-index: -1;
+    pointer-events: none;
+    border-radius: inherit;
+  }
+
+  /* Shine sweep on hover */
+  .glass-shine {
+    position: relative;
+    overflow: hidden;
+  }
+  .glass-shine::after {
+    content: '';
+    position: absolute;
+    top: -50%; left: -75%;
+    width: 50%; height: 200%;
+    background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.07) 50%, rgba(255,255,255,0) 100%);
+    transform: skewX(-20deg);
+    transition: left 0.65s ease;
+    pointer-events: none;
+    z-index: 2;
+  }
+  .glass-shine:hover::after { left: 125%; }
+
+  /* Section ambient orb helper */
+  .ambient-glow {
+    position: relative;
+  }
+  .ambient-glow::before {
+    content: '';
+    position: absolute;
+    top: -200px; left: -150px;
+    width: 600px; height: 600px;
+    background: radial-gradient(circle, rgba(59,130,246,0.07) 0%, transparent 70%);
+    pointer-events: none;
+    z-index: 0;
+    border-radius: 50%;
+  }
 }
 
 /* ── Keyframes ── */
@@ -126,7 +228,6 @@
   50%       { transform: translateY(-10px); }
 }
 
-/* Scan line across elements */
 @keyframes scan-line {
   0%   { top: -2px; opacity: 0.8; }
   80%  { opacity: 0.6; }