卡片堆叠布局

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

/* Card Stack Global Styles */

/* Stack container */
.card-stack {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  perspective: 1000px;
}

/* Base card in stack */
.card-stack-item {
  position: absolute;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Stack positions */
.card-stack-item:nth-child(1) {
  z-index: 30;
  transform: translateY(0) scale(1);
  opacity: 1;
}

.card-stack-item:nth-child(2) {
  z-index: 20;
  transform: translateY(16px) scale(0.95) rotate(2deg);
  opacity: 0.8;
}

.card-stack-item:nth-child(3) {
  z-index: 10;
  transform: translateY(32px) scale(0.9) rotate(-3deg);
  opacity: 0.6;
}

.card-stack-item:nth-child(n+4) {
  z-index: 0;
  transform: translateY(48px) scale(0.85);
  opacity: 0;
  pointer-events: none;
}

/* Fan out on hover — deck shuffle effect */
.card-stack:hover .card-stack-item:nth-child(1) {
  transform: translateY(-24px) scale(1.05);
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.2);
}

.card-stack:hover .card-stack-item:nth-child(2) {
  transform: translateY(32px) scale(0.95) rotate(6deg) translateX(-20px);
  opacity: 0.9;
}

.card-stack:hover .card-stack-item:nth-child(3) {
  transform: translateY(48px) scale(0.9) rotate(-6deg) translateX(20px);
  opacity: 0.8;
}

/* Tinder-style swipe */
.card-stack-swipe .card-stack-item.swiping-left {
  transform: translateX(-100%) rotate(-10deg);
  opacity: 0;
}

.card-stack-swipe .card-stack-item.swiping-right {
  transform: translateX(100%) rotate(10deg);
  opacity: 0;
}
/* Card Stack Design Tokens */
:root {
  --card-stack-primary: #1a1a2e;
  --card-stack-secondary: #f0f0f5;
  --card-stack-accent: #6c5ce7;
  --card-stack-glow: rgba(26, 26, 46, 0.3);
}

@keyframes card-stack-fade-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes card-stack-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

.card-stack-card {
  position: relative;
  overflow: hidden;
}

.card-stack-card::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.3s ease;
  background: linear-gradient(135deg, rgba(26, 26, 46, 0.05), transparent);
  pointer-events: none;
}

.card-stack-card:hover::before {
  opacity: 1;
}

.card-stack-gradient {
  background: linear-gradient(135deg, #1a1a2e, #6c5ce7);
}

.card-stack-gradient-text {
  background: linear-gradient(135deg, #1a1a2e, #6c5ce7);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.card-stack-frosted {
  backdrop-filter: blur(12px) saturate(180%);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
  background: rgba(26, 26, 46, 0.08);
}

.card-stack-accent-corner {
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 2rem), calc(100% - 2rem) 100%, 0 100%);
}

.card-stack-animate-in {
  animation: card-stack-fade-in 0.5s ease-out both;
}

{
  "border": {
    "width": "border",
    "color": "border-zinc-200",
    "radius": "rounded-2xl",
    "style": "border-solid"
  },
  "shadow": {
    "sm": "shadow-md",
    "md": "shadow-xl",
    "lg": "shadow-2xl",
    "none": "shadow-none",
    "hover": "hover:shadow-2xl",
    "focus": "focus:shadow-xl",
    "colored": {}
  },
  "interaction": {
    "transition": "transition-all duration-300 ease-[cubic-bezier(0.4,0,0.2,1)]",
    "active": "active:scale-95",
    "hoverScale": "hover:scale-105"
  },
  "typography": {
    "heading": "font-bold tracking-tight",
    "body": "font-sans",
    "mono": "font-mono",
    "sizes": {
      "hero": "text-3xl md:text-4xl lg:text-5xl",
      "h1": "text-2xl md:text-3xl",
      "h2": "text-xl md:text-2xl",
      "h3": "text-lg md:text-xl",
      "body": "text-sm md:text-base",
      "small": "text-xs md:text-sm"
    }
  },
  "spacing": {
    "section": "py-16 md:py-20 lg:py-24",
    "container": "px-4 md:px-8",
    "card": "p-6 md:p-8",
    "gap": {
      "sm": "gap-2 md:gap-3",
      "md": "gap-4 md:gap-6",
      "lg": "gap-6 md:gap-8"
    }
  },
  "colors": {
    "background": {
      "primary": "bg-gradient-to-br from-slate-900 to-slate-800",
      "secondary": "bg-white",
      "accent": [
        "bg-[#6c5ce7]",
        "bg-[#00cec9]",
        "bg-[#fd79a8]",
        "bg-[#ffeaa7]"
      ]
    },
    "text": {
      "primary": "text-zinc-900",
      "secondary": "text-zinc-600",
      "muted": "text-zinc-400"
    },
    "button": {
      "primary": "bg-zinc-900 text-white",
      "secondary": "bg-white/10 text-white"
    }
  },
  "forbidden": {
    "classes": [
      "rounded-none",
      "shadow-none",
      "border-4",
      "border-8"
    ],
    "patterns": [
      "^rounded-none$",
      "^border-[48]"
    ],
    "reasons": {
      "rounded-none": "Card Stack uses generous rounding (rounded-2xl) for soft stacked cards",
      "shadow-none": "Card Stack requires shadows to convey depth and layering",
      "border-4": "Card Stack uses subtle or no borders, relying on shadows for definition"
    }
  },
  "required": {
    "button": [
      "rounded-full",
      "shadow-lg",
      "hover:shadow-xl",
      "transition-shadow"
    ],
    "card": [
      "rounded-2xl",
      "shadow-xl",
      "transition-all duration-300",
      "bg-white"
    ],
    "input": [
      "bg-white/80 backdrop-blur",
      "border border-zinc-200",
      "rounded-xl",
      "focus:outline-none",
      "focus:ring-2 focus:ring-purple-500/30",
      "transition-all"
    ]
  }
}