Add water ripple behind coin after flip lands

[brianruggieri]

Summary

Recreates the classic expanding-ring water ripple (à la codepen.io/magnificode/pen/pbeJmV) behind the profile coin: ~700ms after a flip settles, three concentric rings spread out from under the coin across the blue sidebar and fade to nothing, clipped at the sidebar edge — as if the coin landed on water.

• Markup: one aria-hidden .coin-ripple container with 3 spans inside #profileCoin (desktop-only wrapper, so mobile is untouched)
• CSS (themes/resume/static/css/resume.css): rings animate transform: scale(1 → 4.75) + opacity fade only (compositor-friendly, no layout/paint), 2.4s ease-out, 200ms stagger; first ring is a white "impact crest", the rest use the design-system --cyan. Rings paint at z-index: 3 because the coin faces' ::before drop shadow buries anything beneath them; starting at scale(1) hides the ring under the coin's dark rim so it still reads as emerging from behind. Desktop #sideNav gets overflow: hidden so rings die at the blue edge and never touch the content column.
• JS (coin-flip.js): fireRipple() fires 700ms after each flip (auto and click), restart-safe via reflow trick; skipped entirely under reduced motion (JS guard + CSS prefers-reduced-motion kill switch).
• Cache-busters bumped: resume.css?v=2, coin-flip.js?v=2.

Test plan

• npm test — all suites pass (canvas perf/reflow guard, achievements, experiments wall)
• Playwright drive: flip → .is-rippling applied, rings animate (verified computed opacity/transform mid-flight), 0 console errors over a natural auto-flip cycle
• Screenshot review at early/mid animation: rings visible, clipped at sidebar edge, no spill onto content
• Reduced motion: JS guard + animation: none media query