From 2a3062357f953173ed8a3e00d0c29cac6ced2c73 Mon Sep 17 00:00:00 2001
From: Kunthawat Greethong <kunthawat@Kunthawats-MacBook-Pro.local>
Date: Wed, 24 Jun 2026 09:14:55 +0700
Subject: [PATCH] fix: hero neural UX improvements
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

1. Mouse move listener now on document (not just hero section)
2. Removed hover effect on outer cards, kept only for center กำไร card
3. Bigger text: card-tag 20px, card-desc 16px
4. Hero overflow visible on desktop (cards can extend left)
5. Hero overflow clip on mobile (normal containment)
---
 src/scripts/home.js   |  4 ++--
 src/styles/global.css | 18 +++++++++++-------
 2 files changed, 13 insertions(+), 9 deletions(-)

diff --git a/src/scripts/home.js b/src/scripts/home.js
index eed3186..bfc6ab1 100644
--- a/src/scripts/home.js
+++ b/src/scripts/home.js
@@ -277,7 +277,7 @@ if (heroNeural && neuralScene && canvas && ctx && nodes.length > 0) {
   }
   
   // Mouse move handler
-  heroNeural.addEventListener('mousemove', (e) => {
+  document.addEventListener('mousemove', (e) => {
     const rect = heroNeural.getBoundingClientRect();
     const x = (e.clientX - rect.left) / rect.width;
     const y = (e.clientY - rect.top) / rect.height;
@@ -286,7 +286,7 @@ if (heroNeural && neuralScene && canvas && ctx && nodes.length > 0) {
     targetRotateX = (y - 0.5) * -30;
   });
   
-  heroNeural.addEventListener('mouseleave', () => {
+  document.addEventListener('mouseleave', () => {
     targetRotateX = 0;
     targetRotateY = 0;
   });
diff --git a/src/styles/global.css b/src/styles/global.css
index 727061a..824f96f 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -347,8 +347,7 @@ box-shadow: inset 1px 1px 0 rgb(255 255 255 / .72);
 .hero {
 min-height: 100svh;
 padding: 150px 0 88px;
-overflow: clip;
-contain: paint;
+overflow: visible;
 }
 
 .hero-grid,
@@ -490,8 +489,8 @@ color: rgb(255 255 255 / .72);
   backface-visibility: hidden;
 }
 
-.neural-node:hover {
-  box-shadow: 0 24px 60px rgb(0 0 0 / .18);
+.node-center:hover {
+  box-shadow: 0 30px 80px rgb(254 212 0 / .25);
 }
 
 /* Center node: กำไร */
@@ -558,7 +557,7 @@ color: rgb(255 255 255 / .72);
 }
 
 .card-tag {
-  font-size: 16px;
+  font-size: 20px;
   font-weight: 900;
   color: var(--ink);
   letter-spacing: .02em;
@@ -566,8 +565,8 @@ color: rgb(255 255 255 / .72);
 }
 
 .card-desc {
-  margin-top: 8px;
-  font-size: 14px;
+  margin-top: 10px;
+  font-size: 16px;
   font-weight: 500;
   color: var(--muted);
   line-height: 1.4;
@@ -603,6 +602,11 @@ color: rgb(255 255 255 / .72);
 
 /* Mobile responsive */
 @media (max-width: 620px) {
+  .hero {
+    overflow: clip;
+    contain: paint;
+  }
+
   .hero-neural {
     height: auto;
     max-width: 340px;