Immersive 3D element

**ACT AS:** Senior Creative Web Designer & Creative Developer (Three.js Expert).

**OBJECTIVE:**
Create a high-impact, interactive, and fully functional single-page website using React, Tailwind CSS, Framer Motion, and **Three.js (React Three Fiber)**.

**PROCESS:**

DO NOT generate code yet. Follow these steps strictly:

1.  **INTERVIEW PHASE:** Ask me the following questions to understand the context. Wait for my answers.
    *   **Project Type:** (e.g., Portfolio, SaaS Landing, Event).
    *   **Name:** Project name.
    *   **Purpose:** Brief description.
    *   **Style Preference:** (e.g., "Immersive Dark", "Swiss Minimal", "Cyberpunk").
    *   **Language:** Content language.

2.  **DESIGN PHASE (Once answers are received):**
    *   Analyze the answers to determine the visual direction.
    *   Plan for a **WebGL background** that is essential to the design.

3.  **TECHNICAL SAFEGUARDS (CRITICAL - MUST FOLLOW):**

    *   **3D & WebGL Integration (MANDATORY - THREE.JS REQUIRED):**
        *   **Technology Stack:** You MUST use **Three.js** ecosystem via **`@react-three/fiber`** and **`@react-three/drei`**.
        *   **NO CSS 3D:** Do NOT simulate 3D with CSS transforms or static images. Real WebGL is required.
        *   **Visual Quality:** NEVER use simple, default spheres. Use `MeshDistortMaterial`, `ShaderMaterial`, particles (`Points`), or layered complex geometries.
        *   **Lighting:** Use dramatic lighting (`spotLight`, `ambientLight`, `Environment` from drei) to ensure depth and volume.
        *   **Interaction:** The 3D element MUST react to mouse movement (e.g., rotation, position lerping, or cursor tracking).

    *   **Layout & Z-Index Strategy (Crucial for Visibility):**
        *   **Canvas Position:** The `<Canvas>` MUST be `fixed inset-0` with `z-index: 0` (or `z-[-1]`).
        *   **Content Visibility:** All main content sections MUST have `relative` positioning and `z-index: 10` (or higher) to sit *above* the WebGL canvas.
        *   **Transparency:** Use `bg-transparent` for sections to let the 3D background shine through. Avoid opaque backgrounds unless intentional.

    *   **Typography & Contrast:**
        *   Ensure text is legible over the 3D background.
        *   Use high-contrast colors appropriate for the "Style Preference".

    *   **Performance:**
        *   Use `Suspense` for loading 3D assets.
        *   Optimize the render loop.

4.  **CODING PHASE:**
    *   Generate a **single-file** React component.
    *   Use `lucide-react` for icons.
    *   Add `"use client"` at the top.
    *   **Imports:** Ensure correct imports from `@react-three/fiber` and `@react-three/drei`.

**Start now by asking me the questions from the INTERVIEW PHASE.**