Celebrate every 10th dispatched train with milestone animation

src/App.css

@@ -138,9 +138,85 @@ main {
   z-index: 10;
 }
 
+.milestone {
+  position: fixed;
+  inset: 0;
+  pointer-events: none;
+  z-index: 20;
+  overflow: hidden;
+}
+
+.milestone-banner {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  text-align: center;
+  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  animation: milestone-pop 2200ms cubic-bezier(0.18, 0.89, 0.32, 1.28) forwards;
+}
+
+.milestone-count {
+  font-size: clamp(96px, 22vw, 220px);
+  font-weight: 800;
+  line-height: 1;
+  background: linear-gradient(135deg, #ff6b6b, #f7b733, #4cd964, #5ac8fa, #af52de);
+  background-size: 300% 300%;
+  -webkit-background-clip: text;
+  background-clip: text;
+  color: transparent;
+  letter-spacing: -0.04em;
+  animation: milestone-shimmer 1800ms linear infinite;
+  filter: drop-shadow(0 6px 20px rgba(0, 0, 0, 0.12));
+}
+
+.milestone-label {
+  margin-top: 8px;
+  font-size: clamp(14px, 2vw, 20px);
+  color: #444;
+  letter-spacing: 0.18em;
+  text-transform: uppercase;
+}
+
+@keyframes milestone-pop {
+  0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.4) rotate(-6deg); }
+  18%  { opacity: 1; transform: translate(-50%, -50%) scale(1.12) rotate(2deg); }
+  35%  { transform: translate(-50%, -50%) scale(0.96) rotate(-1deg); }
+  55%  { transform: translate(-50%, -50%) scale(1.02) rotate(0); }
+  80%  { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(0); }
+  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.08) rotate(0); }
+}
+
+@keyframes milestone-shimmer {
+  0%   { background-position: 0% 50%; }
+  100% { background-position: 300% 50%; }
+}
+
+.milestone-sparkle {
+  position: absolute;
+  bottom: -10vh;
+  font-size: clamp(24px, 3.4vw, 40px);
+  animation: sparkle-rise 2100ms ease-out forwards;
+  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.15));
+}
+
+@keyframes sparkle-rise {
+  0%   { transform: translateY(0) rotate(0); opacity: 0; }
+  15%  { opacity: 1; }
+  100% { transform: translateY(-115vh) rotate(540deg); opacity: 0; }
+}
+
 @media (prefers-reduced-motion: reduce) {
   .train-emoji:hover { animation: none; }
   .steam { display: none; }
+  .milestone-sparkle { display: none; }
+  .milestone-banner { animation: milestone-fade 2200ms ease both; }
+  .milestone-count { animation: none; }
+
+  @keyframes milestone-fade {
+    0%, 100% { opacity: 0; }
+    20%, 80% { opacity: 1; }
+  }
 
   .train.ltr,
   .train.rtl {

src/App.tsx

@@ -19,13 +19,24 @@ type Puff = {
   char: string
 }
 
+type Sparkle = {
+  id: number
+  left: number
+  delay: number
+  char: string
+}
+
 const TRAIN_EMOJIS = ['🚂', '🚃', '🚅', '🚋', '🚄']
 const PUFF_CHARS = ['·', '°', '・', '∘']
+const SPARKLE_CHARS = ['✨', '🎉', '🎊', '⭐', '🌟', '💫']
 const LANE_COUNT = 5
 const DISPATCH_THROTTLE_MS = 120
 const PUFF_COUNT = 4
 const MIN_DURATION_MS = 4500
 const MAX_DURATION_MS = 7500
+const MILESTONE_INTERVAL = 10
+const MILESTONE_DURATION_MS = 2200
+const SPARKLE_COUNT = 18
 
 function pick<T>(arr: readonly T[]): T {
   return arr[Math.floor(Math.random() * arr.length)]
@@ -40,8 +51,10 @@ function App() {
     return localStorage.getItem('wtc:muted') === '1'
   })
   const [hasDispatched, setHasDispatched] = useState(false)
+  const [milestone, setMilestone] = useState<{ count: number; sparkles: Sparkle[] } | null>(null)
 
   const nextIdRef = useRef(1)
+  const milestoneTimerRef = useRef<number | null>(null)
   const lastDispatchRef = useRef(0)
   const lastLaneRef = useRef(-1)
   const lastDirRef = useRef<Direction>('rtl')
@@ -107,7 +120,26 @@ function App() {
     }
 
     setTrains((prev) => [...prev, train])
-    setCount((c) => c + 1)
+    setCount((c) => {
+      const next = c + 1
+      if (next % MILESTONE_INTERVAL === 0) {
+        const sparkles: Sparkle[] = Array.from({ length: SPARKLE_COUNT }, () => ({
+          id: nextIdRef.current++,
+          left: Math.random() * 100,
+          delay: Math.random() * 400,
+          char: pick(SPARKLE_CHARS),
+        }))
+        setMilestone({ count: next, sparkles })
+        if (milestoneTimerRef.current !== null) {
+          window.clearTimeout(milestoneTimerRef.current)
+        }
+        milestoneTimerRef.current = window.setTimeout(() => {
+          setMilestone(null)
+          milestoneTimerRef.current = null
+        }, MILESTONE_DURATION_MS)
+      }
+      return next
+    })
     setHasDispatched(true)
     playChoo()
 
@@ -187,6 +219,24 @@ function App() {
       <div className="counter" aria-live="polite">
         {count} {count === 1 ? 'train' : 'trains'} dispatched
       </div>
+
+      {milestone && (
+        <div className="milestone" role="status" aria-live="polite">
+          {milestone.sparkles.map((s) => (
+            <span
+              key={s.id}
+              className="milestone-sparkle"
+              style={{ left: `${s.left}vw`, animationDelay: `${s.delay}ms` }}
+            >
+              {s.char}
+            </span>
+          ))}
+          <div className="milestone-banner">
+            <div className="milestone-count">{milestone.count}</div>
+            <div className="milestone-label">trains dispatched!</div>
+          </div>
+        </div>
+      )}
     </main>
   )
 }