Obsidian Orbit. Built from one prompt.

Build a single full-screen hero landing page for a design-engineering studio called "OBSIDIAN ORBIT" using React, TypeScript, Vite, Tailwind CSS, and @react-three/fiber.

FONTS: Load "Space Grotesk" (weights 400, 500, 700) from Google Fonts. Define `.font-grotesk { font-family: 'Space Grotesk', sans-serif; }` in src/styles.css. Everything uses it.

3D SCENE (background, z-0): a full-screen `<Canvas camera={{ position: [0, 0, 6], fov: 45 }}>` from @react-three/fiber containing:
- A `<torusKnotGeometry args={[1.6, 0.42, 220, 32]} />` mesh with `<meshStandardMaterial metalness={1} roughness={0.15} color="#c9ced6" />`
- The mesh rotates continuously in `useFrame`: `mesh.rotation.x += delta * 0.12; mesh.rotation.y += delta * 0.18`
- Lights: `<ambientLight intensity={0.25} />` + two `<pointLight>`s at `position={[6, 4, 8]}` (intensity 2.2, color "#ffffff") and `position={[-6, -3, -4]}` (intensity 1.4, color "#4457ff")
- Page background pure black: `bg-black` on the section, canvas `absolute inset-0 z-0`

NAVBAR (absolute top, z-20, `px-6 sm:px-10 py-6`, flex justify-between items-center):
- Left: "OBSIDIAN ORBIT" in `text-[15px] tracking-[0.35em] text-white font-medium uppercase`
- Right: links "Work", "Method", "Contact" in `text-[13px] tracking-[0.2em] text-white/60 uppercase`, gap-8, `hover:text-white transition-colors`

HERO CONTENT (relative z-10, h-screen, flex flex-col items-center justify-center, text-center, pointer-events-none):
- Kicker: "Design engineering for gravity-defying brands" in `text-[12px] sm:text-[13px] tracking-[0.4em] uppercase text-white/50 mb-8`
- Headline, two lines: "Mass follows" / "momentum." in `text-[clamp(3.2rem,10vw,8.5rem)] leading-[0.9] tracking-[-3px] text-white font-bold`
- Sub: "We build interfaces with real physical presence — engineered in the browser, rendered in real time." in `text-white/60 text-sm sm:text-base max-w-md mt-8 leading-relaxed`
- CTA row (mt-10, flex gap-4, pointer-events-auto): "Enter the lab" as `bg-white text-black rounded-full px-7 py-3 text-[13px] tracking-widest uppercase hover:bg-white/80 transition-colors`, and "Manifesto" as `border border-white/25 text-white rounded-full px-7 py-3 text-[13px] tracking-widest uppercase hover:border-white/60 transition-colors`

ENTRANCE ANIMATION (define in src/styles.css):
```css
@keyframes rise-soft {
  from { opacity: 0; transform: translateY(26px); filter: blur(6px); }
  to { opacity: 1; transform: translateY(0); filter: blur(0); }
}
```
Classes `.rise-1` through `.rise-4` apply `animation: rise-soft 0.9s cubic-bezier(0.22,1,0.36,1) forwards` with delays 0.1s/0.25s/0.4s/0.55s, each starting `opacity: 0`. Kicker=rise-1, headline=rise-2, sub=rise-3, CTAs=rise-4.

FOOTER STRIP (absolute bottom-0, w-full, z-10, flex justify-between px-6 sm:px-10 pb-6, `text-[11px] tracking-[0.25em] uppercase text-white/40`): left "EST. 2019 — BERLIN / SEOUL", right "SCROLL IS OVERRATED". No routing, single App.tsx plus src/styles.css.

three.jsr3fdarktypography