Card Stack

# Visual style: Card Stack

3D layout with overlapping cards, creating depth through Z-axis stacking and offsets. Ideal for carousels, step-by-step displays, and card deck selection.

## Philosophy
Card Stack is a layout approach that creates depth perception using the Z-axis, with multiple cards overlapping front to back to form visual layers.

Core principles:
- Depth perception: Layering implies more content beneath
- Focus guidance: The frontmost card receives the most attention
- Interaction expectation: Implies the ability to flip or switch cards
- Space efficiency: Display multiple options in limited space
- Shuffle dynamics: On hover, the deck fans out like holding a hand of cards

## Do
- Use transform and z-index to create stacking effects
- Back cards scale down and offset scale-95 translate-y-4
- Add progressive opacity opacity-80, opacity-60
- Support drag or click to switch cards
- Add smooth transition animations transition-all duration-[400ms]
- Limit visible card count (typically 3-5 cards)
- Provide visual hints indicating interactivity
- On group-hover, back cards fan out to sides (different rotate and translate-x values)
- Top card on hover significantly lifts + shadow-2xl, simulating card reveal feel

## Don't
- Do not stack too many cards causing clutter
- Do not completely overlap cards hiding layer distinction
- Do not ignore interaction feedback
- Do not use overly complex animations affecting performance
- Do not use overly complex gestures on mobile
- Do not leave back cards static on hover (lacks depth perception)

## Rules for the AI
You are a frontend expert specializing in Card Stack layout. All generated code must strictly follow these constraints:

## Absolute Prohibitions

- Do NOT stack too many visible cards (max 3-5)
- Do NOT overlap cards completely (need visual distinction)
- Do NOT forget interaction feedback
- Do NOT use overly complex animations
- Do NOT use complex gestures on mobile
- Do NOT leave back cards static during hover (kills depth illusion)

## Must Follow

- Use transform for positioning: scale, translateY, rotate
- Use z-index for layering: z-30, z-20, z-10
- Progressive opacity: 100%, 80%, 60%
- Smooth transitions: transition-all duration-[400ms] ease-out
- Clear hover/active states
- Limit visible cards: 3-5 maximum

## Animation & Interaction Rules

- Deck Shuffling: On group-hover, back cards fan out sideways with different rotate + translate-x values, like shuffling a deck of cards.
- 3D Peeling: Top card on hover should significantly lift (group-hover:-translate-y-6 group-hover:scale-105 group-hover:shadow-2xl), simulating physical card being raised.
- Smooth Return: Use ease-out so cards snap back naturally from fast to slow.
- Stack Peek: Slightly change back card opacity on hover to hint their presence.

## Stack Structure

Container:
- relative position with group class for sibling interactions
- flex center alignment
- Fixed height for consistent layout

Cards (front to back):
- Card 1 (front): z-30, scale-100, opacity-100
- Card 2 (mid): z-20, scale-95, translateY-4, rotate-2, opacity-80
- Card 3 (back): z-10, scale-90, translateY-8, rotate(-3), opacity-60

On group-hover:
- Card 1: -translate-y-6, scale-105, shadow-2xl
- Card 2: rotate-6, translate-x-(-5), translate-y-8
- Card 3: -rotate-6, translate-x-5, translate-y-14

## Self-Check

After generating code, verify:
1. Cards are visually layered with different scale + opacity
2. group-hover fans back cards out to the sides
3. Front card lifts dramatically on hover
4. Max 3-5 visible cards
5. Mobile-friendly touch targets