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

src/components/MilestonesSection.tsx

@@ -11,7 +11,7 @@ export const MilestonesSection: React.FC = () => {
     <section id="milestones" className={styles.milestonesSection}>
       <div className="content-container">
         {/* Section Header */}
-        <div className="section-header">
+        <div className="section-header" data-reveal="soft">
           <span className="section-eyebrow">AWARDS & ACHIEVEMENTS</span>
           <div className="section-title-wrap">
             <h2 className="section-title">Milestones Along the Way</h2>
@@ -20,11 +20,11 @@ export const MilestonesSection: React.FC = () => {
         </div>
 
         {/* Certificate Cards List */}
-        <div className={styles.cardsList}>
+        <div className={styles.cardsList} data-reveal-group>
           {milestones.map((item) => (
             <div key={item.id} className={styles.certCard}>
               {/* Thumbnail */}
-              <div className={styles.thumbnailContainer}>
+              <div className={styles.thumbnailContainer} data-reveal="image">
                 <Image
                   src={item.image}
                   alt={item.title}
@@ -34,7 +34,7 @@ export const MilestonesSection: React.FC = () => {
               </div>
 
               {/* Content Details */}
-              <div className={styles.certDetails}>
+              <div className={styles.certDetails} data-reveal="soft">
                 <div className={styles.titleRow}>
                   <h3 className={styles.certTitle}>{item.title}</h3>
                 </div>