Ethereal Grind

## 1. Core Technology Stack
- **Framework:** React 19 with Vite (TypeScript)
- **Styling:** Tailwind CSS v4 (Utility-first, mobile-first)
- **Animation:** Framer Motion (Motion) for layout and GSAP + Lenis for smooth-scroll orchestration
- **3D Rendering:** React Three Fiber (R3F) + @react-three/drei for interactive product viewing
- **Icons:** Lucide-react (thin stroke weight)
- **State Management:** React Hooks (`useRef`, `useState`, `useScroll`, `useTransform`)

## 2. Design System & Aesthetics
- **Color Palette:**
  - Primary Background: `#FDFCFB` (Alabaster Cream)
  - Primary Text: `#1A1A1A` (Obsidian)
  - Accent 1: `#8C7851` (Raw Linen)
  - Accent 2: `#D9C5B2` (Soft Crema)
  - Border/UI: `#E5E5E5` (Light Mist)
- **Typography:**
  - Headings: `font-serif` (Playfair Display or similar) with `tracking-tighter`
  - Body: `font-sans` (Inter or Geist Sans) with `leading-relaxed`
- **Visual Style:** Minimalist, high whitespace, glassmorphism overlays (`backdrop-blur-md`), and subtle grain textures.

## 3. Section-By-Section Implementation

### A. Navigation (Sticky/Glassmorphism)
- **Layout:** Flexbox container, `h-20`, `px-8`, `justify-between`.
- **Components:** Logo (minimalist serif), links (The Process, Collections, Atmosphere), and a "Reserve a Table" CTA button with a magnetic hover effect.
- **Classes:** `bg-white/70 backdrop-blur-xl border-b border-black/5 z-50`.

### B. Hero Section (The Immersive 3D Entry)
- **Visual:** A split-screen layout. Left side features a massive `text-8xl` heading: "The Architecture of the Bean." Right side features a `Canvas` element rendering a high-fidelity 3D Coffee Bean that rotates based on mouse movement.
- **3D Element:** Use `Float` and `PresentationControls` from Drei.
- **CTA:** A secondary button with a "Play Process" icon (`Play` from lucide-react).

### C. The Process (Horizontal Scroll Reveal)
- **Concept:** A scroll-triggered horizontal section showing the journey: *Origin -> Roast -> Extraction*.
- **Implementation:** Use `framer-motion` `useScroll` and `useTransform` to translate a `flex` container horizontally.
- **Images:** 
  - Origin: `https://images.unsplash.com/photo-1559056199-641a0ac8b55e?q=80&w=2070`
  - Roast: `https://images.unsplash.com/photo-1495474472287-4d71bcdd2085?q=80&w=2070`

### D. 3D Product Showcase (Interactive Viewer)
- **Feature:** A tabbed interface to view 3D models of:
  1. **The Signature Bag:** Matte texture, gold foil accents.
  2. **The Ceramic Mug:** Minimalist handle-less design.
- **Technical:** Use `Stage` and `OrbitControls` for a studio-lighting effect. Allow users to "rotate to inspect" the roast date on the bag.

### E. Atmosphere & People (Bento Grid)
- **Layout:** A sophisticated Bento Grid using `grid-cols-12`.
- **Content:** High-performance `<video>` backgrounds of steam rising and people in a sun-drenched, modern architectural cafe space.
- **Images:**
  - Cafe Interior: `https://images.unsplash.com/photo-1554118811-1e0d58224f24?q=80&w=2047`
  - Barista: `https://images.unsplash.com/photo-1442512595331-e89e73853f31?q=80&w=2070`

## 4. Animations & Micro-Interactions
- **Entrance:** Staggered text reveal using `variants` in Framer Motion (`y: 20, opacity: 0` to `y: 0, opacity: 1`).
- **Hover States:** Buttons should use a "fill-up" background animation.
- **Cursor:** A custom "Aura" cursor that expands when hovering over 3D elements, using `mix-blend-difference`.
- **Parallax:** Subtle `y` axis movement on background images using `useScroll`.

## 5. Technical Requirements
- **Performance:** Implement `React.lazy` for the 3D Canvas. Use `Suspense` with a custom "Loading Bean" spinner.
- **Responsiveness:** 3D Canvas must resize dynamically. On mobile, replace complex 3D with high-res WebP images to maintain 90+ Lighthouse scores.
- **Accessibility:** `aria-labels` for all interactive elements; ensure color contrast ratios meet WCAG AA standards.
- **Code Quality:** Use functional components, clean `useEffect` cleanup for GSAP/Lenis, and modularized components (e.g., `Hero.tsx`, `ProductViewer.tsx`, `ProcessStep.tsx`).