Fix logo scaling and positioning across screen sizes

- Enhanced responsive breakpoints for 5 screen size categories
- Fixed logo centering with flexbox at multiple container levels
- Added proper CSS centering for Three.js canvas element
- Improved logo container positioning and aspect ratio handling
- Logo now scales from 4rem (mobile) to 16rem (desktop) appropriately

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

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

modules/teaser/components/TeaserHero.tsx

@@ -23,14 +23,14 @@ export default function TeaserHero({ onEarlyAccess }: TeaserHeroProps) {
   return (
     <section className="min-h-screen flex flex-col items-center justify-center px-chorus-lg py-chorus-xxl bg-gradient-to-b from-white via-sand-100 to-sand-200 dark:from-carbon-950 dark:via-mulberry-950 dark:to-carbon-950 text-center relative">
       {/* CHORUS 3D Logo - Responsive sizing */}
-      <div className="animate-fade-in">
-        <div className="w-32 h-32 md:w-96 md:h-96">
-          <ThreeLogo className="mx-auto drop-shadow-2xl w-full h-full" />
+      <div className="animate-fade-in flex justify-center items-center">
+        <div className="responsive-logo">
+          <ThreeLogo className="logo-container drop-shadow-2xl" />
         </div>
       </div>
 
       {/* CHORUS Title */}
-      <h1 className="text-h1 font-logo font-thin text-carbon-950 dark:text-white mb-chorus-md animate-slide-up" style={{ animationDelay: '0.3s' }}>
+      <h1 className="text-h1 font-logo font-thin text-carbon-950 dark:text-white mt-chorus-xl mb-chorus-md animate-slide-up" style={{ animationDelay: '0.3s' }}>
         CHORUS
       </h1>
 

modules/teaser/components/ThreeLogo.tsx

@@ -26,12 +26,14 @@ export default function ThreeLogo({ className = "" }: ThreeLogoProps) {
     const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
     renderer.setPixelRatio(window.devicePixelRatio);
     renderer.setClearColor(0x000000, 0); // transparent background
+    renderer.domElement.style.display = 'block';
+    renderer.domElement.style.margin = '0 auto';
     container.appendChild(renderer.domElement);
 
     // Resize handling with proper aspect ratio
     const resize = () => {
       const { clientWidth, clientHeight } = container;
-      // Ensure square aspect ratio for the logo
+      // Use the container's full dimensions while maintaining square aspect ratio
       const size = Math.min(clientWidth, clientHeight);
       renderer.setSize(size, size, false);
       camera.aspect = 1; // Always square
@@ -58,7 +60,7 @@ export default function ThreeLogo({ className = "" }: ThreeLogoProps) {
     // Load environment map from your horizon gradient image
     const expandGradient = (img: HTMLImageElement) => {
       const canvas = document.createElement('canvas');
-      const w = 512, h = 256; // safe HDRI-like size
+      const w = 256, h = 256; // safe HDRI-like size
       canvas.width = w;
       canvas.height = h;
       const ctx = canvas.getContext('2d')!;
@@ -223,14 +225,6 @@ export default function ThreeLogo({ className = "" }: ThreeLogoProps) {
     <div 
       ref={containerRef} 
       className={className}
-      style={{ 
-        width: '100%',
-        height: '100%',
-        aspectRatio: '1 / 1',
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'center'
-      }} 
     />
   );
 }