perf: remove framer-motion and lucide-react from critical path

- Remove framer-motion from Hero.tsx and HeaderClient.tsx, replace with CSS animations/transitions
- Replace lucide-react icons (Menu, X, Mail) with inline SVGs in HeaderClient.tsx
- Lazy-load About, Projects, Contact, Footer via dynamic() imports in ClientWrappers.tsx
- Defer ShaderGradient/BackgroundBlobs loading via requestIdleCallback in ClientProviders.tsx
- Remove AnimatePresence page wrapper that caused full re-renders
- Enable experimental.optimizeCss (critters) for critical CSS inlining
- Add fadeIn keyframe to Tailwind config for CSS-based animations

Homepage JS reduced from 563KB to 438KB (-125KB).
Eliminates ~39s main thread work from WebGL init and layout thrashing.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

app/components/ClientProviders.tsx

@@ -7,7 +7,6 @@ import { ToastProvider } from "@/components/Toast";
 import ErrorBoundary from "@/components/ErrorBoundary";
 import { ConsentProvider } from "./ConsentProvider";
 import { ThemeProvider } from "./ThemeProvider";
-import { motion, AnimatePresence } from "framer-motion";
 
 const BackgroundBlobs = dynamic(() => import("@/components/BackgroundBlobs").catch(() => ({ default: () => null })), {
   ssr: false,
@@ -25,66 +24,19 @@ export default function ClientProviders({
   children: React.ReactNode;
 }) {
   const [mounted, setMounted] = useState(false);
-  const [is404Page, setIs404Page] = useState(false);
   const pathname = usePathname();
 
   useEffect(() => {
     setMounted(true);
-    // Check if we're on a 404 page by looking for the data attribute or pathname
-    const check404 = () => {
-      try {
-        if (typeof window !== "undefined" && typeof document !== "undefined") {
-          const has404Component = document.querySelector('[data-404-page]');
-          const is404Path = pathname === '/404' || (window.location && (window.location.pathname === '/404' || window.location.pathname.includes('404')));
-          setIs404Page(!!has404Component || is404Path);
-        }
-      } catch (error) {
-        // Silently fail - 404 detection is not critical
-        if (process.env.NODE_ENV === 'development') {
-          console.warn('Error checking 404 status:', error);
-        }
-      }
-    };
-    // Check immediately and after a short delay
-    try {
-      check404();
-      const timeout = setTimeout(check404, 100);
-      const interval = setInterval(check404, 500);
-      return () => {
-        try {
-          clearTimeout(timeout);
-          clearInterval(interval);
-        } catch {
-          // Silently fail during cleanup
-        }
-      };
-    } catch (error) {
-      // If setup fails, just return empty cleanup
-      if (process.env.NODE_ENV === 'development') {
-        console.warn('Error setting up 404 check:', error);
-      }
-      return () => {};
-    }
   }, [pathname]);
 
-  // Wrap in multiple error boundaries to isolate failures
   return (
     <ErrorBoundary>
       <ErrorBoundary>
         <ConsentProvider>
           <ThemeProvider attribute="class" defaultTheme="light" enableSystem={false}>
-            <GatedProviders mounted={mounted} is404Page={is404Page}>
-              <AnimatePresence mode="wait" initial={false}>
-                <motion.div
-                  key={pathname}
-                  initial={{ opacity: 0, y: 10 }}
-                  animate={{ opacity: 1, y: 0 }}
-                  exit={{ opacity: 0, y: -10 }}
-                  transition={{ duration: 0.4, ease: "easeInOut" }}
-                >
-                  {children}
-                </motion.div>
-              </AnimatePresence>
+            <GatedProviders mounted={mounted}>
+              {children}
             </GatedProviders>
           </ThemeProvider>
         </ConsentProvider>
@@ -99,13 +51,20 @@ function GatedProviders({
 }: {
   children: React.ReactNode;
   mounted: boolean;
-  is404Page: boolean;
 }) {
+  // Defer heavy Three.js/WebGL background until after LCP
+  const [deferredReady, setDeferredReady] = useState(false);
+  useEffect(() => {
+    if (!mounted) return;
+    const id = requestIdleCallback(() => setDeferredReady(true), { timeout: 5000 });
+    return () => cancelIdleCallback(id);
+  }, [mounted]);
+
   return (
     <ErrorBoundary>
       <ToastProvider>
-        {mounted && <BackgroundBlobs />}
-        {mounted && <ShaderGradientBackground />}
+        {deferredReady && <BackgroundBlobs />}
+        {deferredReady && <ShaderGradientBackground />}
         <div className="relative z-10">{children}</div>
       </ToastProvider>
     </ErrorBoundary>