Obsidian Hero

Build a high-performance, agency-grade Hero section called "Obsidian Hero" in React 19, TypeScript, and Tailwind CSS with Framer Motion.

## 1. Overview & Visual Objective
Create a single-page architecture / design studio landing page using React, Vite, TypeScript, and Tailwind CSS. The page is a fullscreen hero with a looping background video, overlaid navigation, headline, and two staggered project cards.

Visual Aesthetics & Mood:
fullscreen looping video backdrop dark architectural studio mood overlaid navigation large headline two staggered overlapping project cards asymmetric composition rounded geometric logo mark clean modern sans-serif minimal moody cinematic sophisticated gallery-like restrained elegant depth

## 2. Technical Stack & Dependencies
- Framework: React 19 + TypeScript + Vite
- Styling: Tailwind CSS v4 + Lucide React icons
- Animation Engine: Framer Motion (layout animations, spring physics, scroll-linked parallax)