feat: Add new animations and optimize global CSS for improved performance and readability.

components/ui/Card.tsx

@@ -4,20 +4,23 @@ interface CardProps {
   children: React.ReactNode;
   className?: string;
   hover?: boolean;
+  blur?: boolean;
   onClick?: () => void;
   style?: React.CSSProperties;
 }
 
-export function Card({ children, className = '', hover = true, onClick, style }: CardProps) {
-  const hoverStyles = hover 
-    ? "hover:translate-y-[-2px] hover:shadow-[0_8px_24px_var(--shadow-color)] cursor-pointer transition-transform duration-200 ease-out" 
+export function Card({ children, className = '', hover = true, blur = true, onClick, style }: CardProps) {
+  const hoverStyles = hover
+    ? "hover:translate-y-[-2px] hover:shadow-[0_8px_24px_var(--shadow-color)] cursor-pointer transition-transform duration-200 ease-out"
     : "";
 
+  // Conditionally apply blur classes - NOW DISABLED GLOBALLY via CSS override, but logic kept for structure
+  const blurClasses = blur
+    ? "bg-[var(--glass-bg)]" // Removed backdrop-blur classes here as they are expensive
+    : "bg-[var(--bg-color)]/90"; // More opaque fallback
+
   const baseClasses = `
-    bg-[var(--glass-bg)]
-    backdrop-blur-[12px]
-    saturate-[120%]
-    [-webkit-backdrop-filter:blur(12px)_saturate(120%)]
+    ${blurClasses}
     rounded-[var(--radius-2xl)]
     shadow-[0_2px_8px_var(--shadow-color)] md:shadow-[var(--shadow-md)]
     border
@@ -31,7 +34,7 @@ export function Card({ children, className = '', hover = true, onClick, style }:
   // Use semantic button when interactive
   if (onClick) {
     return (
-      <button 
+      <button
         type="button"
         onClick={onClick}
         className={`${baseClasses} text-left w-full`}