Baseline — Tennis Club & Academy — Référence de design web et prompt

# Recreate this site as a single HTML file: Baseline — Tennis Club & Academy

You are an expert creative front-end developer. Produce a single self-contained `index.html` that reproduces the project below exactly — same layout, sections, visuals, motion, and interaction. Pure HTML/CSS/JS in one file: no build step, no framework, no bundler. Use ES modules with a CDN importmap for the one library used (Lenis, for smooth scroll). Hardcode every value given here as a fixed constant. Reproduce all spring/text animation with plain JS (a tiny rAF spring helper) and CSS — same feel, no React, no @react-spring, no spring-text-engine.

## What it is

A single-screen-then-scroll marketing landing page for **"Baseline" — a members' tennis club & academy** ("Baseline Tennis Club & Academy"). The look is editorial and confident: a deep-navy full-bleed hero with a parallax on-court photo, an oversized uppercase headline that reveals word-by-word from behind a clipping mask, then a stack of light/dark sections (a "trusted by" coach carousel with giant ghost words, a numbered programs list, two tilted court photo cards, a 4-up stats band on navy, a 3-up testimonials grid, and a navy footer). It opens with a **navy intro loader** (wordmark + a filling progress bar) that slides up to reveal the hero, at which point the hero's text and cards animate in. Smooth scrolling is driven by **Lenis**. Motion everywhere is spring-based: scroll-triggered reveals (clip-mask slide-ups, fade-and-rise), hover micro-interactions (arrows nudge, cards lift/scale, icons rotate/scale), parallax tied to scroll progress, and two auto/manual carousels.

The whole layout is **rem-based and adaptively scaled**: the root `font-size` is recomputed from the viewport width so the design stays proportional at every size (scales down below 1920px via `vw` media queries, scales up above 1920px via JS). Treat almost every dimension as `rem`.

## Page shell & libraries