feat(motion): add scroll reveals and micro-interactions

src/components/ProjectsSection.module.css

@@ -41,6 +41,10 @@
   color: var(--color-blue-600);
 }
 
+.navButton svg {
+  transition: transform var(--motion-duration-fast) var(--motion-ease-out);
+}
+
 .navButton:focus-visible {
   outline: 3px solid var(--focus-ring);
   outline-offset: 3px;
@@ -164,6 +168,7 @@
 .titleLinkIcon {
   flex: 0 0 auto;
   color: var(--color-blue-500);
+  transition: transform var(--motion-duration-fast) var(--motion-ease-out);
 }
 
 [data-theme="dark"] .titleLinkIcon {
@@ -233,6 +238,10 @@
   min-height: 2.75rem;
 }
 
+.caseStudyLink svg {
+  transition: transform var(--motion-duration-fast) var(--motion-ease-out);
+}
+
 .caseStudyLink:focus-visible {
   border-radius: 2px;
   outline: 3px solid var(--focus-ring);
@@ -474,7 +483,11 @@
   }
 
   .card:hover .projectImage {
-    transform: scale(1.02);
+    transform: scale(1.035);
+  }
+
+  .card:hover .titleLinkIcon {
+    transform: translate(2px, -2px);
   }
 
   .caseStudyLink:hover {
@@ -491,4 +504,17 @@
     background: var(--color-blue-white);
     color: var(--color-blue-950);
   }
+
+
+  .caseStudyLink:hover svg {
+    transform: translateX(3px);
+  }
+
+  .navButtonPrevious:hover:not(:disabled) svg {
+    transform: translateX(-2px);
+  }
+
+  .navButtonNext:hover:not(:disabled) svg {
+    transform: translateX(2px);
+  }
 }