דף השקה למשחק פנטזיה

Build a "Hollow Meridian Game Launch" React component.

CONCEPT: The launch site for a big-budget dark-fantasy game about a sun that stopped at noon for nine hundred years. It should feel like the first 30 seconds of a trailer: letterboxed, slow, molten, expensive.

LAYOUT & CONTENT:
- Hero (760px) with black letterbox bars top and bottom (56px); the nav lives inside the top bar: 'HOLLOW MERIDIAN' in spaced Bodoni caps, WORLD / FACTIONS / EDITIONS / MEDIA, 'PRE-ORDER' in gold.
- Scene layers (back to front): oxblood-to-ember sky gradient; a black eclipse disc with a glowing corona; far ridge; a floating outlined gold crown; mid ridge with a ruined arch; ember particles; a foreground cliff with a tiny cloaked figure.
- Centre: 'A STORY ABOUT A SUN THAT STOPPED' (letterspaced, gold), 'Hollow Meridian' at 128px in Bodoni Moda with 'Meridian' italic gold, buttons PRE-ORDER, ₪249 and WATCH THE TRAILER. Bottom left: '12.03.2027 / PC, CONSOLE'.
- THE RELIC: copy 'The crown remembers every hand.', three small stats (12 plates, 40+ hours of story, 3 endings) and a CSS 3D crown.
- Lore timeline on bone paper: 'Nine hundred years of noon.' and four eras (Year 0 The Sundering, Year 212 The Salt Choir, Year 640 The Drowned Crown, Year 901 You wake up).
- Factions: three full-height cards (The Salt Choir, Wardens of Ash, The Unmoored) each with a one-line creed and 'READ THE CODEX'.
- Editions: Standard ₪249 and Tidebound ₪389 with checklists.
- Footer: logo, studio credit (Lowtide Interactive, Lisbon), 'RATING PENDING'.

INTERACTIONS & MOTION:
- Parallax: each layer gets x = pointer * depth (-26 to 60px) through springs (stiffness 60, damping 18). With no pointer, useAnimationFrame drives a slow Lissajous drift (sin t/2600, cos t/3400) so the scene is never still. Layers are oversized by 120px so edges never show.
- Embers: a 1280x760 canvas of 90 particles rising at 0.3-1.0px per frame with sine sway and twinkle.
- Title enters from blur(8px) and 30px down over 1.6s; the eyebrow's letter-spacing tightens from 0.9em to 0.5em.
- Relic: 12 plates placed with rotateY(i*30deg) translateZ(222px), gold gradient, rune glyph and 'PLATE n', inside a perspective 1100 stage; the ring turns 360deg in 26s (CSS) and the whole stage tilts toward the cursor (springs 80/16, max 15deg).
- Timeline: a wavy SVG path draws with pathLength 0 to 1 in 2.2s when in view; eras fade up with 350ms stagger.
- Faction cards: two halo rings scale 1.15-1.3 and brighten on hover; the arrow slides 10px.
- Edition cards lift 8px on a spring (300/22).

DESIGN SYSTEM — Cinematic Epic:
- Void #120807, oxblood #2A0E0B, rust #6E1F14, ember #FF8A2A, gold #F4C77A, bone #EFE3CF, ash #9A8C7E.
- Square corners, 1px rules, light only from the eclipse and embers.
- Bodoni Moda 500 (roman + italic) for display, DM Sans for body and letterspaced labels.

CRAFT RULES:
- Motion: Framer Motion with spring physics (type: "spring") for anything interactive; ease-out cubic-bezier(0.23, 1, 0.32, 1) for entrances, under 300ms for UI feedback, exits faster than entrances. Animate transform, opacity, clip-path and SVG attributes only. Ambient loops pause or go static under prefers-reduced-motion via useReducedMotion() and a CSS media query.
- Copy: real, specific names, prices and times; no em-dashes, no lorem ipsum, no claims the business cannot back up. All brands are fictional.
- Icons: lucide-react where icons are needed; illustrations are inline SVG, CSS or canvas, no external images.
- Accessibility: real <button>/<a>/<label> elements, visible focus ring, keyboard operable, aria attributes where state changes, tabular numerals for times and prices. Nothing on the page may grab focus or scroll the window.

OUTPUT: one self-contained React component file (Tailwind CSS v4 utility classes, framer-motion, lucide-react), no external images, default export, ready to paste into a Next.js App Router page with "use client". Load any Google Font it needs with next/font/google.