From 28b60b9b4ca993d88ecc9e0fdedd184065e10a46 Mon Sep 17 00:00:00 2001
From: Amirhossein Khalili <amirhosseinkhalili901@gmail.com>
Date: Sun, 6 Sep 2026 22:12:50 +0330
Subject: [PATCH] fix(about): prevent overlap and blend scene background

---
 src/components/RiverJourney.module.css    | 2 +-
 src/components/scenes/AboutRiverScene.tsx | 6 +++++-
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/components/RiverJourney.module.css b/src/components/RiverJourney.module.css
index 6b10827..9ba8c7b 100644
--- a/src/components/RiverJourney.module.css
+++ b/src/components/RiverJourney.module.css
@@ -150,7 +150,7 @@
   }
 }
 
-@media (max-width: 760px) {
+@media (max-width: 900px) {
   .journeySection {
     height: auto;
     min-height: 70rem;
diff --git a/src/components/scenes/AboutRiverScene.tsx b/src/components/scenes/AboutRiverScene.tsx
index af7b190..89a3d65 100644
--- a/src/components/scenes/AboutRiverScene.tsx
+++ b/src/components/scenes/AboutRiverScene.tsx
@@ -42,7 +42,11 @@ const createAboutScene: SceneFactory = ({ pointer, theme, reduceMotion }) => {
 
   const ground = new THREE.Mesh(
     new THREE.PlaneGeometry(60, 60),
-    new THREE.MeshStandardMaterial({ color: palette.ground, roughness: 1 }),
+    new THREE.ShadowMaterial({
+      color: 0x000000,
+      opacity: theme === 'dark' ? 0.2 : 0.08,
+      transparent: true,
+    }),
   );
   ground.rotation.x = -Math.PI / 2;
   ground.position.y = -0.32;