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/SchoolCard.tsx

@@ -55,11 +55,30 @@ export function SchoolCard({ school, onAddToCompare, showDistance, distance }: S
                 <strong>{formatPercentage(school.rwm_expected_pct)}</strong>
                 {school.prev_rwm_expected_pct !== null && (
                   <span
-                    className={styles.trend}
-                    style={{ color: trendColor }}
+                    className={`${styles.trend} ${styles[`trend${trend.charAt(0).toUpperCase() + trend.slice(1)}`]}`}
                     title={`Previous: ${formatPercentage(school.prev_rwm_expected_pct)}`}
                   >
-                    {trend === 'up' ? '↑' : trend === 'down' ? '↓' : '→'}
+                    {trend === 'up' && (
+                      <svg viewBox="0 0 16 16" fill="none" className={styles.trendIcon}>
+                        <path
+                          d="M8 3L14 10H2L8 3Z"
+                          fill="currentColor"
+                        />
+                      </svg>
+                    )}
+                    {trend === 'down' && (
+                      <svg viewBox="0 0 16 16" fill="none" className={styles.trendIcon}>
+                        <path
+                          d="M8 13L2 6H14L8 13Z"
+                          fill="currentColor"
+                        />
+                      </svg>
+                    )}
+                    {trend === 'stable' && (
+                      <svg viewBox="0 0 16 16" fill="none" className={styles.trendIcon}>
+                        <rect x="2" y="7" width="12" height="2" rx="1" fill="currentColor" />
+                      </svg>
+                    )}
                   </span>
                 )}
               </div>