feat(how-it-works): integrate scroll-driven 3D experience

Migrate the standalone Vite + React Three Fiber experience into the existing
Next.js site as the body of the How It Works page, replacing the Miles3 /
WhyChooseDoormile / TheDoormileWay content sections while preserving the
Elementor hero, global Header/Footer, layout, routing and SEO.

- New self-contained module: src/modules/how-it-works-3d/ (R3F scene, hooks,
  zustand store, animations, curves, constants, utils, scoped CSS). App.jsx →
  Experience3D.jsx; 3d_scene.jsx → models/Scene3D.jsx.
- 32MB GLB moved to public/models/3d_scene_final.glb; useGLTF paths updated.
- Client-only entry via dynamic ssr:false loader (Experience3DLoader).
- Self-managed fixed pin (tall section + absolute stage toggled
  absolute(top)→fixed→absolute(bottom) from ScrollTrigger pin state), mirroring
  the site's StrategySection, since the fixed header + ancestor overflow:hidden
  break CSS sticky / GSAP pin.
- experience.css fully scoped under .dm-hiw-3d to avoid colliding with the
  site's Elementor CSS.
- Global Lenis disabled on /how-it-works; module runs its own tuned Lenis;
  jump-to-section scroll math made spacer-relative.
- Added zustand + maath; ESLint-ignored the ported module.

Rendering fixes (root causes found by driving headless Chrome):
- Bump three 0.171 → 0.184 to match @react-three/fiber@9.6 / drei@10.7 /
  postprocessing@6.39 (0.171 silently failed to render this GLB and caused the
  EffectComposer getContextAttributes().alpha crash). Other 3D routes verified.
- EffectComposer: Bloom + Vignette only. SSAO needs a NormalPass (v3 dropped
  the old `disableNormalPass`), and that extra full-scene pass exhausted the
  WebGL context on this heavy scene.
- Cap Canvas dpr to [1,1.5] to bound framebuffer memory on retina displays.
- Defer Canvas mount via IntersectionObserver (mountScene), matching
  StrategySection, to ease StrictMode/first-render GPU pressure.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

src/app/how-it-works/page.tsx

@@ -1,8 +1,6 @@
 import React from "react";
 import HowItWorksHero from "../../components/sections/HowItWorksHero";
-import Miles3 from "../../components/sections/Miles3";
-import WhyChooseDoormile from "../../components/sections/WhyChooseDoormile";
-import TheDoormileWay from "../../components/sections/TheDoormileWay";
+import Experience3DLoader from "@/modules/how-it-works-3d/Experience3DLoader";
 
 export const metadata = {
   title: "How It Works – Doormile",
@@ -16,9 +14,10 @@ export default function HowItWorksPage() {
         <div className="content-inner">
           <div data-elementor-type="wp-page" data-elementor-id="59" className="elementor elementor-59">
             <HowItWorksHero />
-            <Miles3 />
-            <WhyChooseDoormile />
-            <TheDoormileWay />
+            {/* The first/mid/last-mile story is now told by the scroll-driven 3D
+                experience, which replaces the former Miles3 / WhyChooseDoormile /
+                TheDoormileWay content sections on this page. */}
+            <Experience3DLoader />
           </div>
         </div>
       </div>