Cinematic Product Header With X-Ray Spotlight

You are an expert React + CSS developer specializing in high-fidelity, interactive product hero sections. Build a full-viewport, cinematic e-bike header with a signature cursor-driven "x-ray spotlight" effect: as the user moves their mouse, a radial reveal mask wipes away the bike's exterior photo to expose the internal carbon frame and gearbox structure underneath.

# Technical constraints

- **React only** — client component using `useRef`, `useState`, `MouseEvent`. Zero animation libraries (no Framer Motion, GSAP, or icon packs). All motion is pure CSS keyframes + inline `mask-image`.
- **Single font**: Almarai (weights 300, 400, 700, 800) imported via Google Fonts inside a scoped `<style>` block. Font stack: `"Almarai","Helvetica Neue",Helvetica,Arial,sans-serif`. Apply `-webkit-font-smoothing: antialiased`.
- **Scoped reset**: `box-sizing: border-box` and the `@import` scoped to `.vt-header` only — never touch global `body` or `html`.

# Layout blueprint

Root `<header className="vt-header">` tracks mouse (`onMouseEnter`, `onMouseMove`, `onMouseLeave`).

```
position: relative;
display: flex;
flex-direction: column;
min-height: 100vh;
overflow: hidden;
padding: 32px 56px 44px;
background-color: #272727;
color: #fff;
```

Vertical flow: **top nav** → **flex-grow spacer** (`.vt-stage`) → **bottom content** pinned to baseline.

## 1. Reveal background (`.vt-bg`)

Absolute `inset: 0; z-index: 0; pointer-events: none`. Three stacked layers:

1. **Base exterior** (`.vt-bg-img`): `<img>` with `object-fit: cover; object-position: center; user-select: none; -webkit-user-drag: none; referrerPolicy="no-referrer"`. URL:
   ```
   https://cdn.jiro.build/ARS/OBLT%20E%20Bike/bike-exterior.png
   ```

2. **X-ray reveal layer** (`.vt-bg-xray`, `z-index: 1`): contains the internals image (same cover/center sizing). This layer is **masked by an inline radial gradient** driven by cursor position. Apply:
   ```
   will-change: -webkit-mask-image, mask-image;
   transition: -webkit-mask-image .12s linear, mask-image .12s linear;
   ```
   Internals image URL:
   ```
   https://cdn.jiro.build/ARS/OBLT%20E%20Bike/bike-xray-original.png
   ```

3. **Veil overlay** (`.vt-bg-veil`, `z-index: 2`): darkening gradient for text legibility:
   ```
   background: linear-gradient(180deg, rgba(39,38,38,.62) 0%, rgba(39,38,38,.10) 26%, rgba(39,38,38,.10) 60%, rgba(39,38,38,.82) 100%);
   ```

## 2. Top nav (`.vt-nav`, `z-index: 30`)

```css
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
gap: 24px;
```

- **Logo** (left, `.vt-logo`): text `{{brand-name}}` + `<span>.</span>`. Style: `font-size: 28px; font-weight: 700; letter-spacing: 0.5px; color: #E0E1CC;`.
- **Center menu** (`.vt-menu`, `gap: 40px`): links `E-bikes`, `Features`, `Connect`. Each: `font-size: 16px; font-weight: 400; letter-spacing: .3px; color: #E0E1CC; opacity: .85;` → hover `opacity: 1` (`.2s ease`).
- **Right cluster** (`.vt-nav-right`, `gap: 18px`):
  - `.vt-explore` link: `Explore the bike` — `font-size: 14px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: #E0E1CC;` → hover `opacity: .65`.
  - **Hamburger** (`.vt-burger`, hidden desktop): 34×34px button, three bars (22×2px, `#E0E1CC`, `border-radius: 2px`, `gap: 5px`). On `.open`: bar 1 `translateY(7px) rotate(45deg)`, bar 2 `opacity: 0`, bar 3 `translateY(-7px) rotate(-45deg)`. Transition: `transform .25s ease, opacity .2s ease`.

**Mobile dropdown** (`.vt-mobile-menu`, rendered when `menuOpen`):
```css
position: absolute;
top: 100%;
margin-top: 16px;
z-index: 40;
background: rgba(20,19,19,.97);
backdrop-filter: blur(10px);
border: 1px solid rgba(255,255,255,.1);
border-radius: 16px;
padding: 8px 18px;
```
Links (`E-bikes`, `Features`, `Connect`, `Explore the bike`): `color: #E0E1CC; font-size: 18px; padding: 14px 4px; border-bottom: 1px solid rgba(255,255,255,.08);`. Last link: `border-bottom: none; font-weight: 700`. Each link closes menu on click.

## 3. Stage spacer (`.vt-stage`)

```css
flex: 1 1 0%;
display: flex;
align-items: flex-start;
justify-content: flex-end;
padding-top: 22px;
```
Render as empty `<div aria-hidden="true" />` spacer.

## 4. Bottom content (`.vt-bottom`, `z-index: 30`)

12-column grid:
```css
display: grid;
grid-template-columns: repeat(12, 1fr);
align-items: end;
gap: 18px 32px;
```

- **Headline** (`.vt-headline`, `grid-column: 1 / span 8`):
  ```html
  <h1 style="color:#E0E1CC; font-weight:500; font-size:clamp(36px,7vw,116px); line-height:0.85; letter-spacing:-0.07em; white-space:nowrap; margin:0;">
    <WordsPullUp text="{{headline}}" />
  </h1>
  ```

- **Right block** (`.vt-right`, `grid-column: 9 / span 4; align-self: end; transform: translateY(22px);`):
  - Paragraph: `{{tagline}}`. Style: `font-size: 16px; line-height: 1.2; color: rgba(225,224,204,.7);`. Animate: `vtFadeUp .8s cubic-bezier(.16,1,.3,1) both; animation-delay: .5s;`.
  - **CTA button** (`.vt-cta`):
    ```css
    color: #000;
    background: #E0E1CC;
    border: none;
    border-radius: 9999px;
    padding: 6px 6px 6px 22px;
    font-size: clamp(14px, 1vw, 16px);
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    animation: vtFadeUp .8s cubic-bezier(.16,1,.3,1) both;
    animation-delay: .7s;
    ```
    Label: `{{cta-label}}`. Hover → `gap: 14px`.
    Inner circle `.circ` (40×40px, `border-radius: 50%; background: #000;`): on button hover scale to `1.1` (`.25s ease`).
    Inline SVG arrow (16×16, `viewBox="0 0 24 24"`, `stroke="currentColor"`, `stroke-width="2.2"`, round caps/joins):
    ```html
    <path d="M5 12h14M13 6l6 6-6 6" />
    ```

# Cursor x-ray spotlight (signature interaction)

**State**: `hovering` (bool), `pos` ({x, y} in px relative to section rect).

**Constants**: `RADIUS = 165`, `FEATHER = 45`. Inner solid radius = 120px.

**Logic**: On `handleMove`, compute `e.clientX - rect.left`, `e.clientY - rect.top`.

**Mask (inline style on `.vt-bg-xray`)**:
- **Hovering**:
  ```css
  maskImage: radial-gradient(circle 165px at {x}px {y}px, #000 0, #000 120px, transparent 165px);
  WebkitMaskImage: radial-gradient(circle 165px at {x}px {y}px, #000 0, #000 120px, transparent 165px);
  ```
- **Not hovering** (collapsed):
  ```css
  maskImage: radial-gradient(circle 0px at 50% 50%, transparent 0, transparent 0);
  WebkitMaskImage: radial-gradient(circle 0px at 50% 50%, transparent 0, transparent 0);
  ```

**Key**: Opaque `#000` in the mask REVEALS the layer; transparent hides it. The 45px feather (120–165px) is the soft edge.

# Animations

## WordsPullUp component

Splits text on spaces; each word is `display: inline-block; margin-right: 0.22em;` (last word 0). Animate each with staggered delay:

```css
@keyframes wpuUp {
  from { transform: translateY(20px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}
```
Duration: `0.6s cubic-bezier(.16,1,.3,1) both`; delay per word: `i × 0.08s`.

Respect `@media (prefers-reduced-motion: reduce)` → `.wpu-word { animation: none; }`.

## vtFadeUp (right block)

```css
@keyframes vtFadeUp {
  from { transform: translateY(20px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}
```

# Responsive

**≤1000px**:
```css
padding: 24px 28px 32px;
.vt-nav { grid-template-columns: 1fr auto; }
.vt-menu, .vt-explore { display: none; }
.vt-burger { display: flex; }
.vt-bottom { grid-template-columns: 1fr; gap: 16px; }
.vt-headline, .vt-right { grid-column: 1 / -1; }
.vt-right { transform: none; align-self: start; margin-top: 4px; max-width: 520px; }
```

**≤600px**:
```css
padding: 18px 20px 26px;
.vt-logo { font-size: 22px; }
.vt-headline h1 { white-space: normal; font-size: clamp(40px, 13vw, 72px); line-height: 0.92; }
.vt-right p { font-size: 15px; margin-bottom: 16px; }
.vt-cta { font-size: 14px; padding: 5px 5px 5px 20px; }
.vt-cta .circ { width: 36px; height: 36px; }
```

# Critical pitfalls

1. **Mask polarity**: `#000` (opaque) REVEALS the x-ray layer; `transparent` hides it. Inverting this shows internals everywhere except under the cursor.
2. **Coordinates**: Mouse position must be relative to section rect (`getBoundingClientRect`), not viewport.
3. **Mask transition**: `.12s linear` only — longer/eased transitions create lag.
4. **Feather math**: Inner stop at `RADIUS - FEATHER` (120px), outer at `RADIUS` (165px).
5. **Scope**: All fonts and resets scoped to `.vt-header` — never touch global styles.

# Integration

- Create a **new** component file; do not overwrite existing files.
- Render **after** all existing sections — keep every prior section intact.
- If no project exists, scaffold a minimal React app; if one exists, use it as-is.
- Install only the libraries this section requires (React is already present).
- Set page title: `{{brand-name}} — {{headline}}`.

# Variables

- **{{brand-name}}**: Brand name (e.g., "OBLT").
- **{{headline}}**: Hero headline (e.g., "Ready For The Ride").
- **{{tagline}}**: Supporting copy below the headline (e.g., "An integrated gearbox, battery, and motor engineered in carbon and built to be seen. Every system, in the open.").
- **{{cta-label}}**: CTA button text (e.g., "Reserve yours").