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

@@ -188,14 +188,13 @@ export function RankingsView({
                       className={isTopThree ? styles[`rank${rank}`] : ''}
                     >
                       <td className={styles.rankCell}>
-                        {isTopThree && (
-                          <span className={styles.medal}>
-                            {rank === 1 && '🥇'}
-                            {rank === 2 && '🥈'}
-                            {rank === 3 && '🥉'}
+                        {isTopThree ? (
+                          <span className={`${styles.rankBadge} ${styles[`rankBadge${rank}`]}`}>
+                            {rank}
                           </span>
+                        ) : (
+                          <span className={styles.rankNumber}>{rank}</span>
                         )}
-                        <span className={styles.rankNumber}>{rank}</span>
                       </td>
                       <td className={styles.schoolCell}>
                         <a href={`/school/${ranking.urn}`} className={styles.schoolLink}>