Achievement unlock: rocket animation, screen-wide fireworks, click-to-toggle tooltips

[Copilot]

Follow-up to PRs #22–24. Implements the Genesis Pioneer unlock experience and fixes the achievement tooltip interaction bug.

Changes

🚀 Rocket launch animation

• On Begin click (post–trade dialog), a 🚀 element is created at the button's viewport position via getBoundingClientRect()
• A unique @keyframes rule is injected at runtime with 5 dynamically computed waypoints arcing upward then landing on the Genesis Pioneer card
• Cyan + gold drop-shadow filter creates the trail glow; 1.1s cubic-bezier(.4,0,.2,1) flight

var kfName = 'rocketFly_' + Date.now();
// keyframe translate endpoints computed from live DOM rects
rocket.style.animation = kfName + ' 1.1s cubic-bezier(.4,0,.2,1) forwards';
rocket.addEventListener('animationend', function() { /* unlock + fireworks */ });

🎆 Fireworks burst

• 16 CSS particle <div>s injected at the card center, spread every 22.5° at 260–300px radius — goes well beyond card bounds across the full viewport
• Colors: gold, amber, #2dd4bf (FERROS accent), white, orange; sizes 5–8px with box-shadow glow
• animation-delay staggered 50ms per particle; container self-removes after 2.3s
• +25 SP float fires 800ms post-landing (after fireworks peak); stage progression begins 1.6s post-landing

🖱️ Hover tooltip → click-to-toggle

• Removed :hover .ach-hover-diagram CSS rule; replaced with .ach-active class toggled by JS
• Click card: opens tooltip (persists). Click card again or anywhere outside: closes. Clicks inside the diagram are swallowed so the "🔎 Browse Profiles ↓" button stays clickable

Sequencing

• triggerGenesisPioneer() removed from init() — unlock is now gated on the rocket animationend event
• completeStage0() restructured: trade dialog (if needed) → disable button → rocket → _doCompleteStage0(). Stage flow 0→1→2→3 is untouched.

Screenshots

Stage 0 with click-to-toggle tooltip open:

Rocket mid-flight (🚀 visible in DOM), Begin button disabled, trade dialog accepted:

Original prompt

Context

This is a follow-up animation PR for docs/personal-profile.html. A separate PR is fixing the Begin button blocker and adding the boot animation. THIS PR focuses specifically on the achievement unlock experience after the user clicks Begin.

CRITICAL: Read docs/AGENT_GUIDE.md before touching any code. All architecture constraints are binding. Key rules:

• file:// protocol compatibility is mandatory — no external dependencies, no fetch(), no ES modules, no CDN links
• saveProfile() is the ONLY localStorage write point — do not bypass
• Do not restructure the stage flow (0→1→2→3) — it is load-bearing
• Do not modify hashData() or remove the djb2 fallback
• The file is a single self-contained HTML file with all CSS/JS embedded

Read the ADRs in docs/adr/ — they are binding.

Changes Required

1. Rocket Emoji Achievement Animation

When the Begin button is clicked (or immediately after the boot sequence completes and achievements become visible):

• A 🚀 rocket emoji appears near the Begin button
• The rocket launches upward, then curves in a circular arc (like an orbit/loop), and lands back down onto the first achievement card ("Genesis Pioneer")
• Use CSS @keyframes with offset-path (CSS Motion Path) or manual transform: translate() keyframes to create the circular trajectory
• The rocket should leave a subtle trail/glow behind it as it moves
• When the rocket lands on the achievement card, it triggers the unlock animation

2. Achievement Unlock Animation Enhancement

When the rocket lands on the Genesis Pioneer card:

• The existing gold shimmer/glow from PR PR 2/3: Hero experience — android companion, begin button pulse, achievement unlock animations #23 plays
• ADDITIONALLY: A fireworks burst emanates from the achievement card
• The fireworks should spread across the entire screen — not just the card
• Use CSS-only fireworks: multiple small colored dots (pseudo-elements or small divs) that explode outward from the card's position using @keyframes with random-ish directions and fade-out
• Colors: gold, amber, white, with some cyan/teal FERROS accent colors
• The "+25 SP" float-up text should appear AFTER the fireworks peak
• Duration: fireworks last ~2 seconds, then fade

3. Fireworks Implementation (CSS-only)

Create a reusable fireworks effect:

• 12-16 "particle" elements (can be spans or small divs) positioned absolutely over the achievement card
• Each particle gets a different @keyframes animation with different translate() endpoints (spread pattern)
• Particles start at the center of the achievement card and fly outward in a starburst pattern
• Each particle fades from full opacity to 0 over the animation
• Stagger the particles slightly with animation-delay for a natural feel
• The particles should go BEYOND the card boundaries — they fly across the whole screen area
• After the animation completes, the particle elements get display: none or are removed

4. Achievement Hover Fix (if not already fixed in the other PR)

The achievement hover tooltips from PR #23 disappear before the user can click buttons inside them. If the boot animation PR doesn't fix this:

• Change from pure CSS :hover to a click-to-toggle pattern
• Click achievement card → tooltip/flowchart stays visible
• Click again or click elsewhere → tooltip closes
• The "Discover Profiles" button inside the Discover Profiles achievement tooltip must remain clickable
• This is more mobile-friendly too

Implementation Notes

• All CSS and JS inline in the single HTML file
• CSS Motion Path (offset-path: path(...)) works on file:// protocol in modern browsers — BUT provide a fallback using transform keyframes in case it doesn't work
• The rocket animation should be triggered via JS (add a class to start the animation sequence)
• No external dependencies
• The fireworks are a one-time animation on first visit / first unlock — not a loop
• Keep the DOM additions minimal — reuse elements where possible

What NOT to do

• Do not modify the boot animation sequence (that's the other PR)
• Do not modify hashData(), saveProfile(), or the seal chain
• Do not add external dependencies
• Do not bypass the Trade Window or stage flow
• Do not use fetch(), ES modules, or service workers

The following is the prior conversation context from the user's chat exploration (may be truncated):

Assistant: This is a massive vision document you've laid out. I've reviewed the full personal-profile.html (163KB, ~2000 lines), the repo structure, and the README. Let me break down what you're asking into concrete, actionable work and create a PR that tackles the implementable front-end changes for the genesis/homepage experience. Here's my understanding of the 7 points mapped to what can ship now:

What this PR will implement:

1. Fix FERROS acronym — Change "Federated Experiential Resilience & Operational System" → "Foundational Embedded Rust Runtime Operating System" in the banner
2. Animated android onboarding assistant — A CSS-animated litt...

This pull request was created from Copilot chat.

---

📱 Kick off Copilot coding agent tasks wherever you are with GitHub Mobile, available on iOS and Android.