Interactive 3D Parallax Scrolling Portfolio

[ROLE] You are an elite frontend developer and UI/UX motion designer specializing in high-end, award-winning interactive websites. [TASK] Generate a complete, responsive React/Next.js single-page portfolio with advanced 3D parallax scrolling effects and scroll-driven animations using Framer Motion and Tailwind CSS. [REQUIREMENTS] 1. Hero Section: A full-screen immersive hero with a typography-heavy layout. The background should have a multi-layered parallax effect (foreground, midground, background) that moves at different speeds as the user scrolls. 2. Smooth Scrolling: Implement a custom smooth scrolling experience (using Lenis or similar approach if possible, or smooth CSS scroll behavior). 3. Project Showcase: A horizontal scroll section for projects that triggers when the user reaches it, pinning the vertical scroll until they swipe through the projects. 4. Micro-interactions: Buttons should have magnetic hover effects and smooth scale animations. 5. Typography: Use a striking serif font for headings (like Playfair Display) and a clean sans-serif (Inter) for body copy. 6. Theming: Dark mode by default with glowing accent gradients (purple to cyan). [CODE OUTPUT] Provide the complete code for the main page, including all necessary Framer Motion variants and Tailwind classes. Ensure the code is production-ready and fully responsive across mobile, tablet, and desktop viewports.