Update client/src/index.css

client/src/index.css

@@ -7,7 +7,7 @@
   --glass-bg: rgba(255, 255, 255, 0.05);
   --glass-border: rgba(255, 255, 255, 0.1);
   --glass-blur: 16px;
-  --font-pixel: 'Courier New', Courier, monospace; /* Fallback pixel-ish font */
+  --font-pixel: 'Courier New', Courier, monospace;
 }
 
 body {
@@ -16,46 +16,90 @@ body {
   color: white;
   font-family: var(--font-pixel);
   overflow-x: hidden;
-  -webkit-font-smoothing: none; /* Crisper pixels */
+  -webkit-font-smoothing: none;
 }
 
-/* THE LIQUID GLASS CONTAINER */
+/* --- ANIMATIONS --- */
+@keyframes shimmer {
+  0% { box-shadow: 0 0 5px rgba(85, 255, 85, 0.2), inset 0 0 10px rgba(85,255,85,0.1); border-color: rgba(255,255,255,0.2); }
+  50% { box-shadow: 0 0 20px rgba(85, 255, 85, 0.6), inset 0 0 20px rgba(85,255,85,0.2); border-color: var(--mc-green); }
+  100% { box-shadow: 0 0 5px rgba(85, 255, 85, 0.2), inset 0 0 10px rgba(85,255,85,0.1); border-color: rgba(255,255,255,0.2); }
+}
+
+/* THE DANCING BEAR ANIMATION */
+@keyframes bearDance {
+  0% { transform: translateY(0) rotate(0deg) scale(1); }
+  25% { transform: translateY(-10px) rotate(-10deg) scale(1.1); }
+  50% { transform: translateY(0) rotate(0deg) scale(1); }
+  75% { transform: translateY(-10px) rotate(10deg) scale(1.1); }
+  100% { transform: translateY(0) rotate(0deg) scale(1); }
+}
+
+.dancing-bear {
+  font-size: 80px;
+  display: inline-block;
+  animation: bearDance 0.8s infinite ease-in-out;
+  filter: drop-shadow(0 0 20px var(--mc-purple));
+}
+
+.logo-glass {
+  background: rgba(255, 255, 255, 0.03);
+  backdrop-filter: blur(12px);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  border-radius: 16px;
+  padding: 15px 30px;
+  display: inline-block;
+  animation: shimmer 3s infinite ease-in-out;
+  margin-bottom: 10px;
+}
+
+.logo-text {
+  font-size: 2rem;
+  font-weight: 900;
+  letter-spacing: 2px;
+  background: linear-gradient(90deg, #fff, #aaa, #fff);
+  background-size: 200% auto;
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  text-transform: uppercase;
+}
+
+.sub-brand {
+  color: var(--mc-purple);
+  font-size: 0.9rem;
+  letter-spacing: 4px;
+  text-transform: uppercase;
+  margin-bottom: 30px;
+  opacity: 0.8;
+}
+
+/* GENERAL GLASS UI */
 .glass-panel {
   background: var(--glass-bg);
   backdrop-filter: blur(var(--glass-blur));
-  -webkit-backdrop-filter: blur(var(--glass-blur));
   border: 1px solid var(--glass-border);
   box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
 }
 
-/* NEON PIXEL TEXT */
-h1 {
-  text-transform: uppercase;
-  letter-spacing: 4px;
-  text-shadow: 4px 4px 0px var(--mc-purple); /* Blocky shadow */
-}
-
-/* BUTTONS: Circular Edged (Pill) Glass */
+/* BUTTONS */
 button {
   font-family: var(--font-pixel);
   text-transform: uppercase;
   font-weight: bold;
   letter-spacing: 1px;
-  border-radius: 9999px; /* Maximum roundness */
+  border-radius: 9999px;
   border: 1px solid rgba(255,255,255,0.2);
   background: rgba(255,255,255,0.05);
   backdrop-filter: blur(10px);
   color: var(--mc-green);
   transition: all 0.3s ease;
   cursor: pointer;
-  position: relative;
-  overflow: hidden;
 }
 
 button:hover:not(:disabled) {
   background: var(--mc-green);
   color: black;
-  box-shadow: 0 0 15px var(--mc-green); /* Neon Glow */
+  box-shadow: 0 0 20px var(--mc-green);
 }
 
 button:disabled {
@@ -63,7 +107,7 @@ button:disabled {
   cursor: not-allowed;
 }
 
-/* INPUTS: Sleek Mobile Bar */
+/* INPUTS */
 textarea, select {
   font-family: var(--font-pixel);
   background: rgba(0, 0, 0, 0.3);
@@ -72,21 +116,7 @@ textarea, select {
   border-radius: 20px;
   backdrop-filter: blur(5px);
 }
-
 textarea:focus, select:focus {
   outline: none;
   border-color: var(--mc-green);
-  box-shadow: 0 0 10px rgba(85, 255, 85, 0.2);
-}
-
-/* PIXEL ART PLACEHOLDER ANIMATION */
-@keyframes float {
-  0% { transform: translateY(0px); }
-  50% { transform: translateY(-10px); }
-  100% { transform: translateY(0px); }
-}
-
-.pixel-avatar {
-  image-rendering: pixelated;
-  animation: float 3s ease-in-out infinite;
 }