Add visual polish and micro-interactions for editorial feel

Phase 1 - Critical Fixes:
- EmptyState: warm palette, coral button, Playfair Display title
- Pagination: design system colors, coral active state
- LoadingSkeleton: warm shimmer with coral tint

Phase 2 - Signature Patterns:
- Navigation: sliding underline hover effect on links
- globals.css: increased noise texture opacity for paper feel
- RankingsView: alternating row backgrounds
- HomeView: decorative coral bar under section headings

Phase 3 - Polish:
- SchoolCard: SVG trend icons replacing unicode arrows
- RankingsView: styled metallic rank badges replacing emoji medals

Phase 4 - Micro-interactions:
- Navigation badge: pop animation when count changes
- HomeView grid: staggered entry animation for cards

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

nextjs-app/components/Pagination.module.css

@@ -8,7 +8,7 @@
 
 .info {
   font-size: 0.875rem;
-  color: #6b7280;
+  color: var(--text-muted, #8a847a);
 }
 
 .controls {
@@ -21,17 +21,18 @@
   padding: 0.5rem 1rem;
   font-size: 0.875rem;
   font-weight: 500;
-  background: white;
-  color: #374151;
-  border: 1px solid #d1d5db;
-  border-radius: 6px;
+  background: var(--bg-card, white);
+  color: var(--text-secondary, #5c564d);
+  border: 1px solid var(--border-color, #e5dfd5);
+  border-radius: 8px;
   cursor: pointer;
   transition: all 0.2s ease;
 }
 
 .navButton:hover:not(:disabled) {
-  background: #f9fafb;
-  border-color: #9ca3af;
+  background: var(--bg-secondary, #f3ede4);
+  border-color: var(--accent-coral, #e07256);
+  color: var(--text-primary, #1a1612);
 }
 
 .navButton:disabled {
@@ -50,26 +51,32 @@
   padding: 0.5rem 0.75rem;
   font-size: 0.875rem;
   font-weight: 500;
-  background: white;
-  border: 1px solid #d1d5db;
-  border-radius: 6px;
+  background: var(--bg-card, white);
+  border: 1px solid var(--border-color, #e5dfd5);
+  border-radius: 8px;
   cursor: pointer;
   transition: all 0.2s ease;
 }
 
 .pageButton {
-  color: #374151;
+  color: var(--text-secondary, #5c564d);
 }
 
 .pageButton:hover {
-  background: #f9fafb;
-  border-color: #9ca3af;
+  background: var(--bg-secondary, #f3ede4);
+  border-color: var(--accent-coral, #e07256);
+  color: var(--text-primary, #1a1612);
 }
 
 .pageButtonActive {
-  background: #3b82f6;
+  background: var(--accent-coral, #e07256);
   color: white;
-  border-color: #3b82f6;
+  border-color: var(--accent-coral, #e07256);
+}
+
+.pageButtonActive:hover {
+  background: var(--accent-coral-dark, #c45a3f);
+  border-color: var(--accent-coral-dark, #c45a3f);
 }
 
 .ellipsis {
@@ -77,7 +84,7 @@
   align-items: center;
   padding: 0.5rem 0.75rem;
   font-size: 0.875rem;
-  color: #9ca3af;
+  color: var(--text-muted, #8a847a);
 }
 
 @media (max-width: 640px) {