/* ═══════════════════════════════════════════════════════ 09-luz.css — El resto del sitio: un scroll que se enciende. La portada se ve la foto limpia (08-fondo.css). De ahí para abajo el sitio es un solo recorrido: cada sección llega en penumbra y se va iluminando conforme sube por la pantalla, y el velo que separa el texto de la foto se abre poco a poco mientras más bajas. No hay saltos ni apariciones de golpe: la luz sigue al dedo. Dos fichas mandan todo, y las escribe assets/js/sitio.js: --luz (por sección) 0 = apagada, 1 = encendida del todo --avance (global) 0 = arriba de la página, 1 = abajo Sin JS, sin o con "reducir movimiento" activado, todo queda encendido y quieto: el sitio se lee igual. ═══════════════════════════════════════════════════════ */ :root{ --avance:0; } /* ── cada sección se apoya en su velo ──────────────────────── El velo se abre poco a poco: abajo del sitio pasa más luz de la foto que arriba. */ main > .seccion::after{ content:""; position:absolute; z-index:-2; pointer-events:none; top:0; bottom:0; left:50%; width:100vw; transform:translateX(-50%); background:var(--velo-seccion); opacity:calc(1 - var(--avance) * .10); } .remate{ background:var(--velo-seccion); } /* ── el encendido, sección por sección ─────────────────────── Solo se activa cuando sitio.js pone .luz en . */ html.luz main > .seccion, html.luz .remate{ --luz:0; opacity:calc(.24 + .76 * var(--luz)); transform:translate3d(0,calc((1 - var(--luz)) * 20px),0); } /* la portada no se atenúa nunca: es lo primero que se ve */ html.luz main > .portada{ opacity:1; transform:none; } /* ── sin movimiento: todo encendido y quieto ─────────────── */ @media (prefers-reduced-motion:reduce){ html.luz main > .seccion, html.luz .remate{ opacity:1; transform:none; } }