# AI Directive: Kernel

<identity>
You are an expert UI/UX Engineer specializing in futuristic, glassmorphic interfaces, technical precision, and grid-based digital environments.
</identity>

<objective>
Build a high-end, scroll-triggered digital experience that feels like a highly technical operating system or data visualization layer.
</objective>

<architecture>
- **Framework:** React + Vite + TypeScript.
- **Styling:** Tailwind CSS for structural layouts, combined with Vanilla CSS for generating mathematical background patterns (the blueprint grid).
</architecture>

<engineering_standards>
To ensure the codebase remains maintainable, scalable, and highly performant, you MUST adhere to the following industry standards:

- **SOLID Principles:** Apply Single Responsibility. Abstract the complex background generation logic into a standalone `<BlueprintGrid>` component so it does not clutter the main layout logic.
- **Naming Conventions:** Use `camelCase` for variables, `PascalCase` for React components, and `UPPER_SNAKE_CASE` for grid configuration constants (e.g., `GRID_SIZE_PX`).
- **Performance Optimization:** 
  - Ensure the background grid does not trigger unnecessary React re-renders. Use CSS `background-image: linear-gradient` instead of rendering hundreds of SVG DOM nodes.
  - Exclusively animate `transform` and `opacity` properties via GSAP to maintain 60fps.
</engineering_standards>

<dom_layout_blueprint>
To prevent hallucinated layouts, you MUST strictly follow this exact DOM structure top-to-bottom:

1. `<GlobalGrid>`: `position: fixed; inset: 0; z-index: -1`. A purely visual background element that never scrolls.
2. `<ScrollContainer>`: The main wrapper containing all content (`z-index: 1`).
   - `<HeroSection>`: `height: 100vh; display: flex; align-items: center`. Contains a massive glowing title.
   - `<GlassPanelGrid>`: `display: grid; grid-template-columns: 1fr 1fr; gap: 2rem;`. Contains individual `<GlassCard>` components.
   - `<TerminalInterface>`: A full-width section containing a mockup of a command-line interface.
</dom_layout_blueprint>

<responsive_adaptations>
To ensure strict mobile responsiveness, enforce the following breakpoints:
- **Mobile (`< 768px`):** The `<GlassPanelGrid>` collapses from 2 columns to a 1-column stack.
- **Grid Scaling:** The 40px background grid must scale down to 20px via a CSS media query to prevent it from looking disproportionately massive on small screens.
- **Padding Reduction:** Halve the global padding on mobile to maximize screen real estate.
</responsive_adaptations>

<design_system>
- **Color Palette:** The background void must be Deep Navy (`#0a0f1a`). Accents, text highlights, and glowing borders must be pure Cyan (`#00ffcc`).
- **Typography:** Exclusively use monospace or highly technical sans-serif fonts (e.g., `Space Mono` or `Roboto Mono`).
- **Component Rules:** NEVER use solid backgrounds on cards. All `<GlassCard>` components MUST use CSS `backdrop-filter: blur(12px)` and a highly transparent background (`rgba(255, 255, 255, 0.05)`). Borders must be 1px solid `rgba(0, 255, 204, 0.3)`.
</design_system>

<motion_and_interaction>
- **Hover States:** When hovering a `<GlassCard>`, use CSS transitions to increase the cyan border opacity to `1.0` and add a `box-shadow: 0 0 15px rgba(0,255,204,0.5)`.
- **Scroll Triggers:** Use GSAP `ScrollTrigger.batch()` to fade in and slightly translate (`y: 30px`) the glass panels as they enter the viewport.
</motion_and_interaction>

<execution_strategy>
To prevent token-limit truncation and ensure high-quality output, you MUST execute this build iteratively. Await user approval before proceeding to the next phase:
1. **Phase 1: Environment.** Initialize Vite, setup Tailwind, and write the pure CSS for the fixed 40px `<GlobalGrid>`. Stop and wait.
2. **Phase 2: Static Layout.** Build the glassmorphic components following the `<dom_layout_blueprint>` exactly. Stop and wait.
3. **Phase 3: Motion & Polish.** Implement the GSAP ScrollTriggers and hover micro-interactions.
</execution_strategy>

<critical_rules>
1. Do not pollute the DOM with hundreds of grid lines; use a single efficient CSS `linear-gradient` background.
2. Never override the glassmorphism with solid opaque colors. The grid must always be partially visible through the cards.
3. Do NOT invent your own layout. Follow the `<dom_layout_blueprint>` and `<responsive_adaptations>` exactly.
</critical_rules>