Enhance hover lift animation with spring easing and deeper shadow

Author: shahidghafoor00

styles.css

@@ -10,6 +10,7 @@
   --gray-800: #222222;
   --font: 'Inter', 'Helvetica Neue', Arial, sans-serif;
   --transition: 0.3s ease;
+  --lift-transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.35s ease;
 }
 
 html { scroll-behavior: smooth; }
@@ -352,13 +353,13 @@ section { padding: 6rem 5%; }
   padding: 2rem;
   border: 1.5px solid var(--gray-200);
   border-radius: 10px;
-  transition: var(--transition);
+  transition: var(--lift-transition), border-color 0.3s ease;
   cursor: default;
 }
 .service-card:hover {
   border-color: var(--black);
-  transform: translateY(-10px);
-  box-shadow: 0 20px 40px rgba(0,0,0,0.12);
+  transform: translateY(-12px);
+  box-shadow: 0 24px 48px rgba(0,0,0,0.14);
 }
 
 .service-icon {
@@ -395,11 +396,11 @@ section { padding: 6rem 5%; }
   border-radius: 12px;
   overflow: hidden;
   border: 1.5px solid var(--gray-200);
-  transition: var(--transition);
+  transition: var(--lift-transition), border-color 0.3s ease;
 }
 .portfolio-card:hover {
-  transform: translateY(-10px);
-  box-shadow: 0 20px 40px rgba(0,0,0,0.12);
+  transform: translateY(-12px);
+  box-shadow: 0 24px 48px rgba(0,0,0,0.14);
 }
 
 .portfolio-cover {
@@ -490,9 +491,9 @@ section { padding: 6rem 5%; }
   padding: 1.75rem;
   border: 1.5px solid var(--gray-200);
   border-radius: 10px;
-  transition: var(--transition);
+  transition: var(--lift-transition), border-color 0.3s ease;
 }
-.review-card:hover { border-color: var(--black); transform: translateY(-10px); box-shadow: 0 20px 40px rgba(0,0,0,0.12); }
+.review-card:hover { border-color: var(--black); transform: translateY(-12px); box-shadow: 0 24px 48px rgba(0,0,0,0.14); }
 
 .review-top { display: flex; align-items: flex-start; gap: 0.875rem; margin-bottom: 1rem; }
 
@@ -543,9 +544,9 @@ section { padding: 6rem 5%; }
   border: 1.5px solid var(--gray-200);
   border-radius: 10px;
   text-align: center;
-  transition: var(--transition);
+  transition: var(--lift-transition), border-color 0.3s ease;
 }
-.team-card:hover { border-color: var(--black); transform: translateY(-10px); box-shadow: 0 20px 40px rgba(0,0,0,0.12); }
+.team-card:hover { border-color: var(--black); transform: translateY(-12px); box-shadow: 0 24px 48px rgba(0,0,0,0.14); }
 
 .team-avatar {
   width: 72px; height: 72px;