全屏滚动布局

You are a frontend expert specializing in Full Page Scroll layout. All generated code must strictly follow these constraints:

## Absolute Prohibitions

- Do NOT let content overflow beyond viewport height
- Do NOT omit scroll indicators
- Do NOT use heavy animations that hurt performance
- Do NOT lock scroll for too long
- Do NOT ignore mobile experience
- Do NOT use the same transition delay for all content elements (staggering is mandatory for parallax depth)

## Must Follow

- Container: h-screen overflow-y-auto scroll-snap-type: y mandatory
- Sections: min-h-screen snap-start group (MUST use group class for hover parallax)
- Content: centered with flex items-center justify-center
- Navigation: fixed capsule dots on right side (hover:h-6 to expand)
- Scroll indicator: at bottom of first section
- Smooth scrolling: scroll-behavior: smooth

## Section Structure

Each section:
- min-h-screen (full viewport height)
- snap-start (snap to section start)
- group (required for group-hover parallax)
- overflow-hidden (required for breathing background)
- Content centered both ways
- Distinct background color/gradient
- Number indicator (01, 02, etc.)

## Animation & Interaction Rules

- Staggered Parallax: Content layers inside a group section must use DIFFERENT transition delays to create depth. Use delay-0 for the eyebrow/label (fastest, frontmost), delay-75 for the heading (middle layer), delay-150 for body text (slowest, deepest). All use group-hover:-translate-y-N with transition-transform duration-700 ease-out. This creates the illusion that elements are on different Z-planes flying toward the viewer as the section is hovered/focused.
- Breathing Background: Every section includes an absolute background div (radial-gradient or other atmospheric effect) with group-hover:scale-110 transition-transform duration-1000 ease-out. The scale is slow (1000ms) and subtle — creates a "room breathing" or "portal opening" sensation without being jarring.
- Capsule Nav Dots: Side navigation dots are circles (w-3 h-3 rounded-full) by default. On hover: hover:h-6 (the dot extends vertically into a capsule/pill shape). The active section's dot is permanently tall (h-10 rounded-full). These indicate section hierarchy and interactivity without needing labels.
- Heading Scale: The main heading uses group-hover:scale-105 in addition to translation — creates a subtle zoom-in that reinforces the "content approaching" cinematic parallax.
- Scroll Indicator: animate-bounce, positioned absolute bottom-8 left-1/2 -translate-x-1/2. Always present on the first section.
- Easing: Content parallax uses duration-700 ease-out. Background breathing uses duration-1000 ease-out. Nav dots use duration-300.

## Navigation

Side dots:
- Fixed position on right side, vertical center
- Active: w-3 h-10 rounded-full bg-white (tall capsule)
- Inactive: w-3 h-3 rounded-full bg-white/30 hover:bg-white/80 hover:h-6 (expands to capsule on hover)
- transition-all duration-300 for smooth shape morph

## Self-Check

After generating code, verify:
1. All sections have group class
2. Content elements inside sections have DIFFERENT delay values (delay-0, delay-75, delay-150)
3. Each section has a breathing background div (group-hover:scale-110)
4. Navigation dots use hover:h-6 to morph into capsules
5. Active nav dot is permanently h-10 (tall capsule)
6. All sections are exactly viewport height (min-h-screen)
7. Scroll snapping enabled (scroll-snap-type y mandatory on container)

/* Full Page Scroll Global Styles */

/* Main container with snap scroll */
.fullpage-container {
  height: 100vh;
  overflow-y: auto;
  scroll-snap-type: y mandatory;
  scroll-behavior: smooth;
}

/* Each section */
.fullpage-section {
  min-height: 100vh;
  scroll-snap-align: start;
  display: flex;
  align-items: center;
  justify-content: center;
}

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

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

/* Navigation dots */
.fullpage-nav {
  position: fixed;
  right: 2rem;
  top: 50%;
  transform: translateY(-50%);
  z-index: 50;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.fullpage-nav-dot {
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
  transition: background 0.3s, transform 0.3s;
}

.fullpage-nav-dot:hover,
.fullpage-nav-dot.active {
  background: rgba(255, 255, 255, 1);
  transform: scale(1.2);
}

/* Section entrance animations */
.fullpage-section [data-animate] {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.fullpage-section.in-view [data-animate] {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger children animations */
.fullpage-section.in-view [data-animate]:nth-child(1) { transition-delay: 0.1s; }
.fullpage-section.in-view [data-animate]:nth-child(2) { transition-delay: 0.2s; }
.fullpage-section.in-view [data-animate]:nth-child(3) { transition-delay: 0.3s; }
.fullpage-section.in-view [data-animate]:nth-child(4) { transition-delay: 0.4s; }
/* Full Page Scroll Design Tokens */
:root {
  --full-page-scroll-primary: #000000;
  --full-page-scroll-secondary: #ffffff;
  --full-page-scroll-accent: #6366f1;
  --full-page-scroll-glow: rgba(0, 0, 0, 0.3);
}

.full-page-scroll-card {
  position: relative;
  overflow: hidden;
}

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

.full-page-scroll-card:hover::before {
  opacity: 1;
}

.full-page-scroll-gradient {
  background: linear-gradient(135deg, #000000, #6366f1);
}

.full-page-scroll-gradient-text {
  background: linear-gradient(135deg, #000000, #6366f1);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.full-page-scroll-frosted {
  backdrop-filter: blur(12px) saturate(180%);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
  background: rgba(0, 0, 0, 0.08);
}

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

.full-page-scroll-animate-in {
  animation: full-page-scroll-fade-in 0.5s ease-out both;
}

{
  "border": {
    "width": "border-0",
    "color": "border-white/20",
    "radius": "rounded-full",
    "style": "border-solid"
  },
  "shadow": {
    "sm": "shadow-none",
    "md": "shadow-none",
    "lg": "shadow-none",
    "none": "shadow-none",
    "hover": "shadow-none",
    "focus": "shadow-none",
    "colored": {}
  },
  "interaction": {
    "transition": "transition-all duration-300",
    "active": "active:scale-95",
    "hoverOpacity": "hover:opacity-90"
  },
  "typography": {
    "heading": "font-bold tracking-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 lg:text-7xl",
      "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-6 md:px-8 lg:px-12",
    "card": "p-8 md:p-12",
    "gap": {
      "sm": "gap-2 md:gap-4",
      "md": "gap-4 md:gap-6",
      "lg": "gap-6 md:gap-8"
    }
  },
  "colors": {
    "background": {
      "primary": "bg-black",
      "secondary": "bg-zinc-900",
      "accent": [
        "bg-gradient-to-br from-indigo-600 to-purple-700",
        "bg-gradient-to-br from-cyan-600 to-blue-600",
        "bg-gradient-to-br from-purple-600 to-pink-600",
        "bg-gradient-to-br from-emerald-600 to-teal-600"
      ]
    },
    "text": {
      "primary": "text-white",
      "secondary": "text-white/80",
      "muted": "text-white/50"
    },
    "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",
      "border-gray-200",
      "border-gray-300",
      "text-zinc-900",
      "text-black"
    ],
    "patterns": [
      "^shadow-(?!none)",
      "^border-gray-"
    ],
    "reasons": {
      "shadow-lg": "Full Page Scroll uses bold color backgrounds instead of shadows for depth",
      "border-gray-200": "Full Page Scroll uses white/transparent borders for dark backgrounds",
      "text-black": "Full Page Scroll uses white text on dark/gradient backgrounds"
    }
  },
  "required": {
    "button": [
      "px-8 md:px-12 py-4 md:py-5",
      "font-semibold text-lg",
      "transition-colors"
    ],
    "card": [
      "min-h-screen",
      "snap-start",
      "flex items-center justify-center"
    ],
    "input": [
      "bg-transparent",
      "border border-white/30",
      "text-white text-lg",
      "placeholder-white/50",
      "focus:outline-none focus:border-white",
      "transition-colors"
    ]
  }
}