Hero spotlight

# Prompt — Hero "spotlight" (desenfoque con foco que sigue al ratón)

Copia este prompt en tu IA (Claude, v0, Cursor, etc.). **Edita solo el bloque EDÍTAME** con tu color y tus textos. El resto reprodúcelo tal cual.

---

Crea un **hero a pantalla completa** con **HTML semántico + CSS puro + un poco de JS** (sin frameworks, un solo archivo), totalmente responsive. Respeta cada valor literal (tamaños, `clamp()`, blurs, máscaras, breakpoints); no improvises ni redondees.

## EDÍTAME (tokens)

```css
:root {
  --accent: #7A5CFF;                  /* tu color de marca */
  --accent-soft: rgba(122,92,255,.1); /* mismo color, alpha .1 */
  --ink: #0A0814;                     /* fondo oscuro (arriba) */
  --white: #ffffff;
}
```

- **Titular:** "Build the future"
- **Subtítulo:** "One platform delivers everything you need to launch."
- **Botón 1 (sólido):** "Read the docs"
- **Botón 2 (claro):** "Start building"
- **Fuente:** una grotesque (Inter o Space Grotesk de Google Fonts).

## Lo que hay que construir

**0. Header / barra de navegación.** Barra fija arriba (`position:fixed; inset:0 0 auto 0; z-index:50`), full-width, fondo oscuro casi negro (`background:#050507`), altura ~64px, `display:flex; align-items:center; justify-content:space-between`. Texto blanco, `font-weight:600; font-size:15px`. **Padding lateral generoso**: `padding:0 clamp(24px,4vw,64px)`.

- **Izquierda — logo:** icono cuadrado (~26px, marca SVG simple) + nombre de marca (`font-size:22px; font-weight:600`).
- **Centro — navegación:** fila de enlaces (`Platform`, `Solutions`, `Developers`, `Community`, `Resources` — edítalos), `gap:clamp(20px,2.5vw,40px)`. Cada enlace lleva a su derecha un cuadradito **"+"**: `width:22px; height:22px; display:inline-grid; place-items:center; background:rgba(255,255,255,.08); border-radius:4px; font-size:13px`.
- **Derecha — CTA de acento:** botón sólido `background:var(--accent); color:#fff; padding:.7em 1.1em; border-radius:6px; font-weight:600`, texto "Get started".
- En móvil (`max-width:768px`): oculta la navegación central, deja menú "+" junto al CTA.

**1. Fondo: campo de color difuminado.** Detrás de todo, contenedor a pantalla completa (`position:absolute; inset:0; overflow:hidden; container-type:inline-size`, fondo `var(--ink)`). Tres "bolas" de color (`position:absolute; border-radius:50%; left:50%; transform:translateX(-50%)`):

- clara `#ECE7FF` — `width:192%; height:153%; top:-46%`
- acento `var(--accent)` — `width:178%; height:160%; top:-95%`
- oscura `var(--ink)` — `width:210%; height:160%; top:-120%`
- blur: las dos primeras `filter: blur(clamp(60px,12cqw,172px))`; la oscura `blur(clamp(80px,16cqw,230px))`.

Encima, ruido SVG (`feTurbulence`) con `mix-blend-mode:soft-light; opacity:.15`.

**Oscurecido superior:** la parte de arriba debe fundirse fuerte a NEGRO (negro casi puro arriba → acento luminoso abajo). Overlay a pantalla completa por encima del campo de color:

```css
background: linear-gradient(to bottom, #000 0%, #000 8%, rgba(0,0,0,.65) 22%, rgba(0,0,0,0) 45%);
```

---

**Layout del hero (contenedor):** el `<section class="hero">` ocupa `min-height:100svh; position:relative; overflow:hidden; display:flex; flex-direction:column; align-items:center; justify-content:center`. Así el **titular queda centrado** verticalmente y el bloque inferior (paso 3) se ancla a la parte baja con `position:absolute`. El campo de color del paso 1 va dentro, detrás de todo.

**2. Titular + efecto "desenfoque con foco" — MECANISMO EXACTO, NO lo cambies.**

El truco NO es desenfocar el texto. Es: un titular **nítido**, y **por encima** unas capas que desenfocan TODO el titular MENOS un agujero redondo en el cursor. El agujero lo hace una máscara: en `backdrop-filter`, **zona transparente de la máscara = NO se aplica blur (círculo nítido)**, **zona negra = SÍ se aplica blur (resto borroso)**.

Estructura:

```html
<div class="hero-title">
  <h1 class="heading">Build the future</h1>
  <div class="blur blur-1"></div>
  <div class="blur blur-2"></div>
</div>
```

El `<h1>` es NÍTIDO (sin ningún `filter`) y lleva el relleno de gradiente de color que sigue al cursor (blanco en el cursor → acento al alejarse):

```css
.hero-title { position: relative; width: 100%; padding-inline: clamp(24px,4vw,64px); }
.heading {
  margin: 0; text-align: center; white-space: nowrap;
  font-weight: 400; line-height: 1; letter-spacing: -.05em;
  font-size: clamp(52px, 13vw, 224px);
  background-clip: text; -webkit-text-fill-color: transparent;
  background-image: radial-gradient(circle at var(--mx) var(--my),
    #fff 0%, #fff 44%, var(--accent) 85%, var(--accent-soft) 95%);
}
```

Las dos capas `.blur` van ENCIMA del texto y lo desenfocan salvo el agujero del cursor. **El blur lo ponen SOLO estas capas; el `<h1>` nunca lleva `filter`.**

```css
.blur { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.blur-1 {
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  -webkit-mask: radial-gradient(240px circle at var(--mx) var(--my), transparent 0%, transparent 35%, #000 90%);
          mask: radial-gradient(240px circle at var(--mx) var(--my), transparent 0%, transparent 35%, #000 90%);
}
.blur-2 {
  backdrop-filter: blur(11px); -webkit-backdrop-filter: blur(11px);
  -webkit-mask: radial-gradient(520px circle at var(--mx) var(--my), transparent 0%, transparent 28%, #000 92%);
          mask: radial-gradient(520px circle at var(--mx) var(--my), transparent 0%, transparent 28%, #000 92%);
}
```

Resultado: el titular se ve **borroso por todas partes** y solo **nítido en un círculo bajo el cursor**. Dos capas (blur suave cerca del agujero, blur fuerte lejos) para una caída natural. Si lo quieres más borroso sube los `blur()`; si el círculo nítido es muy grande/pequeño, ajusta los radios (`220px`/`480px`).

**Comportamiento del foco (`--mx` / `--my`, en px relativos al hero):**

- **Reposo = CENTRO del titular** (`--mx` = mitad del ancho, `--my` = mitad de la altura). Ahí se queda sin interacción.
- **Al cargar:** arranca con el agujero "cerrado" → el centro se ve BORROSO. Tras ~0.6s el foco se desvela en el centro (anima los radios de las máscaras de `0` a su valor, o un `opacity 0→1` de las capas invertido). Así al cargar el centro está difuminado y se revela solo.
- **Al mover el ratón sobre el hero:** el agujero sigue al cursor (desvela izquierda/derecha). Interpolación SUAVE (lerp con `requestAnimationFrame`: cada frame acerca la posición actual a la del cursor), sin saltos.
- **Al salir el ratón (`mouseleave`):** el objetivo vuelve al CENTRO y el foco regresa suave al medio.

> En móvil (`max-width:768px`): quita las capas `.blur` (titular nítido) y centra el gradiente al 50%.

---

**3. Subtítulo + 2 CTAs — ANCLADOS ABAJO (clave: NO pegados al titular).** En Sui este bloque NO va debajo del titular, va en la **parte baja** del hero, con espacio libre por debajo. El hero es el contexto (`.hero { position: relative }`); el titular queda centrado y este bloque se ancla abajo:

```css
.subhead-block {
  position: absolute; left: 0; right: 0;
  bottom: clamp(40px, 9vh, 96px);     /* deja aire por debajo, como la inspo */
  display: flex; flex-direction: column; align-items: center;
  gap: 3em;                            /* separación grande subtítulo → botones */
  z-index: 11;
}
```

- **Subtítulo** (valores exactos): `color:#fff; font-size:1.3125rem; line-height:1.2; letter-spacing:-0.026em; max-width:18em; text-align:center; font-weight:500`. (Si lo quieres más fino, baja a `400`.)
- **Botones** — grid de 2 columnas PEGADAS (`display:grid; grid-template-columns:1fr 1fr; gap:0; min-height:3em; width:auto`): sólido `background:#000; color:#fff`; claro `background:#fff; color:#000`. Ambos `padding:1em 1.875em; font-size:.875rem; line-height:1; letter-spacing:-0.005em; display:flex; align-items:center; justify-content:center; transition:.2s`.

> En móvil (`max-width:479px`): `bottom:.75em`, botones a ancho completo (`grid-template-columns:1fr`), subtítulo `font-size:.9375rem; line-height:1.4`.

## Animación de entrada

Entradas escalonadas con `fadeUp` (opacity 0→1, `translateY(2vh)→0`), easing `cubic-bezier(0.51,0,0.08,1)`, 0.2–0.8s. Respeta `prefers-reduced-motion` (desactiva blurs y deja estados finales; el titular queda nítido y centrado).

## Breakpoints

`max-width:768px` y `max-width:479px`. En móvil, si el titular es largo, permite 2 líneas (`white-space:normal`) con `font-size:clamp(48px,16vw,96px)` y `line-height:0.95`.

---

Único acento = `var(--accent)`. Cambia color y textos para hacerlo tuyo.