---
estimated_steps: 24
estimated_files: 6
skills_used: []
---

# T01: Add card hover scale, staggered entrance animations, and featured technique glow

## Description

CSS-first visual polish covering R016 (card hover + stagger) and R017 (featured glow). Touches all 6 card hover states, adds a new `cardEnter` keyframe with stagger delay pattern, applies stagger indices via JSX style props across 5 page components, and redesigns the `.home-featured` section with gradient border + box-shadow glow.

## Steps

1. **Card hover scale** — In `frontend/src/App.css`, add `transform: scale(1.02)` to hover states for `.recent-card`, `.creator-technique-card`, `.subtopic-technique-card`, `.search-result-card`, and `.topic-card`. For `.nav-card`, augment existing `translateY(-1px)` to `scale(1.02) translateY(-1px)`. Add `transition: ... transform 0.2s` where not already present. Ensure `will-change: transform` is on the base card class.

2. **Stagger keyframe + utility class** — Add `@keyframes cardEnter` (opacity 0→1, translateY(12px→0), 300ms ease-out) to `App.css`. Add `.card-stagger` class that applies the animation with `animation-delay: calc(var(--stagger-index, 0) * 60ms)` and `animation-fill-mode: both`. 

3. **Stagger indices on Home.tsx** — Add `className="card-stagger"` and `style={{ '--stagger-index': i } as React.CSSProperties}` to recent cards `.map()` loop (line ~202). Also add to nav-cards (indices 0, 1).

4. **Stagger indices on TopicsBrowse.tsx** — Add stagger class + index to `.topic-card` elements in the `.map()` loop (line ~117).

5. **Stagger indices on CreatorDetail.tsx** — Add stagger class + index to `.creator-technique-card` elements in the `.map()` loop (line ~141).

6. **Stagger indices on SubTopicPage.tsx** — Add stagger class + index to `.subtopic-technique-card` elements in the `.map()` loops (line ~139). Reset index per group.

7. **Stagger indices on SearchResults.tsx** — Add stagger class + index to `.search-result-card` elements in the `.map()` loop (line ~80).

8. **Featured technique glow** — Redesign `.home-featured` in `App.css`: replace `border-left: 3px solid var(--color-accent)` with a gradient border using `border-image: linear-gradient(135deg, var(--color-accent), #a855f7) 1` or pseudo-element approach, add `box-shadow: 0 0 20px rgba(34, 211, 238, 0.15), 0 0 40px rgba(34, 211, 238, 0.05)` for glow effect. Keep it subtle — accent glow, not neon. Ensure it stays GPU-composited (only box-shadow + opacity, no layout properties).

## Must-Haves

- [ ] All 6 card types have scale(1.02) hover with smooth transition
- [ ] `@keyframes cardEnter` and `.card-stagger` class defined in App.css
- [ ] Stagger indices applied in all 5 page components
- [ ] `.home-featured` has visible glow/gradient treatment
- [ ] `npx tsc --noEmit` passes
- [ ] `npm run build` succeeds

## Verification

- `cd frontend && npx tsc --noEmit` — no type errors
- `cd frontend && npm run build` — Vite build succeeds
- `grep -q 'cardEnter' frontend/src/App.css` — keyframe exists
- `grep -q 'card-stagger' frontend/src/App.css` — utility class exists
- `grep -c 'stagger-index' frontend/src/pages/Home.tsx frontend/src/pages/TopicsBrowse.tsx frontend/src/pages/CreatorDetail.tsx frontend/src/pages/SubTopicPage.tsx frontend/src/pages/SearchResults.tsx` — all 5 pages have stagger indices

## Inputs

- ``frontend/src/App.css` — existing card hover styles and theme custom properties`
- ``frontend/src/pages/Home.tsx` — recent cards and nav-cards `.map()` loops`
- ``frontend/src/pages/TopicsBrowse.tsx` — topic cards `.map()` loop`
- ``frontend/src/pages/CreatorDetail.tsx` — technique cards `.map()` loop`
- ``frontend/src/pages/SubTopicPage.tsx` — technique cards `.map()` loops`
- ``frontend/src/pages/SearchResults.tsx` — result cards `.map()` loop`

## Expected Output

- ``frontend/src/App.css` — updated with card hover scale, cardEnter keyframe, .card-stagger class, featured glow styles`
- ``frontend/src/pages/Home.tsx` — stagger indices on nav-cards and recent cards`
- ``frontend/src/pages/TopicsBrowse.tsx` — stagger indices on topic cards`
- ``frontend/src/pages/CreatorDetail.tsx` — stagger indices on technique cards`
- ``frontend/src/pages/SubTopicPage.tsx` — stagger indices on technique cards`
- ``frontend/src/pages/SearchResults.tsx` — stagger indices on result cards`

## Verification

cd frontend && npx tsc --noEmit && npm run build && grep -q 'cardEnter' src/App.css && grep -q 'card-stagger' src/App.css
