feat: dial in ultra-premium deck swipe physics and optimize mobile sizing

Author: TechStack Global

index.html

@@ -138,8 +138,8 @@ <h1>Make Smarter <br /><span class="gradient-text">Tech Decisions.</span>
             user-select: none;
             will-change: transform, opacity;
             box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
-            /* Smooth transitions when dropping or clicking next */
-            transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), opacity 0.3s linear;
+            /* Ultra-smooth springy transitions when dropping or clicking next */
+            transition: transform 0.45s cubic-bezier(0.175, 0.885, 0.32, 1.2), opacity 0.4s ease-out;
           }
 
           .deck-card:active {
@@ -214,15 +214,15 @@ <h1>Make Smarter <br /><span class="gradient-text">Tech Decisions.</span>
           }
 
           .deck-card[data-depth="1"] {
-            transform: translateZ(-80px) translateY(25px) scale(0.95);
+            transform: translateZ(-60px) translateY(20px) scale(0.92);
             z-index: 2;
-            opacity: 0.8;
+            opacity: 0.7;
           }
 
           .deck-card[data-depth="2"] {
-            transform: translateZ(-160px) translateY(50px) scale(0.9);
+            transform: translateZ(-120px) translateY(40px) scale(0.84);
             z-index: 1;
-            opacity: 0.4;
+            opacity: 0.3;
           }
 
           /* Thrown away states */
@@ -281,26 +281,39 @@ <h1>Make Smarter <br /><span class="gradient-text">Tech Decisions.</span>
 
           @media (max-width: 767px) {
             .deck-container {
-              height: 420px;
+              height: 330px;
             }
 
             .deck-card {
-              height: 380px;
-              padding: 1.5rem;
+              height: 300px;
+              padding: 1.25rem;
             }
 
             .deck-card img {
-              height: 160px;
+              height: 110px;
               margin-bottom: 0.5rem;
+              border-radius: 6px;
+              padding: 0.25rem;
+            }
+
+            .deck-card h3 {
+              font-size: 1.1rem;
+              margin-bottom: 0.25rem;
             }
 
             .deck-card p {
-              font-size: 0.85rem;
-              margin-bottom: 1rem;
+              font-size: 0.8rem;
+              margin-bottom: 0.5rem;
+              line-height: 1.3;
             }
 
             .deck-controls {
-              margin-top: -15px;
+              margin-top: -20px;
+            }
+
+            .deck-controls button {
+              width: 40px;
+              height: 40px;
             }
           }
 
@@ -411,7 +424,7 @@ <h3>Alienware AW3423DWF</h3>
                   topIndex = (topIndex - 1 + total) % total;
                 }
                 updateDeck();
-              }, 300); // 300ms matches CSS transition timing
+              }, 450); // matches CSS transition timing
             }
 
             nextBtn.addEventListener('click', () => throwCard('left'));
@@ -460,8 +473,9 @@ <h3>Alienware AW3423DWF</h3>
 
               if (e && !isScrolling) e.preventDefault(); // Stop scroll when dragging sideways
 
-              const rotate = diffX * 0.05;
-              cards[topIndex].style.transform = `translateZ(0) translateY(0) translateX(${diffX}px) rotate(${rotate}deg)`;
+              const rotateZ = diffX * 0.08;
+              const scale = Math.max(0.9, 1 - Math.abs(diffX) * 0.0003); // Slightly shrink while dragging
+              cards[topIndex].style.transform = `translateZ(0) translateY(0) translateX(${diffX}px) rotateZ(${rotateZ}deg) scale(${scale})`;
             }
 
             function onEnd() {