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

src/components/RiverJourney.tsx

@@ -24,7 +24,7 @@ export const RiverJourney: React.FC = () => {
     <section id="about" className={styles.journeySection} aria-labelledby="about-title">
       <AboutRiverScene />
       {/* Intro Header & Description on the Left */}
-      <div className={styles.introBlock}>
+      <div className={styles.introBlock} data-reveal="scale">
         <span className={styles.eyebrow}>ABOUT ME</span>
         <h2 id="about-title" className={styles.heading}>From Pixel to Product</h2>
         <div className={styles.underlineBar} />
@@ -36,12 +36,16 @@ export const RiverJourney: React.FC = () => {
         </p>
       </div>
 
-      <ol className={styles.stepsList} aria-label="Career journey">
+      <ol
+        className={styles.stepsList}
+        aria-label="Career journey"
+        data-reveal-group
+      >
         {steps.map((step) => {
           const StepIcon = step.icon;
 
           return (
-            <li key={step.number} className={styles.stepCard}>
+            <li key={step.number} className={styles.stepCard} data-reveal="soft">
               <span className={styles.stepIcon} aria-hidden="true">
                 <StepIcon size={20} strokeWidth={1.9} />
               </span>