# Recrea en un único archivo HTML: Flores de noche

Un fondo a pantalla completa: ramas en flor iluminadas con luz cálida sobre una oscuridad total, con unos pocos pétalos que caen despacio. Calma, lujo y un punto de asombro.

Eres un desarrollador front-end creativo senior. Genera un único `index.html` autocontenido que reproduzca exactamente la pieza descrita: mismo layout, textos, colores y comportamiento. HTML, CSS y JS en un solo archivo, sin build, sin frameworks y sin librerías. Todos los valores numéricos de este documento son definitivos: úsalos tal cual. Responde solo con el archivo completo.

## Qué es

- **El fondo es un vídeo en bucle ya generado** (9,6 s, 24 fps, 1920×1080 y 1280×720). No lo generes tú: cárgalo desde las URL de la sección «Recursos». Muestra ramas de flor encendidas por una luz cálida sobre negro, cámara fija, con pétalos sueltos que caen y se pierden. **El bucle es continuo**: el final está fundido con el principio, así que el atributo `loop` no deja costura. Es un vídeo generado con IA.
- **Encima**, un velo oscuro para legibilidad, un titular mínimo y una píldora de interfaz con progreso y botón de pausa.
- **Degradación**: sin vídeo se ve el póster; con `prefers-reduced-motion` el vídeo ni se descarga y se queda el póster.

## Recursos (vídeo y póster)

```js
const ASSETS = 'https://motionframe-two.vercel.app/assets/flores-de-noche';
```

| Archivo | Uso | Peso aprox. |
|---|---|---|
| `https://motionframe-two.vercel.app/assets/flores-de-noche/loop.webm` | VP9 1920×1080, primera opción en escritorio | 0,8 MB |
| `https://motionframe-two.vercel.app/assets/flores-de-noche/loop.mp4` | H.264 1920×1080, respaldo | 2,6 MB |
| `https://motionframe-two.vercel.app/assets/flores-de-noche/loop-720.mp4` | H.264 1280×720 para pantallas de ≤ 760 px de ancho | 0,7 MB |
| `https://motionframe-two.vercel.app/assets/flores-de-noche/poster.webp` | primer fotograma, 1920 px | 62 KB |

Si el vídeo vive en otro dominio y solo lo reproduces con `<video>` no hace falta CORS. Si prefieres alojarlo tú, copia los cuatro archivos a una carpeta pública y cambia solo `ASSETS`.

## Tokens de diseño

```css
:root{
  --fondo:#0a0705; --tinta:#faf6ee; --tinta-2:rgba(250,246,238,.72); --linea:rgba(250,246,238,.2);
  --acento:#f2c46b;
  --sans:"Inter Tight", system-ui, sans-serif;
  --curva:cubic-bezier(.16,.84,.24,1);
  --gutter:clamp(18px, 4vw, 56px);
}
```

- Fuente de Google: `Inter Tight` 500/600/700, sin cursivas, con `display=swap`. Una sola familia para todo.
- Un único color vivo (`--acento`); el resto es negro, blanco y el azul noche del propio vídeo.

## Estructura y contenido

`main.escena` a sangre (`height:100svh`, `overflow:hidden`, `isolation:isolate`, fondo `var(--fondo)`). Dentro, apilados con `position:absolute; inset:0; width:100%; height:100%; object-fit:cover`:

1. `img` póster (`alt=""`, `aria-hidden="true"`), visible desde el inicio.
2. `video` con `muted loop playsinline preload="none" aria-hidden="true" disablepictureinpicture`. Empieza con opacidad 0 y pasa a 1 en 1,2 s cuando dispara `loadeddata`, de modo que el póster nunca parpadea.
3. Un `::after` de la escena (z-index 2, `pointer-events:none`) que hace de velo:

```css
.escena::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:
    linear-gradient(90deg, rgba(10,7,5,.72) 0%, rgba(10,7,5,.38) 38%, transparent 62%),
    linear-gradient(180deg, rgba(10,7,5,.4) 0%, transparent 30%, transparent 62%, rgba(10,7,5,.66) 100%)}
```

Encima (z-index 3):

- **Titular** alineado a la izquierda, centrado en vertical (`top:50%; transform:translateY(-50%)`, `max-width:min(720px,90vw)`): `h1` «Flores <span>de noche</span>» en Inter Tight 600, `font-size: clamp(46px, 7.4vw, 124px)`, `line-height:.94`, `letter-spacing:-.045em`, `text-wrap:balance`, `text-shadow:0 2px 44px rgba(10,7,5,.55)`. El `<span>` va en `var(--acento)`.
- **Píldora** abajo a la izquierda (`justify-content:flex-start`) (margen inferior `max(26px, env(safe-area-inset-bottom))`): `display:inline-flex; gap:14px; padding:8px 8px 8px 18px; border-radius:999px; border:1px solid var(--linea); background:rgba(16,11,7,.45); backdrop-filter:blur(10px)`, texto 13 px peso 500 en `--tinta-2`. Contiene, en orden: un punto de 7 px en `--acento` con `box-shadow:0 0 12px var(--acento)` que late (opacidad 1 → .35, 2,4 s), el texto «Flores de noche», una barra de progreso de 72×1 px (relleno `--acento`, `transform:scaleX(currentTime/duration)`) y un botón redondo de 34 px con iconos SVG de pausa y reproducir.
- Entrada: el titular y la píldora suben 18 px desde opacidad 0 y blur 8 px en 1,4 s con `--curva`; la píldora con retardo de 0,5 s.

## Código clave

```js
(() => {
  const ASSETS = 'https://motionframe-two.vercel.app/assets/flores-de-noche';
  const escena = document.getElementById('escena');
  const video = document.getElementById('video');
  const poster = document.getElementById('poster');
  const pausaBtn = document.getElementById('pausa');
  const pildora = document.getElementById('pildora');
  const barraProg = document.getElementById('progreso');
  const aviso = document.getElementById('aviso');           // <p class="oculto" aria-live="polite">
  const reducido = matchMedia('(prefers-reduced-motion: reduce)');
  const movil = innerWidth <= 760;

  poster.src = `${ASSETS}/poster.webp`;

  let visible = true, pausadoUsuario = reducido.matches, cargado = false;

  function cargarVideo() {
    if (cargado || reducido.matches) return;               // movimiento reducido: solo el póster
    cargado = true;
    const fuentes = movil
      ? [['loop-720.mp4', 'video/mp4']]
      : [['loop.webm', 'video/webm; codecs=vp9'], ['loop.mp4', 'video/mp4']];
    for (const [f, tipo] of fuentes) {
      const s = document.createElement('source'); s.src = `${ASSETS}/${f}`; s.type = tipo; video.appendChild(s);
    }
    video.preload = 'auto';
    video.load();
  }

  function sincronizar() {
    const debe = visible && !document.hidden && !pausadoUsuario;
    if (debe) { cargarVideo(); if (video.paused && video.readyState >= 2) video.play().catch(() => {}); }
    else if (!video.paused) video.pause();
  }

  function marcar() {
    pausaBtn.setAttribute('aria-pressed', String(pausadoUsuario));
    pausaBtn.setAttribute('aria-label', pausadoUsuario ? 'Reproducir el fondo' : 'Pausar el fondo');
    pildora.dataset.pausa = String(pausadoUsuario);
    aviso.textContent = pausadoUsuario ? 'Fondo en pausa' : 'Fondo en reproducción';
  }

  pausaBtn.addEventListener('click', () => { pausadoUsuario = !pausadoUsuario; if (!pausadoUsuario) cargarVideo(); marcar(); sincronizar(); });
  new IntersectionObserver((es) => { visible = es[0].isIntersecting; sincronizar(); }, { threshold: 0.01 }).observe(escena);
  document.addEventListener('visibilitychange', sincronizar);
  reducido.addEventListener('change', () => { pausadoUsuario = reducido.matches; marcar(); sincronizar(); });
  video.addEventListener('loadeddata', () => { video.classList.add('listo'); sincronizar(); });

  (function tic() {
    if (video.duration) barraProg.style.transform = `scaleX(${(video.currentTime / video.duration).toFixed(4)})`;
    requestAnimationFrame(tic);
  })();

  marcar();
  if (!reducido.matches) cargarVideo();
})();
```

## Interacción

- **Pausa**: el botón detiene el vídeo y el latido del punto; al pulsarlo otra vez vuelve a reproducir. Cambia su `aria-label` entre «Pausar el fondo» y «Reproducir el fondo» y muestra el icono contrario.
- Sin ratón ni scroll: el fondo es contemplativo.

## Cómo usarlo de fondo en cualquier web

1. **Contenedor**: una `section` con `position:relative; overflow:hidden; isolation:isolate; min-height:80svh` (o `100svh`). Nunca `100vh` a secas.
2. **Vídeo**: `<video muted loop playsinline preload="none" aria-hidden="true" disablepictureinpicture>` con `position:absolute; inset:0; width:100%; height:100%; object-fit:cover`. `muted` y `playsinline` son obligatorios para que arranque en iOS y Chrome. Nunca pongas `controls` ni `autoplay` si vas a gestionar la reproducción por script.
3. **Póster**: una `img` idéntica debajo del vídeo (o el atributo `poster`), de modo que siempre hay imagen antes de que el vídeo cargue y cuando no carga.
4. **Móvil**: en ≤ 760 px de ancho carga solo `https://motionframe-two.vercel.app/assets/flores-de-noche/loop-720.mp4` (0,7 MB). En escritorio, WebM primero y MP4 de respaldo con dos `<source>`.
5. **Velo**: una capa `::after` con degradados oscuros como la de arriba, siempre. El texto va encima con `position:relative; z-index:3`. Si el texto va a la izquierda, añade `linear-gradient(90deg, rgba(10,7,5,.6), transparent 55%)`.
6. **Pausa fuera de pantalla**: `IntersectionObserver` con umbral 0,01 que llama a `video.pause()` al salir y a `video.play()` al volver; también con `document.hidden`.
7. **Movimiento reducido**: con `prefers-reduced-motion: reduce` no descargues ni reproduzcas el vídeo (`preload="none"` y no añadas los `<source>`); queda el póster. Escucha el cambio de la preferencia en caliente.
8. **Botón de pausa**: el movimiento dura más de 5 s, así que ofrece siempre un botón visible (WCAG 2.2.2).

## Adaptación a móvil y tablet

- **≤ 760 px**: el progreso mide 44 px y el titular pasa abajo (`top:auto; bottom:104px; transform:none`) y el velo pasa a vertical (`linear-gradient(180deg, rgba(10,7,5,.3) 0%, transparent 25%, rgba(10,7,5,.55) 50%, rgba(10,7,5,.88) 100%)`). La píldora sigue a la izquierda.
- `object-fit: cover` recorta los lados en vertical; la parte importante del encuadre (las ramas con flor) queda a la derecha; en móvil usa `object-position:68% 50%` para mantenerla en cuadro.
- Sin scroll horizontal de 360 a 1920 px.

## Accesibilidad y movimiento reducido

- Con `prefers-reduced-motion: reduce`: el vídeo no arranca ni se descarga, se ve el póster, sin animaciones de entrada ni latido; el botón muestra «reproducir».
- `img`, `video` y la barra de progreso llevan `aria-hidden="true"`.
- Botón real con `type="button"`, foco visible (`outline:2px solid var(--acento)`), controlable con teclado.
- Contraste: texto `#faf6ee` sobre el negro del vídeo con velo (> 12:1).

## Rendimiento

- `preload="none"` hasta que la escena es visible; solo se descarga una fuente.
- Pausa del vídeo fuera de pantalla y con la pestaña oculta.
- Peso: HTML ≈ 8 KB; vídeo 0,8 MB (WebM) o 2,6 MB (MP4) en escritorio, 0,7 MB en móvil.

## Personalización

- **Color de acento**: `#f2c46b` en `:root`. Debe ser vivo y claro (luminancia > 45 %) para leerse sobre el fondo oscuro.
- **Texto**: `Flores` y `de noche` (2–5 palabras en total) y `Flores de noche`. Para dejar solo el fondo, borra `header.titular` y la píldora.
- **Virar el color**: `filter: hue-rotate(-20deg) saturate(.9)` sobre el `<video>` y el póster desplaza el dorado hacia rojos sin tocar el archivo.
- **Más calma**: `video.playbackRate = 0.75` en `loadeddata`.
- **Alojamiento propio**: descarga los cuatro archivos y cambia solo `ASSETS`.

## Comprobación final

1. El vídeo llena la pantalla sin bordes en 1440×900, 390×844 y 1920×1080 y el vídeo vuelve a empezar sin salto visible.
2. Sin errores en consola; en la pestaña de red se pide un solo vídeo.
3. El texto se lee con claridad sobre el negro de la izquierda y la píldora no tapa las flores.
4. El botón de pausa detiene el vídeo y cambia su etiqueta accesible.
5. Con movimiento reducido solo se ve el póster y no se descarga el vídeo.
6. Al hacer scroll fuera de la escena o cambiar de pestaña, el vídeo se pausa.
7. En móvil se descarga `loop-720.mp4` y no hay scroll horizontal.