Aethera

# Aethera — Cinematic Hero with Looping Video Background

## Goal
Build a fullscreen single-page hero section for a studio called "Aethera" with React + Vite + TypeScript + Tailwind CSS. One viewport, nothing else: a navbar, a centred headline block, and a looping video that occupies the lower part of the frame and dissolves into the white page at both ends.

## Fonts (`src/styles/fonts.css`)
- Display text (headings, logo): **Instrument Serif**.
- Body text (navigation, descriptions): **Inter**.
- Import both in `src/styles/fonts.css`, and expose them through Tailwind's `fontFamily` as `font-serif` / `font-sans`.

## Colours
- Background: white `#FFFFFF` — register it as a Tailwind colour token named `background`, the gradient overlay below is written against it.
- Headlines, logo, buttons: black `#000000`.
- Descriptions, inactive menu items, the italic emphasis inside the headline: grey `#6F6F6F`.
- Button label: white `#FFFFFF`.

## Video background (z-0)
- URL (exact): `https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260328_083109_283f3553-e28f-428b-a723-d639c617eb2b.mp4`
- Position: `inset: 'auto 0 0 0'` with `top: '300px'` — the band runs full width from 300px down to the bottom edge. The video fills it with `object-cover`.
- Attributes: `autoPlay muted playsInline`. **No `loop` attribute** — the loop is written by hand.
- Custom fade-in/fade-out loop with `useEffect` + `useRef`:
  - a `requestAnimationFrame` loop reads `currentTime` and `duration` every frame and writes `opacity` directly on the element;
  - fade in over 0.5s at the start (opacity 0 → 1), fade out over the 0.5s before the end (1 → 0);
  - on the `ended` event: set opacity to 0, wait 100ms, reset `currentTime = 0`, then `play()` again.
  - The result is a seamless manual loop — the native `loop` attribute hard-cuts at the seam.
- Gradient overlay over the video: `absolute inset-0 bg-gradient-to-b from-background via-transparent to-background`.

## Navigation bar (z-10)
Layout: `flex justify-between`, `px-8 py-6`, `max-w-7xl mx-auto`.

- **Logo**: "Aethera®" — the registered trademark symbol is a `<sup>`. Instrument Serif, `text-3xl tracking-tight`, colour `#000000`.
- **Menu items**: Home (`#000000`), Studio, About, Journal, Reach Us (all `#6F6F6F`). Each `text-sm` with `transition-colors` to black on hover. Five links do not fit at 375px — hide the row below `md` and keep logo plus CTA.
- **CTA button**: "Begin Journey" — `rounded-full px-6 py-2.5 text-sm`, black background, white text, hover scale 1.03.

## Hero section (z-10)
Positioning: `paddingTop: 'calc(8rem - 75px)'`, `pb-40`. Layout: `flex flex-col items-center justify-center text-center`, `px-6`.

**Headline**
- Text: "Beyond silence, we build the eternal."
- `text-5xl sm:text-7xl md:text-8xl`, `max-w-7xl`, `font-normal`, Instrument Serif.
- Line height `0.95`, letter spacing `-2.46px`.
- `#000000` for the main text; the emphasised words "silence," and "the eternal." are italic `#6F6F6F`.
- Animation: `animate-fade-rise`.

**Description**
- Text: "Building platforms for brilliant minds, fearless makers, and thoughtful souls. Through the noise, we craft digital havens for deep work and pure flows."
- `text-base sm:text-lg`, `max-w-2xl`, `mt-8`, `leading-relaxed`, colour `#6F6F6F`.
- Animation: `animate-fade-rise-delay`.

**CTA button**
- Text: "Begin Journey" — `rounded-full px-14 py-5 text-base mt-12`, black background, white text, hover scale 1.03.
- Animation: `animate-fade-rise-delay-2`.

## Animations (`src/styles/theme.css`)
- `fade-rise`: opacity 0 → 1, `translateY(20px)` → `0`, duration 0.8s, `ease-out`.
- `fade-rise-delay`: same, 0.2s delay.
- `fade-rise-delay-2`: same, 0.4s delay.

## Layout structure
```
relative min-h-screen w-full overflow-hidden   ← container
  └ video layer (z-0) + gradient overlay
  └ nav (z-10)
  └ hero (z-10)
```

## Quality Bar
- TypeScript strict, zero `any`. Tailwind only — no CSS beyond `fonts.css` and `theme.css`; the three fade animations and the `background` colour live in `tailwind.config`.
- Autoplay only works while the element is genuinely `muted` and `playsInline` — keep both. Give the video `aria-hidden`; it is decoration and never the only carrier of meaning.
- Clean up in the `useEffect` teardown: `cancelAnimationFrame` and the pending 100ms timer, or a fast unmount leaves a frame loop running against a detached element.
- Start the video at opacity 0. The rAF loop is what raises it — paint it at full opacity first and the fade-in you just wrote never happens on the first pass.
- Respect `prefers-reduced-motion`: skip the whole loop, hold a still frame at full opacity, and disable the three entrances. Their fill mode is `both`, so suppressing the animation alone is not enough — make sure the text still lands visible.
- Watch the payload: a full-resolution source video will dominate page weight. Downscale to the rendered size, drop the audio track that muted playback never uses, and serve a compressed derivative.
- Black type sits on the footage with only that gradient between them. It holds because the top of this frame is pale sky and the overlay keeps the first 300px near-white — check contrast against the actual video before swapping the source.