scroll-showcase & padding

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;

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;
   }

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 {

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)`;