fix: polish responsive scene composition

src/components/RiverJourney.module.css

@@ -148,9 +148,11 @@
     top: auto;
     left: auto;
     width: 100%;
-    padding: 0;
-    background: transparent;
-    backdrop-filter: none;
+    padding: var(--space-4);
+    border: 1px solid var(--border-default);
+    background: var(--overlay-contact);
+    box-shadow: 0 8px 24px var(--shadow-color);
+    backdrop-filter: blur(12px);
   }
 
   .heading {
@@ -169,7 +171,7 @@
     display: flex;
     flex-direction: column;
     gap: var(--space-3);
-    margin-top: 300px;
+    margin-top: 220px;
     padding-left: 20px;
   }
 

src/components/scenes/HeroLandscapeScene.tsx

@@ -47,12 +47,13 @@ const createHeroScene: SceneFactory = ({ pointer, theme, reduceMotion }) => {
   world.add(clearing);
 
   const secondaryMountains = new THREE.Group();
-  world.add(secondaryMountains);
+  const mobileDecor = new THREE.Group();
+  world.add(secondaryMountains, mobileDecor);
   const mountainData = [
-    [-10.6, -1.7, 4.6, 4.8, 4.2, 0], [-7.2, -2.7, 4.4, 4.4, 4.3, 0],
-    [-4.3, -3.6, 2.7, 3.0, 2.7, 1], [-11.1, 3.3, 3.3, 3.6, 2.8, 1],
+    [-11.3, -1.7, 4.3, 4.5, 4.0, 0], [-7.8, -2.7, 4.0, 4.1, 4.0, 0],
+    [-4.8, -3.6, 2.4, 2.7, 2.5, 1], [-11.5, 3.3, 3.1, 3.3, 2.6, 1],
     [-8.8, 4.2, 3.2, 3.0, 2.5, 1], [10.2, -2.1, 4.7, 4.7, 4.3, 0],
-    [6.8, -3.1, 4.0, 4.1, 4.0, 0], [4.2, -3.8, 2.5, 2.7, 2.6, 1],
+    [7.5, -3.1, 3.8, 3.9, 3.8, 0], [4.8, -3.8, 2.3, 2.5, 2.4, 1],
     [10.8, 3.6, 3.8, 3.6, 3.1, 1], [8.1, 4.3, 3.0, 3.1, 2.5, 1],
   ] as const;
 
@@ -62,6 +63,17 @@ const createHeroScene: SceneFactory = ({ pointer, theme, reduceMotion }) => {
     (secondary ? secondaryMountains : world).add(mesa);
   });
 
+  const mobileLeftMesa = createMesa(2.2, 2.6, 2.3, palette);
+  mobileLeftMesa.position.set(-3.1, 0, -0.6);
+  const mobileRightMesa = createMesa(2.2, 2.8, 2.3, palette);
+  mobileRightMesa.position.set(3.1, 0, -0.8);
+  const mobileLeftTree = createTree(palette, 0.72);
+  mobileLeftTree.position.set(-2.1, 0, 2.2);
+  const mobileRightTree = createTree(palette, 0.68);
+  mobileRightTree.position.set(2.1, 0, 2.4);
+  mobileDecor.add(mobileLeftMesa, mobileRightMesa, mobileLeftTree, mobileRightTree);
+  mobileDecor.visible = false;
+
   const secondaryTrees = new THREE.Group();
   world.add(secondaryTrees);
   const treeData = [
@@ -123,6 +135,7 @@ const createHeroScene: SceneFactory = ({ pointer, theme, reduceMotion }) => {
       const tablet = width < 1024;
       secondaryMountains.visible = !mobile;
       secondaryTrees.visible = !mobile;
+      mobileDecor.visible = mobile;
       world.scale.setScalar(mobile ? 0.9 : tablet ? 0.96 : 1);
       celestial.position.x = mobile ? -2.35 : tablet ? -4.1 : -5.8;
       celestialBaseY = mobile ? 6.8 : 6.25;

src/components/scenes/Scenes.module.css

@@ -16,9 +16,9 @@
   position: absolute;
   inset: 0;
   background:
-    radial-gradient(circle at 50% 42%, var(--bg-page) 0 14%, transparent 44%),
+    radial-gradient(ellipse 48% 58% at 50% 45%, var(--bg-page) 0 44%, transparent 82%),
     linear-gradient(to bottom, transparent 68%, var(--bg-page) 100%);
-  opacity: 0.42;
+  opacity: 0.76;
 }
 
 .heroScene canvas,
@@ -48,4 +48,8 @@
     bottom: auto;
     height: 640px;
   }
+
+  .aboutScene canvas {
+    opacity: 0.68;
+  }
 }