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/ClientWrappers.tsx

@@ -6,11 +6,8 @@
  */
 
 import { NextIntlClientProvider } from 'next-intl';
+import dynamic from 'next/dynamic';
 import Hero from './Hero';
-import About from './About';
-import Projects from './Projects';
-import Contact from './Contact';
-import Footer from './Footer';
 import type {
   HeroTranslations,
   AboutTranslations,
@@ -21,6 +18,12 @@ import type {
 import enMessages from '@/messages/en.json';
 import deMessages from '@/messages/de.json';
 
+// Lazy-load below-fold sections to reduce initial JS payload
+const About = dynamic(() => import('./About'), { ssr: false });
+const Projects = dynamic(() => import('./Projects'), { ssr: false });
+const Contact = dynamic(() => import('./Contact'), { ssr: false });
+const Footer = dynamic(() => import('./Footer'), { ssr: false });
+
 const messageMap = { en: enMessages, de: deMessages };
 
 function getNormalizedLocale(locale: string): 'en' | 'de' {