diff --git a/src/app/globals.css b/src/app/globals.css
index 4c778e61..7ce19af5 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -155,6 +155,59 @@ body {
   animation: fadeUp 0.7s ease-out;
 }
 
+/* ─────────────────────────────────────────
+   MICRO-ANIMATION UTILITIES
+   ───────────────────────────────────────── */
+
+/* Staggered animation delays for child elements */
+.stagger-children > *:nth-child(1) { animation-delay: 0ms; }
+.stagger-children > *:nth-child(2) { animation-delay: 50ms; }
+.stagger-children > *:nth-child(3) { animation-delay: 100ms; }
+.stagger-children > *:nth-child(4) { animation-delay: 150ms; }
+.stagger-children > *:nth-child(5) { animation-delay: 200ms; }
+.stagger-children > *:nth-child(6) { animation-delay: 250ms; }
+.stagger-children > *:nth-child(7) { animation-delay: 300ms; }
+.stagger-children > *:nth-child(8) { animation-delay: 350ms; }
+.stagger-children > *:nth-child(9) { animation-delay: 400ms; }
+.stagger-children > *:nth-child(10) { animation-delay: 450ms; }
+
+/* Shimmer skeleton loading effect */
+.skeleton-shimmer {
+  background: linear-gradient(
+    90deg,
+    var(--card-muted) 0%,
+    color-mix(in srgb, var(--card-muted) 60%, var(--border) 40%) 50%,
+    var(--card-muted) 100%
+  );
+  background-size: 200% 100%;
+  animation: shimmer 1.8s ease-in-out infinite;
+}
+
+/* Interactive stat cell — hover lift + glow */
+.stat-cell {
+  transition: transform 200ms ease, box-shadow 200ms ease, background-color 200ms ease, border-color 200ms ease;
+}
+.stat-cell:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 4px 16px -4px rgba(96, 165, 250, 0.15);
+}
+
+/* Interactive list item — subtle left-border reveal + slide */
+.list-item-hover {
+  transition: transform 200ms ease, background-color 200ms ease, box-shadow 200ms ease, border-color 200ms ease;
+  border-left: 3px solid transparent;
+}
+.list-item-hover:hover {
+  transform: translateX(4px);
+  border-left-color: var(--accent);
+  box-shadow: 0 2px 8px -2px rgba(96, 165, 250, 0.1);
+}
+
+/* Progress bar animated fill */
+.progress-fill {
+  transition: width 600ms cubic-bezier(0.4, 0, 0.2, 1);
+}
+
 /* ─────────────────────────────────────────
    DARK MODE GLOBAL TYPOGRAPHY
    ───────────────────────────────────────── */
diff --git a/src/components/AIMentorWidget.tsx b/src/components/AIMentorWidget.tsx
index 28fe8b3c..9e360a73 100644
--- a/src/components/AIMentorWidget.tsx
+++ b/src/components/AIMentorWidget.tsx
@@ -39,7 +39,7 @@ function SkeletonCard() {
       role="status"
       aria-busy="true"
       aria-live="polite"
-      className="rounded-xl border border-[var(--border)] bg-[var(--card)] p-6 shadow-sm animate-pulse"
+      className="rounded-xl border border-[var(--border)] bg-[var(--card)] p-6 shadow-sm animate-pulse transition-all duration-300 hover:shadow-md hover:-translate-y-1"
     >
       <span className="sr-only">Loading AI Mentor insights</span>
       <div className="flex items-center justify-between mb-4">
@@ -107,7 +107,7 @@ export function AIMentorWidget() {
 
   if (error) {
     return (
-      <div className="rounded-xl border border-[var(--border)] bg-[var(--card)] p-6 shadow-sm">
+      <div className="rounded-xl border border-[var(--border)] bg-[var(--card)] p-6 shadow-sm transition-all duration-300 hover:shadow-md hover:-translate-y-1">
         <p className="text-sm text-[var(--muted-foreground)]">{error}</p>
       </div>
     );
@@ -124,7 +124,7 @@ export function AIMentorWidget() {
     : "";
 
   return (
-    <div className="rounded-xl border border-[var(--border)] bg-[var(--card)] p-6 shadow-sm">
+    <div className="rounded-xl border border-[var(--border)] bg-[var(--card)] p-6 shadow-sm transition-all duration-300 hover:shadow-md hover:-translate-y-1">
       <div className="flex items-center justify-between">
         <div>
           <h2 className="text-lg font-semibold text-[var(--card-foreground)] flex items-center gap-2">
diff --git a/src/components/ActivityRingChart.tsx b/src/components/ActivityRingChart.tsx
index 2b5a125c..e7135562 100644
--- a/src/components/ActivityRingChart.tsx
+++ b/src/components/ActivityRingChart.tsx
@@ -81,7 +81,7 @@ export default function ActivityRingChart() {
   }
 
   return (
-    <div className="rounded-xl border border-[var(--border)] bg-[var(--card)] p-6 shadow-sm flex flex-col h-full">
+    <div className="rounded-xl border border-[var(--border)] bg-[var(--card)] p-6 shadow-sm flex flex-col h-full transition-all duration-300 hover:shadow-md hover:-translate-y-1">
       <div className="flex items-center justify-between mb-2">
         <h2 className="text-lg font-semibold text-[var(--card-foreground)]">
           Activity Ring
diff --git a/src/components/BadgeSection.tsx b/src/components/BadgeSection.tsx
index 7aaa1f9a..b267e95e 100644
--- a/src/components/BadgeSection.tsx
+++ b/src/components/BadgeSection.tsx
@@ -35,7 +35,7 @@ export default function BadgeSection({ username }: BadgeSectionProps) {
   const combinedMarkdown = `${streakMarkdown} ${commitsMarkdown}`;
 
   return (
-    <div className="rounded-xl border border-[var(--border)] bg-[var(--card)] p-6 shadow-sm">
+    <div className="rounded-xl border border-[var(--border)] bg-[var(--card)] p-6 shadow-sm transition-all duration-300 hover:shadow-md hover:-translate-y-1">
       <h2 className="mb-4 text-lg font-semibold text-[var(--card-foreground)]">
         📌 Get Your Badge
       </h2>
@@ -105,13 +105,13 @@ function CopyableCodeBlock({ code }: { code: string }) {
   };
 
   return (
-    <div className="flex items-center justify-between rounded-lg bg-[var(--control)] p-3 border border-[var(--border)]">
+    <div className="flex items-center justify-between rounded-lg bg-[var(--control)] p-3 border border-[var(--border)] transition-colors duration-200 hover:bg-[var(--card-muted)]">
       <code className="flex-1 text-xs text-[var(--card-foreground)] overflow-auto scrollbar-thin">
         {code}
       </code>
       <button
         onClick={handleCopy}
-        className="ml-2 shrink-0 px-2 py-1 text-xs font-medium rounded bg-[var(--accent)] text-[var(--accent-foreground)] hover:opacity-90 transition-opacity"
+        className="ml-2 shrink-0 px-2 py-1 text-xs font-medium rounded bg-[var(--accent)] text-[var(--accent-foreground)] hover:opacity-90 transition-opacity active:scale-95"
       >
         {copied ? "✓ Copied!" : "Copy"}
       </button>
diff --git a/src/components/CIAnalytics.tsx b/src/components/CIAnalytics.tsx
index 6b908401..80894dcf 100644
--- a/src/components/CIAnalytics.tsx
+++ b/src/components/CIAnalytics.tsx
@@ -104,7 +104,7 @@ export default function CIAnalytics() {
     : "Refresh";
 
   return (
-    <div className="rounded-xl border border-[var(--border)] bg-[var(--card)] p-6 shadow-sm">
+    <div className="rounded-xl border border-[var(--border)] bg-[var(--card)] p-6 shadow-sm transition-all duration-300 hover:shadow-md hover:-translate-y-1">
       <div className="mb-4 flex items-start justify-between gap-3">
         <div>
           <h2 className="text-lg font-semibold text-[var(--card-foreground)]">
@@ -119,7 +119,7 @@ export default function CIAnalytics() {
           onClick={fetchCIAnalytics}
           disabled={isRateLimited || loading}
           title={isRateLimited ? "GitHub API rate limit reached" : "Refresh CI data"}
-          className="inline-flex items-center gap-1.5 rounded-md border border-[var(--border)] px-3 py-1.5 text-xs font-medium text-[var(--muted-foreground)] transition-colors hover:bg-[var(--control)] disabled:cursor-not-allowed disabled:opacity-50"
+          className="inline-flex items-center gap-1.5 rounded-md border border-[var(--border)] px-3 py-1.5 text-xs font-medium text-[var(--muted-foreground)] transition-all hover:bg-[var(--control)] disabled:cursor-not-allowed disabled:opacity-50 hover:opacity-90 active:scale-95"
         >
           {loading ? (
             <svg className="animate-spin h-3 w-3 text-[var(--muted-foreground)]" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle><path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path></svg>
@@ -140,7 +140,7 @@ export default function CIAnalytics() {
             <div
               key={item}
               aria-hidden="true"
-              className="h-20 rounded-lg bg-[var(--card-muted)] animate-pulse"
+              className="h-20 rounded-lg skeleton-shimmer"
             />
           ))}
         </div>
@@ -165,11 +165,11 @@ export default function CIAnalytics() {
         </div>
       ) : data ? (
         <div className="space-y-4">
-          <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
+          <div className="grid grid-cols-1 sm:grid-cols-2 gap-4 stagger-children">
             {stats.map((stat) => (
               <div
                 key={stat.label}
-                className="rounded-lg bg-[var(--control)] p-4 text-center"
+                className="rounded-lg bg-[var(--control)] p-4 text-center stat-cell animate-fade-in-up"
               >
                 <div className="text-2xl font-bold text-[var(--accent)]">
                   {stat.value}
@@ -181,7 +181,7 @@ export default function CIAnalytics() {
             ))}
           </div>
 
-          <div className="rounded-lg bg-[var(--control)] p-4">
+          <div className="rounded-lg bg-[var(--control)] p-4 stat-cell">
             <p className="text-sm font-medium text-[var(--card-foreground)]">
               Flakiest workflow
             </p>
diff --git a/src/components/CodingActivityInsightsCard.tsx b/src/components/CodingActivityInsightsCard.tsx
index f3d6375b..176384b7 100644
--- a/src/components/CodingActivityInsightsCard.tsx
+++ b/src/components/CodingActivityInsightsCard.tsx
@@ -229,7 +229,7 @@ export default function CodingActivityInsightsCard() {
       : `${dataWindowLabel} · Commits by hour · Local timezone`;
 
   return (
-    <div className="rounded-xl border border-[var(--border)] bg-[var(--card)] p-6 shadow-sm">
+    <div className="rounded-xl border border-[var(--border)] bg-[var(--card)] p-6 shadow-sm transition-all duration-300 hover:shadow-md hover:-translate-y-1">
       <div className="mb-4 flex items-start justify-between gap-3">
         <div>
           <h2 className="text-lg font-semibold text-[var(--card-foreground)]">
@@ -252,7 +252,7 @@ export default function CodingActivityInsightsCard() {
   type="button"
   onClick={fetchInsights}
   disabled={loading}
-  className="flex items-center gap-2 rounded-md border border-[var(--border)] px-3 py-1.5 text-xs font-medium text-[var(--muted-foreground)] transition-colors hover:bg-[var(--control)] disabled:cursor-not-allowed disabled:opacity-50"
+  className="flex items-center gap-2 rounded-md border border-[var(--border)] px-3 py-1.5 text-xs font-medium text-[var(--muted-foreground)] transition-all hover:bg-[var(--control)] disabled:cursor-not-allowed disabled:opacity-50 hover:opacity-90 active:scale-95"
 >
   {loading ? (
     <>
diff --git a/src/components/CodingTimeWidget.tsx b/src/components/CodingTimeWidget.tsx
index 1af55156..d7496804 100644
--- a/src/components/CodingTimeWidget.tsx
+++ b/src/components/CodingTimeWidget.tsx
@@ -50,7 +50,7 @@ export default function CodingTimeWidget() {
 
   if (loading) {
     return (
-      <div className="rounded-xl border border-[var(--border)] bg-[var(--card)] p-6 shadow-sm">
+      <div className="rounded-xl border border-[var(--border)] bg-[var(--card)] p-6 shadow-sm transition-all duration-300 hover:shadow-md hover:-translate-y-1">
         <div className="h-5 w-40 bg-[var(--card-muted)] rounded animate-pulse mb-4" />
         <div className="h-48 bg-[var(--card-muted)] rounded animate-pulse w-full" />
       </div>
@@ -62,7 +62,7 @@ export default function CodingTimeWidget() {
   }
 
   return (
-    <div className="rounded-xl border border-[var(--border)] bg-[var(--card)] p-6 shadow-sm">
+    <div className="rounded-xl border border-[var(--border)] bg-[var(--card)] p-6 shadow-sm transition-all duration-300 hover:shadow-md hover:-translate-y-1">
       <h2 className="text-lg font-semibold text-[var(--card-foreground)] mb-4">
         Wakatime Coding Activity (7 Days)
       </h2>
diff --git a/src/components/CommitSearchPanel.tsx b/src/components/CommitSearchPanel.tsx
index 81fcbd29..d00ec425 100644
--- a/src/components/CommitSearchPanel.tsx
+++ b/src/components/CommitSearchPanel.tsx
@@ -151,7 +151,7 @@ export default function CommitSearchPanel({ commits, loading }: CommitSearchPane
           onClick={handleToggle}
           aria-label={isOpen ? "Collapse commit list" : "Expand commit list"}
           aria-expanded={isOpen}
-          className="flex items-center gap-1 rounded-lg border border-[var(--border)] bg-[var(--control)] px-3 py-2 text-sm font-medium text-[var(--foreground)] hover:bg-[var(--control-hover)] transition-colors"
+          className="flex items-center gap-1 rounded-lg border border-[var(--border)] bg-[var(--control)] px-3 py-2 text-sm font-medium text-[var(--foreground)] hover:bg-[var(--control-hover)] transition-all hover:opacity-90 active:scale-95"
         >
           <svg
             className={`h-4 w-4 transition-transform ${isOpen ? "rotate-180" : ""}`}
@@ -243,7 +243,7 @@ export default function CommitSearchPanel({ commits, loading }: CommitSearchPane
                 <div className="mt-2 flex justify-center">
                   <button
                     onClick={handleLoadMore}
-                    className="rounded-lg border border-[var(--border)] bg-[var(--control)] px-4 py-1.5 text-sm font-medium text-[var(--foreground)] hover:bg-[var(--control-hover)] transition-colors"
+                    className="rounded-lg border border-[var(--border)] bg-[var(--control)] px-4 py-1.5 text-sm font-medium text-[var(--foreground)] hover:bg-[var(--control-hover)] transition-all hover:opacity-90 active:scale-95"
                   >
                     Load more ({filteredCommits.length - visibleCount} remaining)
                   </button>
diff --git a/src/components/CommitTimeChart.tsx b/src/components/CommitTimeChart.tsx
index 91ab081e..c3a981e3 100644
--- a/src/components/CommitTimeChart.tsx
+++ b/src/components/CommitTimeChart.tsx
@@ -97,7 +97,7 @@ export default function CommitTimeChart() {
   }, [fetchContributions]);
 
   return (
-    <div className="rounded-xl border border-[var(--border)] bg-[var(--card)] p-6 shadow-sm flex flex-col h-full">
+    <div className="rounded-xl border border-[var(--border)] bg-[var(--card)] p-6 shadow-sm flex flex-col h-full transition-all duration-300 hover:shadow-md hover:-translate-y-1">
       <div className="flex items-center justify-between mb-2">
         <h2 className="text-lg font-semibold text-[var(--card-foreground)]">
           Commits by Time of Day
@@ -131,7 +131,7 @@ export default function CommitTimeChart() {
               <div
                 key={i}
                 aria-hidden="true"
-                className="h-10 rounded bg-[var(--card-muted)] animate-pulse"
+                className="h-10 rounded skeleton-shimmer"
               />
             ))}
           </div>
diff --git a/src/components/CommunityMetrics.tsx b/src/components/CommunityMetrics.tsx
index 6ac68834..32f0e02f 100644
--- a/src/components/CommunityMetrics.tsx
+++ b/src/components/CommunityMetrics.tsx
@@ -62,7 +62,7 @@ export default function CommunityMetrics() {
     metrics.commentsPosted === 0;
 
   return (
-    <div className="h-full rounded-xl border border-[var(--border)] bg-[var(--card)] p-4 sm:p-6 shadow-sm">
+    <div className="h-full rounded-xl border border-[var(--border)] bg-[var(--card)] p-4 sm:p-6 shadow-sm transition-all duration-300 hover:shadow-md hover:-translate-y-1">
       <div className="mb-4 flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
         <div className="min-w-0">
           <h2 className="text-lg font-semibold text-[var(--card-foreground)]">
@@ -76,7 +76,7 @@ export default function CommunityMetrics() {
           type="button"
           onClick={fetchMetrics}
           disabled={loading}
-          className="inline-flex w-full items-center justify-center gap-1.5 rounded-md border border-[var(--border)] px-3 py-1.5 text-xs font-medium text-[var(--muted-foreground)] transition-colors hover:bg-[var(--control)] sm:w-auto disabled:cursor-not-allowed disabled:opacity-60"
+          className="inline-flex w-full items-center justify-center gap-1.5 rounded-md border border-[var(--border)] px-3 py-1.5 text-xs font-medium text-[var(--muted-foreground)] transition-all hover:bg-[var(--control)] sm:w-auto disabled:cursor-not-allowed disabled:opacity-60 hover:opacity-90 active:scale-95"
         >
           {loading ? (
             <svg className="animate-spin h-3 w-3 text-[var(--muted-foreground)]" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle><path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path></svg>
@@ -98,7 +98,7 @@ export default function CommunityMetrics() {
               <div
                 key={item}
                 aria-hidden="true"
-                className="min-h-20 rounded-lg bg-[var(--card-muted)] animate-pulse"
+                className="min-h-20 rounded-lg skeleton-shimmer"
               />
             ))}
           </div>
@@ -120,7 +120,7 @@ export default function CommunityMetrics() {
             {stats.map((stat) => (
               <div
                 key={stat.label}
-                className="rounded-lg bg-[var(--control)] p-4 text-center min-w-0 sm:min-h-24"
+                className="rounded-lg bg-[var(--control)] p-4 text-center min-w-0 sm:min-h-24 stat-cell animate-fade-in-up"
               >
                 <div className="text-[clamp(1.5rem,5vw,1.75rem)] font-bold leading-none text-[var(--accent)]">
                   {stat.value}
@@ -133,7 +133,7 @@ export default function CommunityMetrics() {
           </div>
 
           {isEmpty && (
-            <div className="rounded-lg border border-[var(--border)] bg-[var(--control)]/60 p-4 text-sm text-[var(--muted-foreground)]">
+            <div className="rounded-lg border border-[var(--border)] bg-[var(--control)]/60 p-4 text-sm text-[var(--muted-foreground)] transition-colors duration-200 hover:bg-[var(--card-muted)]">
               No discussion activity yet in this 30-day window.
             </div>
           )}
diff --git a/src/components/ContributionGraph.tsx b/src/components/ContributionGraph.tsx
index 5d60575e..abce9bb5 100644
--- a/src/components/ContributionGraph.tsx
+++ b/src/components/ContributionGraph.tsx
@@ -376,7 +376,7 @@ export default function ContributionGraph() {
   return (
     <div
       id="contribution-activity"
-      className="rounded-xl border border-[var(--border)] bg-[var(--card)] p-6 shadow-sm"
+      className="rounded-xl border border-[var(--border)] bg-[var(--card)] p-6 shadow-sm transition-all duration-300 hover:shadow-md hover:-translate-y-1"
     >
       <div className="flex flex-wrap items-center justify-between mb-4 gap-2">
         <div className="min-w-0">
@@ -490,7 +490,7 @@ export default function ContributionGraph() {
                   )}
                   <button
                     onClick={handleCustomApply}
-                    className="mt-1 w-full rounded-md bg-[var(--accent)] py-1.5 text-sm font-medium text-[var(--background)] hover:opacity-90 transition-opacity"
+                    className="mt-1 w-full rounded-md bg-[var(--accent)] py-1.5 text-sm font-medium text-[var(--background)] hover:opacity-90 transition-opacity active:scale-95"
                   >
                     Apply
                   </button>
diff --git a/src/components/ContributionHeatmap.tsx b/src/components/ContributionHeatmap.tsx
index d92231c7..ad57710d 100644
--- a/src/components/ContributionHeatmap.tsx
+++ b/src/components/ContributionHeatmap.tsx
@@ -409,7 +409,7 @@ export default function ContributionHeatmap({
                   )}
                   <button
                     onClick={handleCustomApply}
-                    className="mt-2 w-full rounded-md bg-[var(--accent)] px-3 py-1 text-xs font-medium text-[var(--background)] transition-opacity hover:opacity-90"
+                    className="mt-2 w-full rounded-md bg-[var(--accent)] px-3 py-1 text-xs font-medium text-[var(--background)] transition-opacity hover:opacity-90 active:scale-95"
                   >
                     Apply
                   </button>
diff --git a/src/components/CopyLinkButton.tsx b/src/components/CopyLinkButton.tsx
index 1774aede..b233894d 100644
--- a/src/components/CopyLinkButton.tsx
+++ b/src/components/CopyLinkButton.tsx
@@ -30,7 +30,7 @@ export default function CopyLinkButton({ url }: CopyLinkButtonProps) {
       type="button"
       onClick={handleCopy}
       aria-label="Copy profile link"
-      className="inline-flex items-center gap-1.5 px-3 py-1.5 bg-[var(--control)] border border-[var(--border)] text-[var(--muted-foreground)] hover:text-[var(--foreground)] hover:border-[var(--accent)] rounded-lg text-sm font-medium transition-colors shadow-sm focus:outline-none focus:ring-2 focus:ring-[var(--accent)]/50 active:scale-[0.98]"
+      className="inline-flex items-center gap-1.5 px-3 py-1.5 bg-[var(--control)] border border-[var(--border)] text-[var(--muted-foreground)] hover:text-[var(--foreground)] hover:border-[var(--accent)] rounded-lg text-sm font-medium transition-all shadow-sm focus:outline-none focus:ring-2 focus:ring-[var(--accent)]/50 active:scale-[0.98] hover:opacity-90 active:scale-95"
     >
       {copied ? (
         <>
diff --git a/src/components/DiscussionsWidget.tsx b/src/components/DiscussionsWidget.tsx
index b017632b..daf2905e 100644
--- a/src/components/DiscussionsWidget.tsx
+++ b/src/components/DiscussionsWidget.tsx
@@ -53,7 +53,7 @@ export default function DiscussionsWidget() {
     : [];
 
   return (
-    <div className="rounded-xl border border-[var(--border)] bg-[var(--card)] p-6 shadow-sm">
+    <div className="rounded-xl border border-[var(--border)] bg-[var(--card)] p-6 shadow-sm transition-all duration-300 hover:shadow-md hover:-translate-y-1">
       <h2 className="mb-4 text-lg font-semibold text-[var(--card-foreground)]">
         Discussion Activity
       </h2>
@@ -63,7 +63,7 @@ export default function DiscussionsWidget() {
           {[1, 2, 3].map((i) => (
             <div
               key={i}
-              className="h-20 rounded-lg bg-[var(--card-muted)] animate-pulse"
+              className="h-20 rounded-lg skeleton-shimmer"
             />
           ))}
         </div>
@@ -79,11 +79,11 @@ export default function DiscussionsWidget() {
           </button>
         </div>
       ) : (
-        <div className="grid grid-cols-1 sm:grid-cols-3 gap-4">
+        <div className="grid grid-cols-1 sm:grid-cols-3 gap-4 stagger-children">
           {stats.map((stat) => (
             <div
               key={stat.label}
-              className="rounded-lg bg-[var(--control)] p-4 text-center"
+              className="rounded-lg bg-[var(--control)] p-4 text-center stat-cell animate-fade-in-up"
               title={stat.title}
             >
               <div className="text-2xl font-bold text-[var(--accent)]">
diff --git a/src/components/ExportButton.tsx b/src/components/ExportButton.tsx
index 631c2212..123743e6 100644
--- a/src/components/ExportButton.tsx
+++ b/src/components/ExportButton.tsx
@@ -661,7 +661,7 @@ export default function ExportButton() {
         type="button"
         onClick={exportCSV}
         disabled={isExportingCSV}
-        className="flex w-full items-center justify-center gap-2 rounded-lg border border-[var(--border)] bg-[var(--control)] px-4 py-2 text-sm font-medium text-[var(--card-foreground)] transition-colors hover:border-[var(--accent)] disabled:opacity-50 sm:w-auto sm:min-w-[140px]"
+        className="flex w-full items-center justify-center gap-2 rounded-lg border border-[var(--border)] bg-[var(--control)] px-4 py-2 text-sm font-medium text-[var(--card-foreground)] transition-all hover:border-[var(--accent)] disabled:opacity-50 sm:w-auto sm:min-w-[140px] hover:opacity-90 active:scale-95"
       >
         <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
           <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
@@ -673,7 +673,7 @@ export default function ExportButton() {
         type="button"
         onClick={exportPDF}
         disabled={isExportingPDF}
-        className="flex min-w-0 flex-1 items-center justify-center gap-2 rounded-lg bg-[var(--accent)] px-4 py-2 text-sm font-medium text-[var(--accent-foreground)] transition-colors hover:opacity-90 disabled:opacity-50 sm:min-w-[140px] sm:flex-none"
+        className="flex min-w-0 flex-1 items-center justify-center gap-2 rounded-lg bg-[var(--accent)] px-4 py-2 text-sm font-medium text-[var(--accent-foreground)] transition-all hover:opacity-90 disabled:opacity-50 sm:min-w-[140px] sm:flex-none active:scale-95"
         suppressHydrationWarning
       >
         <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
diff --git a/src/components/FriendComparison.tsx b/src/components/FriendComparison.tsx
index a8da58b7..dc6c8f1f 100644
--- a/src/components/FriendComparison.tsx
+++ b/src/components/FriendComparison.tsx
@@ -290,7 +290,7 @@ export default function FriendComparison() {
           <button
             type="submit"
             disabled={loading || !trimmedFriendUsername}
-            className="w-full sm:w-auto shrink-0 whitespace-nowrap rounded-md bg-[var(--accent)] px-4 py-2 text-sm font-medium text-[var(--accent-foreground)] transition-colors disabled:opacity-50 hover:opacity-90"
+            className="w-full sm:w-auto shrink-0 whitespace-nowrap rounded-md bg-[var(--accent)] px-4 py-2 text-sm font-medium text-[var(--accent-foreground)] transition-all disabled:opacity-50 hover:opacity-90 active:scale-95"
           >
             {loading ? "Loading..." : "Compare"}
           </button>
@@ -386,7 +386,7 @@ export default function FriendComparison() {
             </a>
             <button
               onClick={clearComparison}
-              className="rounded-full bg-[var(--control)] px-4 py-2 text-sm text-[var(--foreground)] transition-colors hover:bg-[var(--destructive)]/10 hover:text-[var(--destructive)]"
+              className="rounded-full bg-[var(--control)] px-4 py-2 text-sm text-[var(--foreground)] transition-all hover:bg-[var(--destructive)]/10 hover:text-[var(--destructive)] hover:opacity-90 active:scale-95"
             >
               Clear Comparison
             </button>
diff --git a/src/components/GitHubAchievements.tsx b/src/components/GitHubAchievements.tsx
index 05f64d24..3e4621cc 100644
--- a/src/components/GitHubAchievements.tsx
+++ b/src/components/GitHubAchievements.tsx
@@ -13,7 +13,7 @@ export default function GitHubAchievements({
   error = null,
 }: GitHubAchievementsProps) {
   return (
-    <div className="rounded-xl border border-[var(--border)] bg-[var(--card)] p-6 shadow-sm">
+    <div className="rounded-xl border border-[var(--border)] bg-[var(--card)] p-6 shadow-sm transition-all duration-300 hover:shadow-md hover:-translate-y-1">
       <h2 className="mb-4 text-lg font-semibold text-[var(--card-foreground)]">
         GitHub Achievements
       </h2>
@@ -30,7 +30,7 @@ export default function GitHubAchievements({
             <div
               key={item}
               aria-hidden="true"
-              className="h-28 rounded-lg bg-[var(--card-muted)] animate-pulse"
+              className="h-28 rounded-lg skeleton-shimmer"
             />
           ))}
         </div>
diff --git a/src/components/InactiveRepositoriesCard.tsx b/src/components/InactiveRepositoriesCard.tsx
index 5f97b0c7..2cd54a5b 100644
--- a/src/components/InactiveRepositoriesCard.tsx
+++ b/src/components/InactiveRepositoriesCard.tsx
@@ -71,7 +71,7 @@ export default function InactiveRepositoriesCard() {
   }, [fetchInactiveRepos]);
 
   return (
-    <div className="rounded-xl border border-[var(--border)] bg-[var(--card)] p-6 shadow-sm">
+    <div className="rounded-xl border border-[var(--border)] bg-[var(--card)] p-6 shadow-sm transition-all duration-300 hover:shadow-md hover:-translate-y-1">
       <div className="mb-4 flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
         <div>
           <h2 className="text-lg font-semibold text-[var(--card-foreground)]">
@@ -98,7 +98,7 @@ export default function InactiveRepositoriesCard() {
             type="button"
             onClick={fetchInactiveRepos}
             disabled={loading}
-            className="inline-flex items-center gap-1.5 rounded-md border border-[var(--border)] px-3 py-1.5 text-xs font-medium text-[var(--muted-foreground)] transition-colors hover:bg-[var(--control)] disabled:cursor-not-allowed disabled:opacity-60"
+            className="inline-flex items-center gap-1.5 rounded-md border border-[var(--border)] px-3 py-1.5 text-xs font-medium text-[var(--muted-foreground)] transition-all hover:bg-[var(--control)] disabled:cursor-not-allowed disabled:opacity-60 hover:opacity-90 active:scale-95"
           >
             {loading ? (
               <svg className="animate-spin h-3 w-3 text-[var(--muted-foreground)]" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle><path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path></svg>
@@ -116,7 +116,7 @@ export default function InactiveRepositoriesCard() {
               <div
                 key={i}
                 aria-hidden="true"
-                className="h-20 rounded-lg bg-[var(--card-muted)] animate-pulse"
+                className="h-20 rounded-lg skeleton-shimmer"
               />
             ))}
           </div>
@@ -136,14 +136,14 @@ export default function InactiveRepositoriesCard() {
             Nice! No inactive repositories for this period.
           </p>
         ) : (
-          <ul className="space-y-3">
+          <ul className="space-y-3 stagger-children">
             {repos.map((repo) => (
-              <li key={repo.name}>
+              <li key={repo.name} className="animate-fade-in-up">
                 <a
                   href={repo.url}
                   target="_blank"
                   rel="noopener noreferrer"
-                  className="block rounded-lg border border-[var(--border)] bg-[var(--control)] p-4 transition-colors hover:border-[var(--accent)]"
+                  className="block rounded-lg border border-[var(--border)] bg-[var(--control)] p-4 transition-all duration-200 hover:border-[var(--accent)] hover:-translate-y-0.5 hover:shadow-md"
                 >
                   <div className="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
                     <div className="min-w-0">
diff --git a/src/components/IssueMetrics.tsx b/src/components/IssueMetrics.tsx
index c3f4b0e1..30f8410e 100644
--- a/src/components/IssueMetrics.tsx
+++ b/src/components/IssueMetrics.tsx
@@ -62,7 +62,7 @@ export default function IssueMetrics() {
     metrics && metrics.trend > 0 ? "text-green-400" : "text-[var(--destructive)]";
 
   return (
-    <div className="rounded-xl border border-[var(--border)] bg-[var(--card)] p-6 shadow-sm">
+    <div className="rounded-xl border border-[var(--border)] bg-[var(--card)] p-6 shadow-sm transition-all duration-300 hover:shadow-md hover:-translate-y-1">
       <h2 className="mb-4 text-lg font-semibold text-[var(--card-foreground)]">
         Issue Analytics
       </h2>
@@ -78,7 +78,7 @@ export default function IssueMetrics() {
             <div
               key={i}
               aria-hidden="true"
-              className="h-20 rounded-lg bg-[var(--card-muted)] p-4 animate-pulse"
+              className="h-20 rounded-lg skeleton-shimmer"
             />
           ))}
         </div>
@@ -94,11 +94,11 @@ export default function IssueMetrics() {
           </button>
         </div>
       ) : (
-        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-5 gap-4">
+        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-5 gap-4 stagger-children">
           {stats.map((stat, idx) => (
             <div
               key={stat.label}
-              className="rounded-lg bg-[var(--control)] p-4 text-center"
+              className="rounded-lg bg-[var(--control)] p-4 text-center stat-cell animate-fade-in-up"
             >
               <div className="text-2xl font-bold text-[var(--accent)] truncate" title={String(stat.value)}>
                 {stat.value}
diff --git a/src/components/LanguageBreakdown.tsx b/src/components/LanguageBreakdown.tsx
index ddd07911..7f437302 100644
--- a/src/components/LanguageBreakdown.tsx
+++ b/src/components/LanguageBreakdown.tsx
@@ -73,7 +73,7 @@ export default function LanguageBreakdown() {
   }
 
   return (
-    <div className="rounded-xl border border-[var(--border)] bg-[var(--card)] p-6 shadow-sm">
+    <div className="rounded-xl border border-[var(--border)] bg-[var(--card)] p-6 shadow-sm transition-all duration-300 hover:shadow-md hover:-translate-y-1">
       <h2 className="text-lg font-semibold text-[var(--card-foreground)] mb-4">
         Language Breakdown
       </h2>
@@ -88,11 +88,11 @@ export default function LanguageBreakdown() {
           <span className="sr-only">Loading language breakdown</span>
           <div
             aria-hidden="true"
-            className="h-6 rounded-full bg-[var(--card-muted)] animate-pulse"
+            className="h-6 rounded-full skeleton-shimmer"
           />
           <div aria-hidden="true" className="grid grid-cols-1 sm:grid-cols-2 gap-2 mt-3">
             {[1, 2, 3, 4].map((i) => (
-              <div key={i} className="h-5 rounded bg-[var(--card-muted)] animate-pulse" />
+              <div key={i} className="h-5 rounded skeleton-shimmer" />
             ))}
           </div>
         </div>
diff --git a/src/components/LocalCodingTime.tsx b/src/components/LocalCodingTime.tsx
index 3b88f0b3..b5ba97ce 100644
--- a/src/components/LocalCodingTime.tsx
+++ b/src/components/LocalCodingTime.tsx
@@ -60,11 +60,11 @@ export default function LocalCodingTime() {
 
   if (loading) {
     return (
-      <div className="rounded-xl border border-[var(--border)] bg-[var(--card)] p-6 shadow-sm">
-        <div className="h-5 w-40 bg-[var(--card-muted)] rounded animate-pulse mb-4" />
+      <div className="rounded-xl border border-[var(--border)] bg-[var(--card)] p-6 shadow-sm transition-all duration-300 hover:shadow-md hover:-translate-y-1">
+        <div className="h-5 w-40 skeleton-shimmer rounded mb-4" />
         <div className="space-y-2">
-          <div className="h-4 bg-[var(--card-muted)] rounded animate-pulse w-3/4" />
-          <div className="h-4 bg-[var(--card-muted)] rounded animate-pulse w-1/2" />
+          <div className="h-4 skeleton-shimmer rounded w-3/4" />
+          <div className="h-4 skeleton-shimmer rounded w-1/2" />
         </div>
       </div>
     );
@@ -72,7 +72,7 @@ export default function LocalCodingTime() {
 
   if (!data || !data.hasData) {
     return (
-      <div className="rounded-xl border border-[var(--border)] bg-[var(--card)] p-6 shadow-sm">
+      <div className="rounded-xl border border-[var(--border)] bg-[var(--card)] p-6 shadow-sm transition-all duration-300 hover:shadow-md hover:-translate-y-1">
         <div className="flex items-center justify-between mb-4">
           <h2 className="text-lg font-semibold text-[var(--card-foreground)]">
             Local Coding Time
@@ -115,7 +115,7 @@ export default function LocalCodingTime() {
   const maxSeconds = Math.max(...data.dailyData.map((d) => d.totalSeconds), 1);
 
   return (
-    <div className="rounded-xl border border-[var(--border)] bg-[var(--card)] p-6 shadow-sm">
+    <div className="rounded-xl border border-[var(--border)] bg-[var(--card)] p-6 shadow-sm transition-all duration-300 hover:shadow-md hover:-translate-y-1">
       <div className="flex items-center justify-between mb-4">
         <h2 className="text-lg font-semibold text-[var(--card-foreground)]">
           Local Coding Time
@@ -131,8 +131,8 @@ export default function LocalCodingTime() {
         </select>
       </div>
 
-      <div className="grid grid-cols-3 gap-4 mb-6">
-        <div className="text-center">
+      <div className="grid grid-cols-3 gap-4 mb-6 stagger-children">
+        <div className="text-center stat-cell rounded-lg p-2 animate-fade-in-up">
           <div className="text-2xl font-bold text-[var(--card-foreground)]">
             {formatDuration(data.totals.totalSeconds)}
           </div>
@@ -140,7 +140,7 @@ export default function LocalCodingTime() {
             Total time
           </div>
         </div>
-        <div className="text-center">
+        <div className="text-center stat-cell rounded-lg p-2 animate-fade-in-up">
           <div className="text-2xl font-bold text-[var(--card-foreground)]">
             {data.totals.totalDays}
           </div>
@@ -148,7 +148,7 @@ export default function LocalCodingTime() {
             Active days
           </div>
         </div>
-        <div className="text-center">
+        <div className="text-center stat-cell rounded-lg p-2 animate-fade-in-up">
           <div className="text-2xl font-bold text-[var(--card-foreground)]">
             {formatDuration(data.totals.avgSecondsPerDay)}
           </div>
@@ -168,7 +168,7 @@ export default function LocalCodingTime() {
               </span>
               <div className="flex-1 h-4 bg-[var(--control)] rounded overflow-hidden">
                 <div
-                  className="h-full bg-[var(--accent)] rounded"
+                  className="h-full bg-[var(--accent)] rounded progress-fill"
                   style={{ width: `${pct}%` }}
                 />
               </div>
diff --git a/src/components/MiniPRTrendChart.tsx b/src/components/MiniPRTrendChart.tsx
index c48d8bb3..24412f9c 100644
--- a/src/components/MiniPRTrendChart.tsx
+++ b/src/components/MiniPRTrendChart.tsx
@@ -121,7 +121,7 @@ export default function MiniPRTrendChart() {
   if (stats.trendText === "Degrading") strokeColor = "var(--destructive)";
 
   return (
-    <div className="mt-4 flex h-16 w-full items-center justify-between gap-4 rounded-lg bg-[var(--control)] p-3 border border-[var(--border)]">
+    <div className="mt-4 flex h-16 w-full items-center justify-between gap-4 rounded-lg bg-[var(--control)] p-3 border border-[var(--border)] transition-colors duration-200 hover:bg-[var(--card-muted)]">
       <div className="flex flex-col gap-1 w-24">
         <span className="text-xs font-medium text-[var(--muted-foreground)]">12w Trend</span>
         <span className={`inline-flex w-fit items-center rounded px-1.5 py-0.5 text-[10px] font-medium ${stats.trendBg} ${stats.trendColor}`}>
diff --git a/src/components/NotificationBell.tsx b/src/components/NotificationBell.tsx
index a9440243..d0c31849 100644
--- a/src/components/NotificationBell.tsx
+++ b/src/components/NotificationBell.tsx
@@ -108,7 +108,7 @@ export default function NotificationBell() {
       <button
         type="button"
         onClick={handleOpen}
-        className="relative rounded-lg p-2 text-[var(--muted-foreground)] hover:bg-[var(--control)] hover:text-[var(--card-foreground)] transition-colors"
+        className="relative rounded-lg p-2 text-[var(--muted-foreground)] hover:bg-[var(--control)] hover:text-[var(--card-foreground)] transition-all hover:opacity-90 active:scale-95"
         aria-label="Notifications"
         title="Notifications"
         suppressHydrationWarning
diff --git a/src/components/PRBreakdownChart.tsx b/src/components/PRBreakdownChart.tsx
index 2e69a155..6b163e3e 100644
--- a/src/components/PRBreakdownChart.tsx
+++ b/src/components/PRBreakdownChart.tsx
@@ -54,16 +54,16 @@ export default function PRBreakdownChart() {
 
   if (loading) {
     return (
-      <div className="rounded-xl border border-[var(--border)] bg-[var(--card)] p-6 shadow-sm">
+      <div className="rounded-xl border border-[var(--border)] bg-[var(--card)] p-6 shadow-sm transition-all duration-300 hover:shadow-md hover:-translate-y-1">
         <div role="status" aria-live="polite" aria-busy="true">
           <span className="sr-only">Loading PR breakdown</span>
           <div
             aria-hidden="true"
-            className="mb-4 h-5 w-40 rounded bg-[var(--card-muted)] animate-pulse"
+            className="mb-4 h-5 w-40 rounded skeleton-shimmer"
           />
           <div
             aria-hidden="true"
-            className="h-[200px] rounded bg-[var(--card-muted)] animate-pulse"
+            className="h-[200px] rounded skeleton-shimmer"
           />
         </div>
       </div>
@@ -72,7 +72,7 @@ export default function PRBreakdownChart() {
 
   if (error) {
     return (
-      <div className="rounded-xl border border-[var(--border)] bg-[var(--card)] p-6 shadow-sm">
+      <div className="rounded-xl border border-[var(--border)] bg-[var(--card)] p-6 shadow-sm transition-all duration-300 hover:shadow-md hover:-translate-y-1">
         <h2 className="mb-4 text-lg font-semibold text-[var(--card-foreground)]">PR Breakdown</h2>
         <div className="rounded-lg border border-[var(--destructive)]/20 bg-[var(--destructive)]/10 p-4 text-sm text-[var(--destructive)]">
           <p>{error}</p>
@@ -96,7 +96,7 @@ export default function PRBreakdownChart() {
     : [];
 
   return (
-    <div className="rounded-xl border border-[var(--border)] bg-[var(--card)] p-6 shadow-sm">
+    <div className="rounded-xl border border-[var(--border)] bg-[var(--card)] p-6 shadow-sm transition-all duration-300 hover:shadow-md hover:-translate-y-1">
       <h2 className="mb-4 text-lg font-semibold text-[var(--card-foreground)]">PR Breakdown</h2>
       {total === 0 ? (
         <p className="flex h-[200px] items-center justify-center text-sm text-[var(--muted-foreground)]">
diff --git a/src/components/PRMetrics.tsx b/src/components/PRMetrics.tsx
index a7fb71ee..dd203a3a 100644
--- a/src/components/PRMetrics.tsx
+++ b/src/components/PRMetrics.tsx
@@ -174,9 +174,9 @@ export default function PRMetrics() {
         <div className="truncate mt-1 text-sm text-[var(--muted-foreground)]">{stat.label}</div>
       </>
     );
-    const className = `rounded-lg p-4 text-center min-w-0 transition-colors ${
+    const className = `rounded-lg p-4 text-center min-w-0 stat-cell ${
       stat.warning
-        ? "border border-orange-400/30 bg-orange-500/10 hover:bg-orange-500/15"
+        ? "border border-orange-400/30 bg-orange-500/10"
         : "bg-[var(--control)]"
     }`;
 
@@ -199,7 +199,7 @@ export default function PRMetrics() {
   };
 
   return (
-    <div className="rounded-xl border border-[var(--border)] bg-[var(--card)] p-6 shadow-sm">
+    <div className="rounded-xl border border-[var(--border)] bg-[var(--card)] p-6 shadow-sm transition-all duration-300 hover:shadow-md hover:-translate-y-1">
       <div className="mb-4 flex flex-col gap-3 lg:flex-row lg:items-center lg:justify-between">
         <SectionHeader title="PR Analytics" />
         <div className="flex flex-wrap items-center gap-2">
@@ -256,11 +256,11 @@ export default function PRMetrics() {
               <div
                 key={i}
                 aria-hidden="true"
-                className="bg-[var(--card-muted)] rounded-lg p-4 h-24 animate-pulse"
+                className="bg-[var(--card-muted)] rounded-lg p-4 h-24 skeleton-shimmer"
               />
             ))}
           </div>
-          <div className="h-[270px] rounded-lg bg-[var(--card-muted)] animate-pulse" aria-hidden="true" />
+          <div className="h-[270px] rounded-lg skeleton-shimmer" aria-hidden="true" />
         </div>
       ) : error ? (
         <div className="rounded-lg border border-[var(--destructive-muted-border)] bg-[var(--destructive-muted)] p-4 text-sm text-[var(--destructive)]">
@@ -295,7 +295,7 @@ export default function PRMetrics() {
               </div>
             </div>
             
-            <div className="mt-3 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-6 gap-4">
+            <div className="mt-3 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-6 gap-4 stagger-children">
               {githubStats
                 .filter((stat) => {
                   if (prFilter === "all") return true;
@@ -356,7 +356,7 @@ export default function PRMetrics() {
               { label: "Total Reviews Given", value: metrics?.reviews?.totalReviews ?? 0 },
               { label: "Approval Rate", value: metrics?.reviews?.approvalRate ?? "0%" },
             ].map((stat) => (
-              <div key={stat.label} className="rounded-lg bg-[var(--control)] p-4 text-center">
+              <div key={stat.label} className="rounded-lg bg-[var(--control)] p-4 text-center stat-cell animate-fade-in-up">
                 <div className="text-2xl font-bold text-[var(--accent)]">{stat.value}</div>
                 <div className="mt-1 text-sm text-[var(--muted-foreground)]">{stat.label}</div>
               </div>
@@ -367,7 +367,7 @@ export default function PRMetrics() {
               <p className="mb-3 text-sm font-medium text-[var(--muted-foreground)]">Most Reviewed Repos</p>
               <div className="space-y-2">
                 {metrics.reviews.topRepos.map((item) => (
-                  <div key={item.repo} className="flex items-center justify-between rounded-lg bg-[var(--control)] px-4 py-2">
+                  <div key={item.repo} className="flex items-center justify-between rounded-lg bg-[var(--control)] px-4 py-2 transition-all duration-200 hover:bg-[var(--card-muted)] hover:-translate-y-0.5">
                     <span className="truncate text-sm text-[var(--card-foreground)]">{item.repo}</span>
                     <span className="ml-4 shrink-0 text-sm font-semibold text-[var(--accent)]">
                       {item.count} review{item.count !== 1 ? "s" : ""}
diff --git a/src/components/PRReviewTrendChart.tsx b/src/components/PRReviewTrendChart.tsx
index ffb78987..58179f3a 100644
--- a/src/components/PRReviewTrendChart.tsx
+++ b/src/components/PRReviewTrendChart.tsx
@@ -153,7 +153,7 @@ export default function PRReviewTrendChart() {
   const hasData = data.some((week) => week.avgReviewDays !== null);
 
   return (
-    <div className="flex h-full flex-col rounded-xl border border-[var(--border)] bg-[var(--card)] p-6 shadow-sm">
+    <div className="flex h-full flex-col rounded-xl border border-[var(--border)] bg-[var(--card)] p-6 shadow-sm transition-all duration-300 hover:shadow-md hover:-translate-y-1">
       <div className="mb-5 flex items-start justify-between gap-4">
         <div>
           <h2 className="text-lg font-semibold text-[var(--card-foreground)]">
diff --git a/src/components/PersonalRecords.tsx b/src/components/PersonalRecords.tsx
index 1b224410..2a9a1094 100644
--- a/src/components/PersonalRecords.tsx
+++ b/src/components/PersonalRecords.tsx
@@ -219,7 +219,7 @@ export default function PersonalRecords() {
     },
   ];
   return (
-    <div className="rounded-xl border border-[var(--border)] bg-[var(--card)] p-6 shadow-sm">
+    <div className="rounded-xl border border-[var(--border)] bg-[var(--card)] p-6 shadow-sm transition-all duration-300 hover:shadow-md hover:-translate-y-1">
       <h2 className="mb-4 text-lg font-semibold text-[var(--card-foreground)]">
         Personal Records
       </h2>
@@ -236,7 +236,7 @@ export default function PersonalRecords() {
             <div
               key={i}
               aria-hidden="true"
-              className="h-32 rounded-lg bg-[var(--card-muted)] p-4 animate-pulse"
+              className="h-32 rounded-lg skeleton-shimmer p-4"
             />
           ))}
         </div>
@@ -252,11 +252,11 @@ export default function PersonalRecords() {
           </button>
         </div>
       ) : (
-        <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-4 items-stretch">
+        <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-4 items-stretch stagger-children">
           {records.map((rec) => (
             <div
               key={rec.label}
-              className="h-full rounded-lg bg-[var(--control)] p-4 text-center flex flex-col justify-between border border-transparent transition-all duration-200 hover:-translate-y-0.5 hover:shadow-md hover:border-[var(--accent)]/30"
+              className="h-full rounded-lg bg-[var(--control)] p-4 text-center flex flex-col justify-between border border-transparent stat-cell animate-fade-in-up hover:border-[var(--accent)]/30"
             >
               <div>
                 <div className="text-xl mb-2 flex justify-center">
diff --git a/src/components/PinnedRepos.tsx b/src/components/PinnedRepos.tsx
index c5f3e92f..b703e72b 100644
--- a/src/components/PinnedRepos.tsx
+++ b/src/components/PinnedRepos.tsx
@@ -99,7 +99,7 @@ export default function PinnedRepos() {
   }, [pinnedRepos]);
 
   return (
-    <div className="rounded-xl border border-[var(--border)] bg-[var(--card)] p-6 shadow-sm">
+    <div className="rounded-xl border border-[var(--border)] bg-[var(--card)] p-6 shadow-sm transition-all duration-300 hover:shadow-md hover:-translate-y-1">
       <h2 className="mb-4 text-lg font-semibold text-[var(--card-foreground)]">
         Pinned Repositories
       </h2>
@@ -115,7 +115,7 @@ export default function PinnedRepos() {
             <div
               key={i}
               aria-hidden="true"
-              className="h-24 rounded-lg bg-[var(--card-muted)] animate-pulse"
+              className="h-24 rounded-lg skeleton-shimmer"
             />
           ))}
         </div>
diff --git a/src/components/PinnedReposWidget.tsx b/src/components/PinnedReposWidget.tsx
index 43f2b07a..edeb433a 100644
--- a/src/components/PinnedReposWidget.tsx
+++ b/src/components/PinnedReposWidget.tsx
@@ -44,7 +44,7 @@ export default function PinnedReposWidget({
 
   if (loading) {
     return (
-      <div className="rounded-2xl border border-[var(--border)] bg-[var(--card)] p-6 shadow-sm">
+      <div className="rounded-2xl border border-[var(--border)] bg-[var(--card)] p-6 shadow-sm transition-all duration-300 hover:shadow-md hover:-translate-y-1">
         <h2 className="mb-4 text-lg font-semibold text-[var(--card-foreground)]">
           Repository Spotlight 🚀
         </h2>
@@ -52,7 +52,7 @@ export default function PinnedReposWidget({
           {[1, 2, 3].map((i) => (
             <div
               key={i}
-              className="h-32 rounded-xl bg-[var(--card-muted)] animate-pulse border border-[var(--border)]"
+              className="h-32 rounded-xl skeleton-shimmer border border-[var(--border)]"
             />
           ))}
         </div>
@@ -62,7 +62,7 @@ export default function PinnedReposWidget({
 
   if (error) {
     return (
-      <div className="rounded-2xl border border-[var(--border)] bg-[var(--card)] p-6 shadow-sm">
+      <div className="rounded-2xl border border-[var(--border)] bg-[var(--card)] p-6 shadow-sm transition-all duration-300 hover:shadow-md hover:-translate-y-1">
         <h2 className="mb-4 text-lg font-semibold text-[var(--card-foreground)]">
           Repository Spotlight 🚀
         </h2>
@@ -85,7 +85,7 @@ export default function PinnedReposWidget({
     if (isPublic) return null; // Hide completely on public profile if empty
 
     return (
-      <div className="rounded-2xl border border-[var(--border)] bg-[var(--card)] p-6 shadow-sm">
+      <div className="rounded-2xl border border-[var(--border)] bg-[var(--card)] p-6 shadow-sm transition-all duration-300 hover:shadow-md hover:-translate-y-1">
         <h2 className="mb-4 text-lg font-semibold text-[var(--card-foreground)]">
           Repository Spotlight 🚀
         </h2>
@@ -108,7 +108,7 @@ export default function PinnedReposWidget({
   }
 
   return (
-    <div className="rounded-2xl border border-[var(--border)] bg-[var(--card)] p-6 shadow-sm">
+    <div className="rounded-2xl border border-[var(--border)] bg-[var(--card)] p-6 shadow-sm transition-all duration-300 hover:shadow-md hover:-translate-y-1">
       <h2 className="mb-4 text-lg font-semibold text-[var(--card-foreground)] flex items-center justify-between">
         <span>Repository Spotlight 🚀</span>
         {!isPublic && (
diff --git a/src/components/PrivacySettings.tsx b/src/components/PrivacySettings.tsx
index 15bf7caf..8662bcd9 100644
--- a/src/components/PrivacySettings.tsx
+++ b/src/components/PrivacySettings.tsx
@@ -72,7 +72,7 @@ export default function PrivacySettings() {
   }
 
   return (
-    <div className="mt-6 rounded-xl border border-[var(--border)] bg-[var(--card)] p-6 shadow-sm">
+    <div className="mt-6 rounded-xl border border-[var(--border)] bg-[var(--card)] p-6 shadow-sm transition-all duration-300 hover:shadow-md hover:-translate-y-1">
       <h2 className="text-xl font-semibold text-[var(--card-foreground)] mb-1">
         Privacy & Data
       </h2>
@@ -104,7 +104,7 @@ export default function PrivacySettings() {
           <button
             onClick={handleExport}
             disabled={downloading}
-            className="rounded-lg bg-[var(--accent)] px-4 py-2 text-sm font-medium text-[var(--accent-foreground)] transition hover:opacity-90 disabled:opacity-60"
+            className="rounded-lg bg-[var(--accent)] px-4 py-2 text-sm font-medium text-[var(--accent-foreground)] transition hover:opacity-90 disabled:opacity-60 transition-all duration-200 active:scale-95"
           >
             {downloading ? "Exporting..." : "Export My Data"}
           </button>
diff --git a/src/components/ProjectMetrics.tsx b/src/components/ProjectMetrics.tsx
index 77f9645a..f70f3603 100644
--- a/src/components/ProjectMetrics.tsx
+++ b/src/components/ProjectMetrics.tsx
@@ -146,7 +146,7 @@ export default function ProjectMetrics() {
 
   if (!data && !error) {
     return (
-      <div className="rounded-xl border border-[var(--border)] bg-[var(--card)] p-6 shadow-sm">
+      <div className="rounded-xl border border-[var(--border)] bg-[var(--card)] p-6 shadow-sm transition-all duration-300 hover:shadow-md hover:-translate-y-1">
         <div className="flex items-center justify-between mb-4">
           <h2 className="text-lg font-semibold text-[var(--card-foreground)]">
             Project Tracking
@@ -239,7 +239,7 @@ export default function ProjectMetrics() {
                   <button
                     type="submit"
                     disabled={connecting}
-                    className="flex-1 rounded-md bg-[var(--accent)] px-3 py-2 text-sm font-medium text-[var(--accent-foreground)] transition-colors hover:opacity-90 disabled:opacity-50"
+                    className="flex-1 rounded-md bg-[var(--accent)] px-3 py-2 text-sm font-medium text-[var(--accent-foreground)] transition-all hover:opacity-90 disabled:opacity-50 active:scale-95"
                   >
                     {connecting ? "Connecting..." : "Connect"}
                   </button>
@@ -261,7 +261,7 @@ export default function ProjectMetrics() {
 
   if (error) {
     return (
-      <div className="rounded-xl border border-[var(--border)] bg-[var(--card)] p-6 shadow-sm">
+      <div className="rounded-xl border border-[var(--border)] bg-[var(--card)] p-6 shadow-sm transition-all duration-300 hover:shadow-md hover:-translate-y-1">
         <div className="flex items-center justify-between mb-4">
           <h2 className="text-lg font-semibold text-[var(--card-foreground)]">
             Project Tracking
@@ -356,7 +356,7 @@ export default function ProjectMetrics() {
                   <button
                     type="submit"
                     disabled={connecting}
-                    className="flex-1 rounded-md bg-[var(--accent)] px-3 py-2 text-sm font-medium text-[var(--accent-foreground)] transition-colors hover:opacity-90 disabled:opacity-50"
+                    className="flex-1 rounded-md bg-[var(--accent)] px-3 py-2 text-sm font-medium text-[var(--accent-foreground)] transition-all hover:opacity-90 disabled:opacity-50 active:scale-95"
                   >
                     {connecting ? "Connecting..." : "Connect"}
                   </button>
@@ -387,7 +387,7 @@ export default function ProjectMetrics() {
   ];
 
   return (
-    <div className="rounded-xl border border-[var(--border)] bg-[var(--card)] p-6 shadow-sm">
+    <div className="rounded-xl border border-[var(--border)] bg-[var(--card)] p-6 shadow-sm transition-all duration-300 hover:shadow-md hover:-translate-y-1">
       <div className="flex items-center justify-between mb-4">
         <h2 className="text-lg font-semibold text-[var(--card-foreground)]">
           Project Tracking
@@ -400,11 +400,11 @@ export default function ProjectMetrics() {
           Disconnect
         </button>
       </div>
-      <div className="grid grid-cols-2 md:grid-cols-4 gap-4 mb-6">
+      <div className="grid grid-cols-2 md:grid-cols-4 gap-4 mb-6 stagger-children">
         {stats.map((stat) => (
           <div
             key={stat.label}
-            className="rounded-lg bg-[var(--control)] p-4 text-center"
+            className="rounded-lg bg-[var(--control)] p-4 text-center stat-cell animate-fade-in-up"
           >
             <div className="text-2xl font-bold text-[var(--accent)]">
               {stat.value}
@@ -420,11 +420,11 @@ export default function ProjectMetrics() {
           <h3 className="text-sm font-medium mb-3 text-[var(--muted-foreground)]">
             Recent Issues
           </h3>
-          <div className="space-y-2">
+          <div className="space-y-2 stagger-children">
             {data.recentIssues.slice(0, 5).map((issue) => (
               <div
                 key={issue.key}
-                className="flex items-center justify-between rounded-lg bg-[var(--control)] p-3"
+                className="flex items-center justify-between rounded-lg bg-[var(--control)] p-3 stat-cell animate-fade-in-up"
               >
                 <div className="min-w-0 flex-1">
                   <span className="font-mono text-xs text-[var(--accent)]">
diff --git a/src/components/RecentActivity.tsx b/src/components/RecentActivity.tsx
index 6608a88b..91675a69 100644
--- a/src/components/RecentActivity.tsx
+++ b/src/components/RecentActivity.tsx
@@ -170,7 +170,7 @@ export default function RecentActivity() {
   }, [fetchActivity]);
 
   return (
-    <div className="rounded-xl border border-[var(--border)] bg-[var(--card)] p-6 shadow-sm">
+    <div className="rounded-xl border border-[var(--border)] bg-[var(--card)] p-6 shadow-sm transition-all duration-300 hover:shadow-md hover:-translate-y-1">
       <div className="mb-4 flex items-center justify-between gap-3">
         <div>
           <h2 className="text-lg font-semibold text-[var(--card-foreground)]">
@@ -184,7 +184,7 @@ export default function RecentActivity() {
           type="button"
           onClick={fetchActivity}
           disabled={loading}
-          className="inline-flex items-center gap-1.5 rounded-md border border-[var(--border)] px-3 py-1.5 text-xs font-medium text-[var(--muted-foreground)] transition-colors hover:bg-[var(--control)] disabled:cursor-not-allowed disabled:opacity-60"
+          className="inline-flex items-center gap-1.5 rounded-md border border-[var(--border)] px-3 py-1.5 text-xs font-medium text-[var(--muted-foreground)] transition-all hover:bg-[var(--control)] disabled:cursor-not-allowed disabled:opacity-60 hover:opacity-90 active:scale-95"
         >
           {loading ? (
             <svg className="animate-spin h-3 w-3 text-[var(--muted-foreground)]" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle><path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path></svg>
@@ -198,7 +198,7 @@ export default function RecentActivity() {
           {Array.from({ length: 6 }).map((_, index) => (
             <div
               key={index}
-              className="h-16 rounded-lg bg-[var(--card-muted)] animate-pulse"
+              className="h-16 rounded-lg skeleton-shimmer"
             />
           ))}
         </div>
@@ -218,9 +218,9 @@ export default function RecentActivity() {
           No recent GitHub activity yet.
         </p>
       ) : (
-        <ul className="max-h-[320px] space-y-3 overflow-y-auto border-l border-[var(--border)] pl-4 pr-1">
+        <ul className="max-h-[320px] space-y-3 overflow-y-auto border-l border-[var(--border)] pl-4 pr-1 stagger-children">
           {items.map((item) => (
-            <li key={item.id} className="relative">
+            <li key={item.id} className="relative animate-fade-in-up">
               <span
                 aria-hidden="true"
                 className="absolute -left-[21px] top-6 h-2.5 w-2.5 rounded-full border border-[var(--border)] bg-[var(--card)]"
@@ -229,7 +229,7 @@ export default function RecentActivity() {
                 href={item.url}
                 target="_blank"
                 rel="noopener noreferrer"
-                className="block rounded-lg border border-[var(--border)] bg-[var(--control)] p-4 transition-colors hover:border-[var(--accent)]"
+                className="block rounded-lg border border-[var(--border)] bg-[var(--control)] p-4 transition-all duration-200 hover:border-[var(--accent)] hover:-translate-y-0.5 hover:shadow-md"
               >
                 <div className="flex items-center justify-between gap-3">
                   <span className="inline-flex items-center gap-1.5 rounded-full border border-[var(--border)] bg-[var(--card)] px-2 py-0.5 text-xs font-medium text-[var(--muted-foreground)]">
diff --git a/src/components/RepoHealthPanel.tsx b/src/components/RepoHealthPanel.tsx
index 36b10d9c..f622116b 100644
--- a/src/components/RepoHealthPanel.tsx
+++ b/src/components/RepoHealthPanel.tsx
@@ -74,7 +74,7 @@ export default function RepoHealthPanel({ health, isOpen, onClose }: Props) {
             <span className={`text-2xl font-bold ${health.grade === "green" ? "text-[var(--accent)]" : health.grade === "yellow" ? "text-[var(--warning,#ca8a04)]" : "text-[var(--destructive)]"}`}>
               {health.score}
             </span>
-            <button type="button" onClick={onClose} className="rounded-lg p-1.5 text-[var(--muted-foreground)] hover:bg-[var(--control)] transition-colors" aria-label="Close panel">
+            <button type="button" onClick={onClose} className="rounded-lg p-1.5 text-[var(--muted-foreground)] hover:bg-[var(--control)] transition-all hover:opacity-90 active:scale-95" aria-label="Close panel">
               ✕
             </button>
           </div>
diff --git a/src/components/ShareProfileSection.tsx b/src/components/ShareProfileSection.tsx
index 8afa16b7..57e76ec1 100644
--- a/src/components/ShareProfileSection.tsx
+++ b/src/components/ShareProfileSection.tsx
@@ -50,7 +50,7 @@ export default function ShareProfileSection({
   };
 
   return (
-    <section className="rounded-xl border border-[var(--border)] bg-[var(--card)] p-4 shadow-sm md:p-5">
+    <section className="rounded-xl border border-[var(--border)] bg-[var(--card)] p-4 shadow-sm md:p-5 transition-all duration-300 hover:shadow-md hover:-translate-y-1">
       <div className="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
         <div>
           <h2 className="text-sm font-semibold uppercase tracking-[0.18em] text-[var(--card-foreground)]">
@@ -67,7 +67,7 @@ export default function ShareProfileSection({
               type="button"
               onClick={handleNativeShare}
               aria-label={`Share ${username}'s profile using the device share sheet`}
-              className="inline-flex items-center gap-2 rounded-lg border border-[var(--border)] bg-[var(--accent)] px-3 py-2 text-sm font-medium text-[var(--accent-foreground)] transition-colors hover:opacity-90 focus:outline-none focus:ring-2 focus:ring-[var(--accent)]/50"
+              className="inline-flex items-center gap-2 rounded-lg border border-[var(--border)] bg-[var(--accent)] px-3 py-2 text-sm font-medium text-[var(--accent-foreground)] transition-all hover:opacity-90 focus:outline-none focus:ring-2 focus:ring-[var(--accent)]/50 active:scale-95"
             >
               <span aria-hidden="true">📲</span>
               <span>Share</span>
diff --git a/src/components/ShortcutsModal.tsx b/src/components/ShortcutsModal.tsx
index 31e01f40..3f2eeef6 100644
--- a/src/components/ShortcutsModal.tsx
+++ b/src/components/ShortcutsModal.tsx
@@ -106,7 +106,7 @@ export default function ShortcutsModal({
           ref={closeBtnRef}
           type="button"
           onClick={onClose}
-          className="rounded-lg p-1 text-[var(--muted-foreground)] transition-colors hover:bg-[var(--control)] hover:text-[var(--card-foreground)] focus:outline-none focus:ring-2 focus:ring-[var(--accent)]"
+          className="rounded-lg p-1 text-[var(--muted-foreground)] transition-all hover:bg-[var(--control)] hover:text-[var(--card-foreground)] focus:outline-none focus:ring-2 focus:ring-[var(--accent)] hover:opacity-90 active:scale-95"
           aria-label="Close shortcuts"
         >
           x
@@ -133,7 +133,7 @@ export default function ShortcutsModal({
         <button
           type="button"
           onClick={onClose}
-          className="rounded-lg bg-[var(--control)] px-4 py-2 text-sm font-medium text-[var(--card-foreground)] transition-colors hover:bg-[var(--accent)] hover:text-[var(--accent-foreground)] focus:outline-none focus:ring-2 focus:ring-[var(--accent)]"
+          className="rounded-lg bg-[var(--control)] px-4 py-2 text-sm font-medium text-[var(--card-foreground)] transition-all hover:bg-[var(--accent)] hover:text-[var(--accent-foreground)] focus:outline-none focus:ring-2 focus:ring-[var(--accent)] hover:opacity-90 active:scale-95"
         >
           Got it
         </button>
diff --git a/src/components/StreakTracker.tsx b/src/components/StreakTracker.tsx
index 76784f66..99b845c7 100644
--- a/src/components/StreakTracker.tsx
+++ b/src/components/StreakTracker.tsx
@@ -256,7 +256,7 @@ export default function StreakTracker() {
 
   if (error) {
     return (
-      <div className="rounded-xl border border-[var(--border)] bg-[var(--card)] p-6 shadow-sm">
+      <div className="rounded-xl border border-[var(--border)] bg-[var(--card)] p-6 shadow-sm transition-all duration-300 hover:shadow-md hover:-translate-y-1">
         <SectionHeader title="Commit Streaks" />
         <div className="rounded-lg border border-[var(--destructive)]/20 bg-[var(--destructive)]/10 p-4 text-sm text-[var(--destructive)]">
           <p>{error}</p>
@@ -277,7 +277,7 @@ export default function StreakTracker() {
     Object.keys(contributionData.data).length === 0
   ) {
     return (
-      <div className="rounded-xl border border-[var(--border)] bg-[var(--card)] p-6 shadow-sm min-h-[420px]">
+      <div className="rounded-xl border border-[var(--border)] bg-[var(--card)] p-6 shadow-sm min-h-[420px] transition-all duration-300 hover:shadow-md hover:-translate-y-1">
         <div className="flex h-full flex-col items-center justify-center text-center">
           <div className="mb-4 text-4xl">📉</div>
 
@@ -432,7 +432,7 @@ export default function StreakTracker() {
             <button
               type="button"
               onClick={handleCopy}
-              className="cursor-pointer flex h-8 items-center justify-center rounded-md px-2 text-sm text-[var(--muted-foreground)] hover:bg-[var(--control)] hover:text-[var(--card-foreground)] focus:outline-none focus:ring-2 focus:ring-[var(--accent)] transition-colors"
+              className="cursor-pointer flex h-8 items-center justify-center rounded-md px-2 text-sm text-[var(--muted-foreground)] hover:bg-[var(--control)] hover:text-[var(--card-foreground)] focus:outline-none focus:ring-2 focus:ring-[var(--accent)] transition-all hover:opacity-90 active:scale-95"
               aria-label="Copy streak stats to clipboard"
             >
               {copied ? (
@@ -445,7 +445,7 @@ export default function StreakTracker() {
               type="button"
               onClick={handleDownload}
               disabled={isDownloading}
-              className="cursor-pointer flex h-8 items-center justify-center rounded-md px-3 py-1.5 text-xs font-medium bg-[var(--accent)] text-[var(--accent-foreground)] hover:opacity-90 disabled:opacity-70 focus:outline-none focus:ring-2 focus:ring-[var(--accent)] transition-colors gap-1.5 shadow-sm"
+              className="cursor-pointer flex h-8 items-center justify-center rounded-md px-3 py-1.5 text-xs font-medium bg-[var(--accent)] text-[var(--accent-foreground)] hover:opacity-90 disabled:opacity-70 focus:outline-none focus:ring-2 focus:ring-[var(--accent)] transition-all gap-1.5 shadow-sm active:scale-95"
               aria-label="Download streak stats as image"
             >
               {isDownloading ? (
@@ -457,7 +457,7 @@ export default function StreakTracker() {
             </button>
           </div>
         )}
-        <div ref={containerRef} className="rounded-xl border border-[var(--border)] bg-[var(--card)] p-6 shadow-sm">
+        <div ref={containerRef} className="rounded-xl border border-[var(--border)] bg-[var(--card)] p-6 shadow-sm transition-all duration-300 hover:shadow-md hover:-translate-y-1">
           <div className="mb-4 flex items-center justify-between">
             <SectionHeader title="Commit Streaks" />
             {data && <div className="h-8 w-24" />}
@@ -518,7 +518,7 @@ export default function StreakTracker() {
         ))}
       </div>
       {monthlyTrend.isValid && (
-        <div className="mt-3 flex items-center justify-between rounded-lg border border-[var(--border)] bg-[var(--card)] px-4 py-2.5 text-xs shadow-sm">
+        <div className="mt-3 flex items-center justify-between rounded-lg border border-[var(--border)] bg-[var(--card)] px-4 py-2.5 text-xs shadow-sm transition-all duration-300 hover:shadow-md hover:-translate-y-1">
           <span className="text-[var(--muted-foreground)]">
             This month: <strong className="font-semibold text-[var(--card-foreground)]">{monthlyTrend.thisMonth} active days</strong>
           </span>
@@ -615,7 +615,7 @@ export default function StreakTracker() {
             <button
               type="button"
               onClick={handleCancelFreeze}
-              className="rounded-md border border-[var(--border)] px-3 py-1 text-xs font-medium text-[var(--muted-foreground)] transition hover:bg-[var(--control)]"
+              className="rounded-md border border-[var(--border)] px-3 py-1 text-xs font-medium text-[var(--muted-foreground)] transition hover:bg-[var(--control)] transition-all duration-200 hover:opacity-90 active:scale-95"
             >
               Cancel freeze
             </button>
@@ -741,14 +741,14 @@ function StreakCalendar({
         <div className="flex gap-2">
           <button
             onClick={handlePrevMonth}
-            className="rounded-md px-2 py-1 hover:bg-[var(--control)] transition-colors text-sm font-medium"
+            className="rounded-md px-2 py-1 hover:bg-[var(--control)] transition-all text-sm font-medium hover:opacity-90 active:scale-95"
             aria-label="Previous month"
           >
             ← Prev
           </button>
           <button
             onClick={handleNextMonth}
-            className="rounded-md px-2 py-1 hover:bg-[var(--control)] transition-colors text-sm font-medium"
+            className="rounded-md px-2 py-1 hover:bg-[var(--control)] transition-all text-sm font-medium hover:opacity-90 active:scale-95"
             aria-label="Next month"
           >
             Next →
diff --git a/src/components/TodayFocusHero.tsx b/src/components/TodayFocusHero.tsx
index a24b332c..0896e8d9 100644
--- a/src/components/TodayFocusHero.tsx
+++ b/src/components/TodayFocusHero.tsx
@@ -108,13 +108,13 @@ export default function TodayFocusHero({ userName }: TodayFocusHeroProps) {
     return (
       <section className="surface-card fade-up relative overflow-hidden rounded-3xl border border-[var(--border)] px-5 py-6 shadow-sm md:px-8 md:py-8">
         <div className="space-y-4">
-          <div className="h-6 w-52 rounded bg-[var(--card-muted)] animate-pulse" />
-          <div className="h-4 w-full max-w-xl rounded bg-[var(--card-muted)] animate-pulse" />
+          <div className="h-6 w-52 rounded skeleton-shimmer" />
+          <div className="h-4 w-full max-w-xl rounded skeleton-shimmer" />
           <div className="grid gap-4 lg:grid-cols-[minmax(0,1fr)_auto] lg:items-end">
-            <div className="h-12 rounded-xl bg-[var(--card-muted)] animate-pulse" />
+            <div className="h-12 rounded-xl skeleton-shimmer" />
             <div className="flex gap-3">
-              <div className="h-12 w-24 rounded-xl bg-[var(--card-muted)] animate-pulse" />
-              <div className="h-12 w-24 rounded-xl bg-[var(--card-muted)] animate-pulse" />
+              <div className="h-12 w-24 rounded-xl skeleton-shimmer" />
+              <div className="h-12 w-24 rounded-xl skeleton-shimmer" />
             </div>
           </div>
         </div>
diff --git a/src/components/TopRepos.tsx b/src/components/TopRepos.tsx
index 162f0491..5889847c 100644
--- a/src/components/TopRepos.tsx
+++ b/src/components/TopRepos.tsx
@@ -80,7 +80,7 @@ const RepoItem = memo(({
         </div>
         <span className="shrink-0 flex items-center gap-2">
           {healthLoading ? (
-            <div className="h-5 w-9 rounded bg-[var(--card-muted)] animate-pulse" />
+            <div className="h-5 w-9 rounded skeleton-shimmer" />
           ) : health ? (
             <button
               type="button"
@@ -392,7 +392,7 @@ export default function TopRepos() {
   }, [repos, sortColumn, sortDirection, pinnedRepos, searchQuery]);
 
   return (
-    <div className="rounded-xl border border-[var(--border)] bg-[var(--card)] p-6 shadow-sm">
+    <div className="rounded-xl border border-[var(--border)] bg-[var(--card)] p-6 shadow-sm transition-all duration-300 hover:shadow-md hover:-translate-y-1">
       <div className="flex items-center justify-between mb-4">
         <div className="flex items-center gap-3">
           <SectionHeader
@@ -426,7 +426,7 @@ export default function TopRepos() {
             <div
               key={i}
               aria-hidden="true"
-              className="h-10 rounded bg-[var(--card-muted)] animate-pulse"
+              className="h-10 rounded skeleton-shimmer"
             />
           ))}
         </div>
@@ -492,7 +492,7 @@ export default function TopRepos() {
             </span>
           </button>
         </div>
-        <ul className="space-y-3">
+        <ul className="space-y-3 stagger-children">
           {filteredRepos.length === 0 ? (
             <p className="text-sm text-[var(--muted-foreground)] py-4 text-center">
               No repos match your search.
diff --git a/src/components/WeeklySummaryCard.tsx b/src/components/WeeklySummaryCard.tsx
index bdeff6e3..d19875a3 100644
--- a/src/components/WeeklySummaryCard.tsx
+++ b/src/components/WeeklySummaryCard.tsx
@@ -57,7 +57,7 @@ export default function WeeklySummaryCard() {
   }, [fetchSummary]);
 
   return (
-    <div className="rounded-xl border border-[var(--border)] bg-[var(--card)] p-6 shadow-sm">
+    <div className="rounded-xl border border-[var(--border)] bg-[var(--card)] p-6 shadow-sm transition-all duration-300 hover:shadow-md hover:-translate-y-1">
       <div className="flex items-center justify-between">
         <h2 className="text-lg font-semibold text-[var(--card-foreground)]">
           This Week
@@ -89,7 +89,7 @@ export default function WeeklySummaryCard() {
               <div
                 key={i}
                 aria-hidden="true"
-                className="h-14 rounded-lg bg-[var(--card-muted)] animate-pulse"
+                className="h-14 rounded-lg skeleton-shimmer"
               />
             ))}
           </div>
@@ -100,7 +100,7 @@ export default function WeeklySummaryCard() {
         ) : summary && summary.commits && summary.prs && summary.activeDays ? (
           <div className="mt-4 space-y-4">
             {/* Commits Comparison */}
-            <div className="rounded-lg bg-[var(--control)] p-4">
+            <div className="rounded-lg bg-[var(--control)] p-4 stat-cell">
               <div className="mb-3 flex items-center justify-between">
                 <span className="text-sm text-[var(--muted-foreground)]">
                   Commits
@@ -126,7 +126,7 @@ export default function WeeklySummaryCard() {
                   <div className="flex-1">
                     <div className="h-2 rounded bg-[var(--border)] overflow-hidden">
                       <div
-                        className="h-full bg-[var(--muted-foreground)]"
+                        className="h-full bg-[var(--muted-foreground)] progress-fill"
                         style={{
                           width: `${((summary.commits.previous / maxCommits) * 100).toFixed(0)}%`,
                         }}
@@ -142,7 +142,7 @@ export default function WeeklySummaryCard() {
                   <div className="flex-1">
                     <div className="h-2 rounded bg-[var(--border)] overflow-hidden">
                       <div
-                        className="h-full bg-[var(--success)]"
+                        className="h-full bg-[var(--success)] progress-fill"
                         style={{
                           width: `${((summary.commits.current / maxCommits) * 100).toFixed(0)}%`,
                         }}
@@ -157,7 +157,7 @@ export default function WeeklySummaryCard() {
             </div>
 
             {/* PRs Comparison */}
-            <div className="rounded-lg bg-[var(--control)] p-4">
+            <div className="rounded-lg bg-[var(--control)] p-4 stat-cell">
               <div className="mb-3 flex items-center justify-between">
                 <span className="text-sm text-[var(--muted-foreground)]">PRs Merged</span>
                 <span className="text-base font-semibold text-[var(--card-foreground)]">
@@ -201,7 +201,7 @@ export default function WeeklySummaryCard() {
             </div>
 
             {/* Active Days Comparison */}
-            <div className="rounded-lg bg-[var(--control)] p-4">
+            <div className="rounded-lg bg-[var(--control)] p-4 stat-cell">
               <div className="mb-3 flex items-center justify-between">
                 <span className="text-sm text-[var(--muted-foreground)]">Active Days</span>
                 <span className="text-base font-semibold text-[var(--card-foreground)]">
@@ -246,13 +246,13 @@ export default function WeeklySummaryCard() {
 
             {/* Streak & Top Repo */}
             <div className="space-y-3">
-              <div className="flex items-center justify-between rounded-lg bg-[var(--control)] p-4">
+              <div className="flex items-center justify-between rounded-lg bg-[var(--control)] p-4 stat-cell">
                 <span className="text-sm text-[var(--muted-foreground)]">Streak</span>
                 <span className="text-base font-semibold text-[var(--card-foreground)]">
                   {summary.streak} day streak
                 </span>
               </div>
-              <div className="flex items-center justify-between rounded-lg bg-[var(--control)] p-4">
+              <div className="flex items-center justify-between rounded-lg bg-[var(--control)] p-4 stat-cell">
                 <span className="text-sm text-[var(--muted-foreground)]">Top repo</span>
                 <span className="text-base font-semibold text-[var(--card-foreground)]">
                   {summary.topRepo ?? "-"}
diff --git a/src/components/WidgetErrorBoundary.tsx b/src/components/WidgetErrorBoundary.tsx
index 66c3e7ef..3a4301eb 100644
--- a/src/components/WidgetErrorBoundary.tsx
+++ b/src/components/WidgetErrorBoundary.tsx
@@ -49,7 +49,7 @@ class WidgetErrorBoundary extends React.Component<Props, State> {
 
           <button
             onClick={this.handleRetry}
-            className="rounded-lg bg-[var(--accent)] px-4 py-2 text-[var(--accent-foreground)] transition hover:opacity-80"
+            className="rounded-lg bg-[var(--accent)] px-4 py-2 text-[var(--accent-foreground)] transition hover:opacity-80 transition-all duration-200 hover:opacity-90 active:scale-95"
           >
             Retry
           </button>
diff --git a/src/components/repo-analytics/RepoAnalyticsExplorer.tsx b/src/components/repo-analytics/RepoAnalyticsExplorer.tsx
index 0c86c8b5..cec7face 100644
--- a/src/components/repo-analytics/RepoAnalyticsExplorer.tsx
+++ b/src/components/repo-analytics/RepoAnalyticsExplorer.tsx
@@ -33,7 +33,7 @@ export default function RepoAnalyticsExplorer() {
   }, [fetchRepos]);
 
   return (
-    <section className="mt-6 min-w-0 overflow-hidden rounded-2xl border border-[var(--border)] bg-[var(--card)] p-4 shadow-sm md:p-6 fade-up">
+    <section className="mt-6 min-w-0 overflow-hidden rounded-2xl border border-[var(--border)] bg-[var(--card)] p-4 shadow-sm md:p-6 fade-up transition-all duration-300 hover:shadow-md hover:-translate-y-1">
       <div className="mb-6 flex items-center justify-between gap-3">
         <div>
           <h2 className="text-xl font-bold tracking-tight text-[var(--card-foreground)]">Repo Analytics</h2>
diff --git a/src/components/repo-analytics/RepoCard.tsx b/src/components/repo-analytics/RepoCard.tsx
index cdd21464..c185c1f7 100644
--- a/src/components/repo-analytics/RepoCard.tsx
+++ b/src/components/repo-analytics/RepoCard.tsx
@@ -31,7 +31,7 @@ export default function RepoCard({
 
   return (
     <article
-      className="relative overflow-hidden rounded-3xl border border-[var(--border)] bg-[var(--card)] p-5 shadow-sm backdrop-blur-xl animate-slide-up"
+      className="relative overflow-hidden rounded-3xl border border-[var(--border)] bg-[var(--card)] p-5 shadow-sm backdrop-blur-xl animate-slide-up transition-all duration-300 hover:shadow-md hover:-translate-y-1"
     >
       {/* Border Glow */}
       <div className="pointer-events-none absolute inset-0 rounded-3xl ring-1 ring-[var(--border)]" />
diff --git a/src/components/repo-analytics/RepoCarousel.tsx b/src/components/repo-analytics/RepoCarousel.tsx
index 07dde6eb..b21e6013 100644
--- a/src/components/repo-analytics/RepoCarousel.tsx
+++ b/src/components/repo-analytics/RepoCarousel.tsx
@@ -97,7 +97,7 @@ export default function RepoCarousel({ repos }: { repos: ExplorerRepoCardData[]
       {/* Cards View */}
       {filteredRepos.length === 0 ? (
         <div className="flex flex-col items-center justify-center rounded-3xl border border-dashed border-[var(--border)] bg-[var(--card-muted)]/20 p-16 text-center fade-up mt-4">
-          <div className="rounded-full bg-[var(--card)] p-4 shadow-sm mb-4 border border-[var(--border)]">
+          <div className="rounded-full bg-[var(--card)] p-4 shadow-sm mb-4 border border-[var(--border)] transition-all duration-300 hover:shadow-md hover:-translate-y-1">
             <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" className="text-[var(--muted-foreground)]">
               <path d="M21 12c0 1.2-4 6-9 6s-9-4.8-9-6c0-1.2 4-6 9-6s9 4.8 9 6Z" />
               <circle cx="12" cy="12" r="3" />
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 4557ee03..20578aae 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -8,7 +8,27 @@ const config: Config = {
     "./src/app/**/*.{js,ts,jsx,tsx,mdx}",
   ],
   theme: {
-    extend: {},
+    extend: {
+      keyframes: {
+        "fade-in-up": {
+          "0%": { opacity: "0", transform: "translateY(12px)" },
+          "100%": { opacity: "1", transform: "translateY(0)" },
+        },
+        "scale-in": {
+          "0%": { opacity: "0", transform: "scale(0.95)" },
+          "100%": { opacity: "1", transform: "scale(1)" },
+        },
+        shimmer: {
+          "0%": { backgroundPosition: "-200% 0" },
+          "100%": { backgroundPosition: "200% 0" },
+        },
+      },
+      animation: {
+        "fade-in-up": "fade-in-up 0.4s ease-out both",
+        "scale-in": "scale-in 0.3s ease-out both",
+        shimmer: "shimmer 1.8s ease-in-out infinite",
+      },
+    },
   },
   plugins: [
     require("tailwind-scrollbar")({ nocompatible: true }),