Cinematic 3D Watch Story (Apple Pro-Grade Scrollytelling)

Build a complete, production-ready, Apple Pro-caliber cinematic 3D scrollytelling web application for "CHRONO-CYBER" — an avant-garde concept futuristic titanium wristwatch. The project must be built using Vite + React 18 + TypeScript + Tailwind CSS + GSAP ScrollTrigger + Lenis Smooth Scroll + Lucide Icons.

Language & Internationalization:
- Strictly English (US/Global Haute Horlogerie luxury standard) for all copy, headlines, HUD telemetry, modals, and notifications.

Design System & Aesthetic Guidelines:
- Color Palette:
  - Background Void: #070709
  - Deep Obsidian Surface: #0f1015
  - Primary Accent & Glow: Cyber Cyan (#00f0ff)
  - Secondary Accent: Neon Hyper-Violet (#8a2be2)
  - Pure White Typography: #f5f5f7
  - Muted Titanium Gray: #86868b
- Typography:
  - Display / Headlines: Syne (sans-serif, bold geometric wide)
  - Telemetry HUD & Metrics: JetBrains Mono (monospace)
  - Body Text: Inter (clean neo-grotesque)
- Design Tokens:
  - Ultra-thin 1px borders with glassmorphism (rgba(255, 255, 255, 0.08)) and backdrop-filter blur.
  - Cybernetic corner brackets, HUD crosshair markers, and scanlines overlay.

Technical Architecture & Components:

1. Smooth Scroll Engine:
   - Integrate Lenis smooth scrolling with inertia-based momentum.
   - Synchronize Lenis scroll updates directly with GSAP ScrollTrigger ticker.

2. Scrollytelling Canvas Video Scrubber Engine:
   - A sticky full-screen HTML5 <canvas> element pinned with GSAP ScrollTrigger over the scroll container.
   - Preloads and seamlessly scrubs through 5 cinematic MP4 video acts located in `public/videos/`:
     - Act 01 (0.00 - 0.20): Genesis Awakening (`/videos/act1.mp4`)
     - Act 02 (0.20 - 0.45): 360° Orbital Anatomy (`/videos/act2.mp4`)
     - Act 03 (0.45 - 0.70): Exploded Quantum Caliber CX-01 (`/videos/act3.mp4`)
     - Act 04 (0.70 - 0.88): Hydro-Shield 300M Pressure Barrier (`/videos/act4.mp4`)
     - Act 05 (0.88 - 1.00): The Horizon Monolithic Convergence (`/videos/act5.mp4`)
   - Implements Retina DPR scaling (`window.devicePixelRatio`) and mathematical center-fit cover calculation so videos are sharp and perfectly framed on both mobile and ultra-wide viewports.
   - Dual-mode controls: manual scroll-scrubbing + a hands-free Auto-Play/Pause toggle on the bottom floating HUD controller with chapter indicators (01 to 05) and scroll percentage.
   - Includes procedural fallback animation while video assets buffer.

3. Foreground Narrative Chapter Sections:
   - Layered over the sticky canvas with pointer-events-none on containers and pointer-events-auto on interactive cards.
   - Act 01: Headline "TIME. RE-ENGINEERED.", Frequency: 28,800 VPH (4 Hz), Global Allocation: 100 Pieces, CHRONO-ISO Cryogenic Certification.
   - Act 02: "Grade 5 Titanium & Monolithic Facets", 5-axis CNC machining, 42.0mm case, double-domed sapphire crystal, vulcanized FKM strap.
   - Act 03: "280 Micro-Components. Zero Gravity.", Caliber CX-01 in-house skeletonized tourbillon, 72-Hour dual-barrel reserve, 38 synthetic ruby bearings.
   - Act 04: "30 ATM Hydro-Pressure Barrier", 300-meter diving depth, helium valve, hydrophobic nanotech crystal treatment.
   - Act 05: "CLAIM YOUR TIME HORIZON", interactive allocation counter (Edition: 100, Allocated: 078, Remaining: 022), with "Reserve Allocation ($14,500)" CTA button.

4. Command Palette / Live Search Modal (⌘K / Ctrl+K):
   - Categorized tabs: "All", "Models", "Specifications", "Materials", "Story Acts".
   - CRITICAL REQUIREMENT: When opened with an empty search query, each tab MUST display rich curated default suggestions (e.g., featured models with price, engineering calibers, aerospace alloys, chapter jump links). Never display an empty state upon opening.
   - In Live Mode, as the user types, instantaneously filter results in real-time across titles, descriptions, technical metrics, and tags with category badges and matching highlights.
   - Full keyboard navigation: ArrowUp/Down to navigate, Enter to select/jump, Escape to dismiss.
   - Selecting any search result either smoothly scrolls to that chapter or opens the Spec Inspector modal.

5. Dynamic HUD Telemetry & Native Web Audio:
   - Real-time Atomic Clock in header displaying live milliseconds (HH:MM:SS:MS).
   - Audio synthesizer built with native Web Audio API (zero audio file dependencies): generates tactile mechanical tourbillon ratchet clicks on scroll/interaction and an ambient sub-bass drone when sound is enabled.
   - Audio toggle in header with animated equalizer wave bars.
   - Interactive 3D Hotspot pins rendered over the watch that open deep technical inspection dossiers.

6. Spec Inspector & Reservation Modals:
   - Spec Inspector: Displays engineering telemetry, component IDs, tolerance metrics, and direct chapter jump buttons.
   - Reservation Modal: Model selector (Onyx, Titanium Ghost, CX-Tourbillon Zero-G), strap colorway switcher, client information form, and instant confirmation displaying an allocated serial number (e.g., #CC-079/100).

7. Performance Requirements:
   - 60+ FPS smooth scrolling with zero layout shifts.
   - Clean, modular TypeScript structure with strict typing and zero build warnings.