From 033726901d5a3dd05f426412c05c03d163aab1cd Mon Sep 17 00:00:00 2001
From: zahrarahimi2 <zr.rahimi2@gmail.com>
Date: Sun, 5 Jul 2026 11:54:25 +0330
Subject: [PATCH] scroll-showcase & padding

---
 src/assets/css/portfolio-gallery.css    |  2 +-
 src/assets/css/portfolio-responsive.css |  5 +++++
 src/assets/css/portfolio.css            |  2 +-
 src/assets/js/portfolio.js              | 14 ++++++++------
 4 files changed, 15 insertions(+), 8 deletions(-)

diff --git a/src/assets/css/portfolio-gallery.css b/src/assets/css/portfolio-gallery.css
index 6650357..12f764e 100644
--- a/src/assets/css/portfolio-gallery.css
+++ b/src/assets/css/portfolio-gallery.css
@@ -30,7 +30,7 @@
   color: #fff;
 }
 .gallery-section .gallery-thumbnail {
-  margin: 24px 0 32px;
+  margin-top: 24px;
 }
 .gallery-section .gallery-thumbnail p {
   display: none;
diff --git a/src/assets/css/portfolio-responsive.css b/src/assets/css/portfolio-responsive.css
index 3665e65..2850558 100644
--- a/src/assets/css/portfolio-responsive.css
+++ b/src/assets/css/portfolio-responsive.css
@@ -113,7 +113,12 @@
   }
   .showcase-section > .container-showcase {
     height: calc(var(--slides-count) * 100dvh);
+        scroll-snap-align: start;
   }
+   html {
+  scroll-snap-type: y proximity;
+  scroll-behavior: smooth;
+}
   .showcase-sticky {
     height: 100vh;
   }
diff --git a/src/assets/css/portfolio.css b/src/assets/css/portfolio.css
index f78d479..a8ca5ef 100644
--- a/src/assets/css/portfolio.css
+++ b/src/assets/css/portfolio.css
@@ -672,7 +672,7 @@ body.dragging-scroll {
   align-items: flex-start;
   gap: 48px;
   position: relative;
-  top: 69px;
+  /* top: 69px; */
   transition: transform 0.3s ease;
 }
 .side-buttons {
diff --git a/src/assets/js/portfolio.js b/src/assets/js/portfolio.js
index a4d1ba5..a5e0e55 100644
--- a/src/assets/js/portfolio.js
+++ b/src/assets/js/portfolio.js
@@ -571,15 +571,19 @@ function updateScrollScene() {
   const maxScroll = Math.max(scrollHeight - window.innerHeight, 1);
   const progress = Math.min(Math.max(scrollInside / maxScroll, 0), 1);
   const exactIndex = progress * (totalSlides - 1);
-  const current = Math.round(exactIndex);
+
+    let current;
 
   if (isMobile) {
+      current = Math.floor(exactIndex + 0.15);
+      current = Math.min(Math.max(current, 0), totalSlides - 1);
     textTrack.style.transform = 'translateY(0)';
     resetTextItemInlineStyles();
     setActiveSlide(current);
 
     return;
   }
+ current = Math.round(exactIndex);
 
   textTrack.style.transform = `translateY(-${exactIndex * 60}vh)`;
 
@@ -589,16 +593,14 @@ function updateScrollScene() {
 
   textItems.forEach((item, index) => {
     const offset = index - exactIndex;
+ const absOffset = Math.abs(offset);
 
     let blur = 0;
     let opacity = 1;
 
     if (offset > 0) {
-      const enterProgress = Math.min(offset, 1);
-
-      blur = Math.max((enterProgress - 0.35) * 14, 0);
-
-      opacity = Math.min(1.2 - enterProgress, 1);
+      blur = absOffset > 0.1 ? Math.min((absOffset - 0.1) * 25, 20) : 0;
+      opacity = Math.max(1 - absOffset * 2.5, 0);
     }
 
     item.style.filter = `blur(${blur}px)`;