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/RankingsView.module.css

@@ -143,6 +143,11 @@
   border-bottom: none;
 }
 
+/* Alternating row backgrounds for visual rhythm */
+.rankingsTable tbody tr:nth-child(even) {
+  background: rgba(243, 237, 228, 0.5);
+}
+
 .rankingsTable tbody tr:hover {
   background: var(--bg-secondary, #f3ede4);
 }
@@ -168,14 +173,51 @@
   color: var(--text-primary, #1a1612);
 }
 
-.medal {
-  font-size: 1.5rem;
-  line-height: 1;
+/* Styled rank badges for top 3 */
+.rankBadge {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 36px;
+  height: 36px;
+  border-radius: 50%;
+  font-size: 1rem;
+  font-weight: 700;
+  color: white;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+  position: relative;
+}
+
+.rankBadge::before {
+  content: '';
+  position: absolute;
+  inset: -2px;
+  border-radius: 50%;
+  border: 2px solid transparent;
+  background: linear-gradient(135deg, rgba(255, 255, 255, 0.4), transparent) border-box;
+  mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
+  mask-composite: exclude;
+  -webkit-mask-composite: xor;
+}
+
+.rankBadge1 {
+  background: linear-gradient(135deg, #c9a227 0%, #e8c547 50%, #c9a227 100%);
+  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
+}
+
+.rankBadge2 {
+  background: linear-gradient(135deg, #8c8c8c 0%, #c0c0c0 50%, #8c8c8c 100%);
+  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
+}
+
+.rankBadge3 {
+  background: linear-gradient(135deg, #a5673f 0%, #cd7f32 50%, #a5673f 100%);
+  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
 }
 
 .rankNumber {
   font-size: 1rem;
-  color: var(--accent-gold, #c9a227);
+  color: var(--text-secondary, #5c564d);
 }
 
 .schoolCell {
@@ -280,8 +322,10 @@
     padding: 0.75rem 0.5rem;
   }
 
-  .medal {
-    font-size: 1.25rem;
+  .rankBadge {
+    width: 30px;
+    height: 30px;
+    font-size: 0.875rem;
   }
 
   .schoolHeader {