LeaderboardStyles.tsx keyframes are never mounted, silently disabling podium/hero animations

[Jagadeeshftw]

Description

src/features/leaderboard/components/LeaderboardStyles.tsx defines a <style> block with the @keyframes for animate-twinkle-slow, animate-glow-pulse, animate-glow-pulse-delayed, animate-float, animate-float-delayed, and animate-float-slow:

export function LeaderboardStyles() {
  return (
    <style>{`
      @keyframes twinkle-slow { ... }
      .animate-twinkle-slow { animation: twinkle-slow 4s infinite; }
      @keyframes glow-pulse { ... }
      .animate-glow-pulse { animation: glow-pulse 4s ease-in-out infinite; }
      ...

A repo-wide search shows LeaderboardStyles is never imported anywhere — not in src/features/leaderboard/pages/LeaderboardPage.tsx (which imports FallingPetals, LeaderboardTypeToggle, LeaderboardHero, ContributorsPodium, ProjectsPodium, FiltersSection, ContributorsTable, ProjectsTable, but not LeaderboardStyles), nor anywhere else. Meanwhile these exact class names ARE used by other leaderboard components that assume the keyframes exist:

• ContributorsPodium.tsx:107 and ProjectsPodium.tsx:142: <Crown className="... animate-float" />
• LeaderboardHero.tsx (lines 37-74): multiple elements conditionally add animate-glow-pulse, animate-glow-pulse-delayed, animate-twinkle-slow, animate-float, animate-float-delayed, animate-float-slow classes guarded by a reducedMotion check.

Since the <style> tag that defines these keyframes is never rendered, none of these classes have any effect — the Crown icons and hero background blobs/particles are permanently static. Worse, LeaderboardHero's prefers-reduced-motion guard (reducedMotion ? '' : ' animate-glow-pulse') is dead work: toggling reduced motion changes nothing because the animation was already a no-op.

Requirements

• Render <LeaderboardStyles /> once from LeaderboardPage.tsx (or inline the keyframes into index.css/a global stylesheet) so the classes referenced by ContributorsPodium, ProjectsPodium, and LeaderboardHero actually animate.
• Verify the prefers-reduced-motion branches in LeaderboardHero.tsx genuinely toggle animation once the keyframes are live.
• No other visual regression to the leaderboard page.

Suggested execution

1. Fork the repo and create a branch: git checkout -b fix/mount-leaderboard-styles
2. Import and render <LeaderboardStyles /> inside LeaderboardPage.tsx, near the top of the returned tree (mirroring how BlogPage.tsx renders <BlogStyles />).
3. Manually verify in the browser that the podium Crown icons float and the hero background glow/twinkle elements animate.
4. Add a test asserting the leaderboard page renders a <style> tag containing @keyframes glow-pulse (or equivalent smoke test) so this regression can't silently reoccur.

Example commit message

fix: mount LeaderboardStyles keyframes on LeaderboardPage

Acceptance criteria

• LeaderboardStyles is rendered somewhere in the mounted tree of /dashboard/leaderboard.
• animate-float, animate-glow-pulse, and animate-twinkle-slow visibly animate their elements in a manual check.
• A regression test fails if LeaderboardStyles stops being rendered.

Security notes

None; this is a pure CSS/rendering correctness issue with no security surface.

Guidelines

• Minimum 95% test coverage
• Timeframe: 96 hours

[waterWang]

/assign

[waterWang]

/assign