feat: Implement proper Three.js logo system with custom environment mapping

- Replace CDN-based Three.js with npm packages for reliable loading
- Add DRACO loader support for compressed GLB files
- Implement custom horizon gradient environment mapping
- Use exact material properties from reference logo.html (MeshPhysicalMaterial)
- Apply proper metallic sheen, clearcoat, and reflectivity settings
- Fix camera positioning and canvas sizing to prevent clipping
- Maintain square aspect ratio for consistent logo display
- Load user's mobius-ring.glb with fallback torus geometry

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>

brand-assets/brand-style-guide-site/src/app/motion/page.tsx

@@ -0,0 +1,53 @@
+export default function Motion() {
+  return (
+    <section id="motion" className="py-chorus-xxl bg-gradient-to-b dark:from-carbon-950 dark:to-mulberry-950 from-white to-sand-200">
+      <div className="px-chorus-lg max-w-5xl mx-auto mb-chorus-lg">
+        <h2 className="text-h2 mb-chorus-lg">Motion System</h2>
+        
+        <div className="py-chorus-lg space-y-chorus-lg">
+          <div className="mb-chorus-lg">
+            <p className="text-lg mb-chorus-md">
+              Animation principles and motion guidelines for the CHORUS brand.
+            </p>
+            <p className="text-carbon-600 dark:text-mulberry-300">
+              Define easing curves, timing functions, and animation patterns that reinforce the CHORUS brand personality.
+            </p>
+          </div>
+
+          <div className="grid gap-chorus-lg md:grid-cols-3">
+            <div className="border border-nickel-200 p-chorus-lg dark:border-nickel-900 ">
+              <h3 className="text-h3 mb-chorus-md">Timing</h3>
+              <p className="text-sm text-carbon-600 dark:text-mulberry-300">
+                Standard duration scales and timing principles for smooth, purposeful animations.
+              </p>
+            </div>
+            
+            <div className="border border-nickel-200 p-chorus-lg dark:border-nickel-900 ">
+              <h3 className="text-h3 mb-chorus-md">Easing</h3>
+              <p className="text-sm text-carbon-600 dark:text-mulberry-300">
+                Consistent easing curves that create natural, organic motion patterns.
+              </p>
+            </div>
+
+            <div className="border border-nickel-200 p-chorus-lg dark:border-nickel-900 ">
+              <h3 className="text-h3 mb-chorus-md">Interactions</h3>
+              <p className="text-sm text-carbon-600 dark:text-mulberry-300">
+                Hover states, transitions, and micro-interactions for enhanced user experience.
+              </p>
+            </div>
+          </div>
+
+          <div className="bg-sand-50 dark:bg-mulberry-900 p-chorus-lg  border border-sand-200 dark:border-mulberry-800">
+            <h3 className="text-h3 mb-chorus-md">Animation Principles</h3>
+            <ul className="space-y-2 text-carbon-600 dark:text-mulberry-300">
+              <li>• Purposeful motion that guides user attention</li>
+              <li>• Smooth transitions that maintain context</li>
+              <li>• Performance-optimized animations</li>
+              <li>• Accessibility considerations for reduced motion preferences</li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}