From 7d919979cc4558f3054b3c802a9d1c29afe35b30 Mon Sep 17 00:00:00 2001
From: fahed <fahed@softhouse.io>
Date: Wed, 25 Mar 2026 18:30:21 +0300
Subject: [PATCH] Delight: Add micro-interactions and entrance animations

- Stat cards lift on hover (translateY -2px + shadow elevation)
- Metric cards lift on hover
- Chart cards fade-up with staggered delays on mount
- All animations respect prefers-reduced-motion (already in place)

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 src/App.css | 22 ++++++++++++++++++++++
 1 file changed, 22 insertions(+)

diff --git a/src/App.css b/src/App.css
index 49fa02f..529aec0 100644
--- a/src/App.css
+++ b/src/App.css
@@ -509,6 +509,12 @@ html[dir="rtl"] .nav-lang-toggle {
   border-radius: var(--radius);
   border: 1px solid var(--border);
   box-shadow: var(--shadow-sm);
+  transition: transform 0.2s ease, box-shadow 0.2s ease;
+}
+
+.stat-card:hover {
+  transform: translateY(-2px);
+  box-shadow: var(--shadow);
 }
 
 .stat-card h3 {
@@ -544,14 +550,24 @@ html[dir="rtl"] .nav-lang-toggle {
   margin-bottom: 32px;
 }
 
+@keyframes fadeUp {
+  from { opacity: 0; transform: translateY(8px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
 .chart-card {
   background: var(--surface);
   padding: 24px;
   border-radius: var(--radius);
   border: 1px solid var(--border);
   position: relative;
+  animation: fadeUp 0.4s ease-out both;
 }
 
+.chart-card:nth-child(2) { animation-delay: 0.05s; }
+.chart-card:nth-child(3) { animation-delay: 0.1s; }
+.chart-card:nth-child(4) { animation-delay: 0.15s; }
+
 .toggle-corner {
   position: absolute;
   top: 20px;
@@ -835,6 +851,12 @@ table tbody tr:hover {
   border-radius: var(--radius);
   border: 1px solid var(--border);
   box-shadow: var(--shadow-sm);
+  transition: transform 0.2s ease, box-shadow 0.2s ease;
+}
+
+.metric-card:hover {
+  transform: translateY(-2px);
+  box-shadow: var(--shadow);
 }
 
 .metric-card h4 {