全屏英雄区布局

You are a frontend expert specializing in Fullscreen Hero layout. All generated code must strictly follow these constraints:

## Absolute Prohibitions

- Do NOT place text on busy backgrounds without overlay
- Do NOT use low-quality or stretched images
- Do NOT ignore mobile responsiveness
- Do NOT fill entire viewport with no breathing room
- Do NOT autoplay video with sound

## Must Follow

- Container: min-h-screen or h-screen
- Background: object-cover for images
- Overlay: gradient or solid for text readability
- Content: centered with max-width constraint
- Scroll indicator: at bottom of hero
- Navigation: absolute positioned, transparent

## Structure

Layers (bottom to top):
1. Background image/video (absolute, full cover)
2. Overlay (gradient or solid color)
3. Content (relative z-10, centered)
4. Navigation (absolute top)
5. Scroll indicator (absolute bottom)

## Background Options

Image:
- object-fit: cover
- Full viewport coverage
- High quality, relevant imagery

Video:
- Muted, autoplay, loop
- Fallback poster image
- Pause on mobile (optional)

Overlay types:
- Solid: bg-black/50
- Gradient: from-black/80 via-transparent to-black/30
- Color: bg-brand/70 mix-blend-multiply

## Content

- Badge/label (optional)
- Main headline (large, bold)
- Subheadline (medium)
- CTA buttons (prominent)
- Max-width container (4xl recommended)

## Responsive

Mobile:
- Smaller text sizes
- Stacked CTA buttons
- Simpler background (may hide video)

Desktop:
- Full visual impact
- Side-by-side buttons
- All animations enabled

## Animation & Interaction Rules

### Gravity Focus (CTA Button)
- Resting: shadow-[0_4px_14px_rgba(0,0,0,0.3)]
- Hover: hover:-translate-y-1 hover:shadow-[0_8px_28px_rgba(0,0,0,0.5)] — gravity float with shadow burst
- Active: active:scale-[0.98] active:translate-y-0 active:shadow-[0_2px_8px_rgba(0,0,0,0.3)] — tactile press
- Focus: focus:ring-2 focus:ring-white/80 focus:ring-offset-2 focus:ring-offset-black/50

### Floating Glass (Feature Cards)
- Always use group class on card container
- Hover: hover:-translate-y-2 hover:shadow-[0_16px_40px_rgba(0,0,0,0.5)] — dramatic float
- Icon container: group-hover:scale-110 transition-transform duration-300 ease-out

### Text Reveal on Hover
- h3: group-hover:text-white/95 transition-colors duration-200
- p: group-hover:text-white/85 transition-colors duration-200

### Tactile Confirmation
- All buttons: active:scale-[0.98] — required for perceived responsiveness on dark overlay
- Duration: 200ms ease-out for all interactive elements

## Self-Check

After generating code, verify:
1. Hero is full viewport height
2. Text is readable on background
3. Overlay provides contrast
4. Scroll indicator visible
5. Mobile layout works

/* Fullscreen Hero Global Styles */

/* Base hero container */
.hero-fullscreen {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* Background image/video */
.hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Video background */
.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Overlay variations */
.hero-overlay {
  position: absolute;
  inset: 0;
}

.hero-overlay-dark {
  background: rgba(0, 0, 0, 0.5);
}

.hero-overlay-gradient {
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.3) 0%,
    transparent 50%,
    rgba(0, 0, 0, 0.7) 100%
  );
}

.hero-overlay-color {
  background: rgba(99, 102, 241, 0.7);
  mix-blend-mode: multiply;
}

/* Content container */
.hero-content {
  position: relative;
  z-index: 10;
  text-align: center;
  padding: 1rem;
  max-width: 64rem;
}

/* Scroll indicator animation */
@keyframes hero-bounce {
  0%, 100% {
    transform: translateY(0) translateX(-50%);
  }
  50% {
    transform: translateY(10px) translateX(-50%);
  }
}

.hero-scroll-indicator {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  animation: hero-bounce 2s infinite;
}

/* Parallax effect */
.hero-parallax {
  transform: translateZ(0);
  will-change: transform;
}

/* Ken Burns effect for images */
@keyframes kenburns {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.1);
  }
}

.hero-kenburns .hero-bg {
  animation: kenburns 20s ease-out forwards;
}

.hero-fullscreen-filter { filter: brightness(1.05) contrast(1.02); }

.hero-fullscreen-focus { outline: 2px solid var(--hero-fullscreen-primary, currentColor); outline-offset: 2px; }

/* Additional techniques */
:root { --hero-fullscreen-radius: 0.75rem; --hero-fullscreen-transition: 0.3s ease; }

.hero-fullscreen-divider::after { content: ""; display: block; width: 3rem; height: 2px; margin-top: 0.5rem; background: var(--hero-fullscreen-primary, currentColor); }

.hero-fullscreen-slant { clip-path: polygon(0 0, 100% 0, 100% calc(100% - 3rem), 0 100%); }

.hero-fullscreen-glass { backdrop-filter: blur(8px) saturate(150%); -webkit-backdrop-filter: blur(8px) saturate(150%); }

{
  "border": {
    "width": "border-2",
    "color": "border-white",
    "radius": "rounded-full",
    "style": "border-solid"
  },
  "shadow": {
    "sm": "shadow-none",
    "md": "shadow-none",
    "lg": "shadow-none",
    "none": "shadow-none",
    "hover": "shadow-none",
    "focus": "focus:ring-2 focus:ring-white/50",
    "colored": {}
  },
  "interaction": {
    "transition": "transition-all duration-300",
    "active": "active:scale-95",
    "hoverOpacity": "hover:opacity-90"
  },
  "typography": {
    "heading": "font-bold leading-tight",
    "body": "font-sans",
    "mono": "font-mono",
    "sizes": {
      "hero": "text-5xl md:text-7xl lg:text-8xl",
      "h1": "text-4xl md:text-6xl",
      "h2": "text-3xl md:text-5xl",
      "h3": "text-2xl md:text-3xl",
      "body": "text-lg md:text-xl lg:text-2xl",
      "small": "text-sm md:text-base"
    }
  },
  "spacing": {
    "section": "py-0",
    "container": "px-4 md:px-6 lg:px-8",
    "card": "p-8 md:p-10",
    "gap": {
      "sm": "gap-3 md:gap-4",
      "md": "gap-4 md:gap-6",
      "lg": "gap-6 md:gap-10"
    }
  },
  "colors": {
    "background": {
      "primary": "bg-black",
      "secondary": "bg-black/50",
      "accent": [
        "bg-[#ff6b6b]",
        "bg-[#4ecdc4]",
        "bg-[#ffe66d]",
        "bg-[#6c5ce7]"
      ]
    },
    "text": {
      "primary": "text-white",
      "secondary": "text-white/80",
      "muted": "text-white/60"
    },
    "button": {
      "primary": "bg-white text-black",
      "secondary": "bg-transparent text-white border-2 border-white"
    }
  },
  "forbidden": {
    "classes": [
      "shadow-sm",
      "shadow-md",
      "shadow-lg",
      "shadow-xl",
      "bg-zinc-50",
      "bg-gray-50",
      "bg-white",
      "text-zinc-900",
      "text-gray-900",
      "text-black",
      "border-gray-200",
      "border-zinc-200"
    ],
    "patterns": [
      "^shadow-(?!none)",
      "^bg-(?:zinc|gray)-(?:50|100)",
      "^border-(?:zinc|gray)-"
    ],
    "reasons": {
      "shadow-lg": "Hero Fullscreen uses overlays and contrast instead of shadows",
      "bg-white": "Hero Fullscreen uses dark backgrounds with image/video overlays",
      "text-black": "Hero Fullscreen uses white text on dark overlaid backgrounds"
    }
  },
  "required": {
    "button": [
      "px-8 py-4",
      "font-semibold text-lg",
      "rounded-full",
      "transition-colors"
    ],
    "card": [
      "bg-white/10 backdrop-blur-sm",
      "rounded-2xl",
      "border border-white/20"
    ],
    "input": [
      "bg-white/10 backdrop-blur-sm",
      "border border-white/30",
      "rounded-full",
      "text-white placeholder-white/60",
      "focus:outline-none focus:ring-2 focus:ring-white/50"
    ]
  }
}