Airdrop: replace milestone cards with MCap chart + milestone markers

[realproject7]

Problem

The current 4 milestone cards ($1M/$10M/$50M/$100M) are static and don't show progress visually. Need a chart that shows the MCap journey from 0 → $100M with milestone markers, similar to the ETH supply projection chart style.

Solution

Replace the milestone cards with an SVG area chart showing current MCap progress toward the $100M goal.

Desktop wireframe

```
┌──────────────────────────────────────────────────────┐
│ │
│ $100M ─────────────────────────────────────────┤ │
│ │ │ │ │ │
│ │ $1M │ $10M │ $50M │$100M│
│ │ unlocks │ unlocks │ unlocks │ 100%│
│ │ 10% │ 30% │ 50% │ │
│ │ ≈#1900 │ ≈#950 │ ≈#400 │#250 │
│ │ │ │ │ │
│ ████████████████████▓░░░░░░░░░░░░░░░░░░░░░░░░░│ │
│ ████████████████████▓░░░░░░░░░░░░░░░░░░░░░░░░░│ │
│ ████████████████████● ← Current MCap │ │
│ ████████████████████▓░░░░░░░░░░░░░░░░░░░░░░░░░│ │
│ 0 ─────────────────────────────────────────────┘ │
│ │
│ ● = heartbeat animated dot │
└──────────────────────────────────────────────────────┘
```

Chart details

1. Linear X-axis: $0 → $100M

• X-axis represents MCap from 0 to $100M (the Diamond/final goal)
• Linear scale (not log) — keeps it simple and intuitive

2. Area fill below current MCap line

• Filled area from 0 up to the current MCap value
• Accent color gradient fill (matching site's green accent)
• The "line" is just the top edge of the filled area

3. Heartbeat animated dot

• Pulsing dot at the current MCap position on the line
• CSS animation (pulse/ping) — same heartbeat style as original chart had

4. Vertical milestone markers (desktop)

• 4 vertical dashed lines at $1M, $10M, $50M, $100M positions
• Each marker labeled at the top with:
  • MCap value ($1M)
  • "unlocks X%"
  • CMC rank (≈ #1900)
• Like the ETH chart's "genesis", "byzantium", etc. labels at the top of each vertical line

5. Y-axis

• Simple: just show $0 at bottom and $100M at top
• Or hide Y-axis entirely since the X-axis IS the MCap scale
• Actually, since it's a simple area fill: the chart height represents the MCap value, X-axis is just the scale from 0 to 100M

Clarification on chart structure:

• This is essentially a gauge/progress visualization, not a time-series chart
• X-axis = MCap scale ($0 → $100M)
• The filled area shows "how far we've come"
• Vertical lines mark where each milestone sits on this scale

Mobile wireframe

On mobile, milestone labels don't fit above the chart. Use the ETH chart's mobile pattern: letters on the chart, legend below.

```
┌──────────────────────────┐
│ │
│ A B C D │ ← letter markers on chart
│ ████▓░░░░░░░░░░░░░░░░░░ │
│ ████● ← current │
│ ████▓░░░░░░░░░░░░░░░░░░ │
│ 0 $50M $100M │
│ │
│ A $1M B $10M │ ← legend grid below
│ unlocks 10% unlocks│
│ ≈ #1900 30% │
│ ≈ #950 │
│ C $50M D $100M │
│ unlocks 50% unlocks│
│ ≈ #400 100% │
│ ≈ #250 │
└──────────────────────────┘
```

Font sizing

Previous milestone cards had text that was too small on mobile. Ensure:

• MCap values: at least `text-sm` (14px)
• Unlock %: at least `text-sm` (14px) and bold
• CMC rank: `text-xs` (12px) is fine (secondary info)
• Letter markers on mobile chart: `text-xs` bold

Data source

• Current MCap from `/api/airdrop/status` → `currentFdv`
• Milestone values from the hardcoded `MILESTONE_CARDS` array (prod values)

Files

• `src/components/airdrop/CampaignHero.tsx` — replace milestone cards grid with new chart component

Acceptance Criteria

• SVG area chart with linear scale 0 → $100M
• Filled area up to current MCap with accent gradient
• Heartbeat animated dot at current position
• 4 vertical milestone markers with MCap, unlock %, CMC rank labels
• Desktop: labels inline on chart (above vertical lines)
• Mobile: letter markers (A/B/C/D) on chart + legend grid below
• Font sizes readable on mobile (min 14px for key values)
• Responsive — chart scales to container width