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

src/components/ExperienceSection.module.css

@@ -28,6 +28,7 @@
 }
 
 .nodeDot {
+  position: relative;
   width: 0.875rem;
   height: 0.875rem;
   border-radius: 50%;
@@ -44,6 +45,28 @@
   box-shadow: 0 0 0 4px rgba(61, 138, 250, 0.25);
 }
 
+.nodeCurrent::after {
+  content: '';
+  position: absolute;
+  inset: -0.375rem;
+  border: 1px solid var(--accent-default);
+  border-radius: 50%;
+  opacity: 0;
+  animation: currentRolePulse 2.4s var(--motion-ease-out) infinite;
+}
+
+@keyframes currentRolePulse {
+  0% {
+    opacity: 0.45;
+    transform: scale(0.7);
+  }
+  70%,
+  100% {
+    opacity: 0;
+    transform: scale(1.35);
+  }
+}
+
 .verticalLine {
   position: absolute;
   top: 1.25rem;
@@ -51,6 +74,16 @@
   width: 2px;
   background-color: var(--border-strong);
   z-index: 1;
+  transform-origin: top center;
+}
+
+:global(html[data-motion-ready='true']) .timelineItem[data-reveal] .verticalLine {
+  transform: scaleY(0);
+  transition: transform 600ms var(--motion-ease-in-out) 120ms;
+}
+
+:global(html[data-motion-ready='true']) .timelineItem[data-visible='true'] .verticalLine {
+  transform: scaleY(1);
 }
 
 .itemContent {
@@ -61,6 +94,16 @@
   gap: 2.25rem;
 }
 
+@media (prefers-reduced-motion: reduce) {
+  .nodeCurrent::after {
+    animation: none;
+  }
+
+  :global(html[data-motion-ready='true']) .timelineItem[data-reveal] .verticalLine {
+    transform: scaleY(1);
+  }
+}
+
 .identityCol {
   width: 22.5rem;
   flex-shrink: 0;