fix(Card): correct isInteractive prop's related boxshadow animation

[LinKCoding]

Overview

Fixes Card boxShadow styling for the isInteractive outline variant by adding an initial animation and separate animations for outlineInitial and outlineAnimate

PR Checklist

• Related to designs:
• Related to JIRA ticket: GMT-136
• I have run this code to verify it works
• This PR includes unit tests for the code change
• This PR includes testing instructions tests for the code change
• The alpha package of this PR is passing end-to-end tests in all relevant Codecademy repositories

Testing Instructions

Here's how the non-animated, but isInteractive states look:

Here's how the animated states look:

1. Go to Card component story in Storybook
2. Check over the isInteractive story
3. Hover over the card to confirm the shadow animation is consistent for all Card instances
4. Check over the outline variant specifically and notice that there's no longer a jump from outline to boxshadow
5. Test in both light and dark mode

PR Links and Envs

Repository	PR Link
Monolith	Monolith PR
Mono	Mono PR

[nx-cloud]

View your CI Pipeline Execution ↗ for commit fa2341e

---

☁️ Nx Cloud last updated this comment at 2025-12-12 16:14:32 UTC

[codecademydev]

📬 Published Alpha Packages:

@codecademy/[email protected]
@codecademy/[email protected]

[github-actions]

🚀 Styleguide deploy preview ready!

Preview URL: https://693c404a3be1600c47f4d20b--gamut-preview.netlify.app
Deploy Logs: https://app.netlify.com/projects/gamut-preview/deploys/693c404a3be1600c47f4d20b