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

src/components/SkillsSection.module.css

@@ -67,6 +67,27 @@
 
 .segmentFilled {
   background-color: var(--accent-default);
+  transform-origin: left center;
+}
+
+.mainCard[data-visible='true'] .segmentFilled {
+  animation: meterSegmentIn 400ms var(--motion-ease-out) both;
+}
+
+.segmentFilled:nth-child(2) { animation-delay: 40ms; }
+.segmentFilled:nth-child(3) { animation-delay: 80ms; }
+.segmentFilled:nth-child(4) { animation-delay: 120ms; }
+.segmentFilled:nth-child(5) { animation-delay: 160ms; }
+
+@keyframes meterSegmentIn {
+  from {
+    opacity: 0.35;
+    transform: scaleX(0.2);
+  }
+  to {
+    opacity: 1;
+    transform: scaleX(1);
+  }
 }
 
 .badgeCloud {
@@ -135,6 +156,7 @@
   object-fit: contain;
   width: 100%;
   height: 100%;
+  transition: transform var(--motion-duration-default) var(--motion-ease-out);
 }
 
 .toolLabel {
@@ -247,4 +269,20 @@
     box-shadow: 0 8px 24px var(--shadow-color);
     transform: translateY(-3px);
   }
+
+  .toolTile:hover .toolIcon {
+    transform: scale(1.06) translateY(-2px);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .mainCard[data-visible='true'] .segmentFilled {
+    animation-name: meterSegmentFade;
+    transform: none;
+  }
+
+  @keyframes meterSegmentFade {
+    from { opacity: 0.35; }
+    to { opacity: 1; }
+  }
 }