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

src/components/HeroSection.module.css

@@ -56,6 +56,7 @@
 .controlIcon,
 .themeIcon {
   color: currentColor;
+  transition: transform var(--motion-duration-default) var(--motion-ease-out);
 }
 
 .themeIcon {
@@ -156,6 +157,41 @@
   margin-bottom: clamp(1.125rem, 2.2vw, 1.875rem);
 }
 
+.topBar,
+.avatarWrapper,
+.heroTitle,
+.heroSubtitle,
+.actionButtons {
+  animation: heroContentEnter var(--motion-duration-hero) var(--motion-ease-out) both;
+}
+
+.avatarWrapper {
+  animation-delay: var(--motion-stagger);
+}
+
+.heroTitle {
+  animation-delay: 100ms;
+}
+
+.heroSubtitle {
+  animation-delay: 150ms;
+}
+
+.actionButtons {
+  animation-delay: 200ms;
+}
+
+@keyframes heroContentEnter {
+  from {
+    opacity: 0;
+    transform: translateY(0.75rem) scale(0.98);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+}
+
 .heroButton {
   min-width: clamp(5rem, 9vw, 7.5rem);
   height: clamp(2.5rem, 4.5vw, 3.25rem);
@@ -352,6 +388,11 @@
     transform: translateY(-1px);
   }
 
+  .iconButton:hover .controlIcon,
+  .iconButton:hover .themeIcon {
+    transform: rotate(12deg) scale(1.04);
+  }
+
   .contactItem:hover {
     opacity: 0.75;
   }
@@ -380,3 +421,21 @@
     background: var(--color-blue-white);
   }
 }
+
+@media (prefers-reduced-motion: reduce) {
+  .topBar,
+  .avatarWrapper,
+  .heroTitle,
+  .heroSubtitle,
+  .actionButtons {
+    animation-name: heroContentFade;
+    animation-duration: var(--motion-duration-default) !important;
+    animation-delay: 0ms;
+    transform: none;
+  }
+
+  @keyframes heroContentFade {
+    from { opacity: 0; }
+    to { opacity: 1; }
+  }
+}