(v2)
(v1)
Solo se escribe transform → cero repintado, cero layout, compositor puro.
La ROTACIÓN del fondo (--bd-rot) vive en el ::before del plano y la ESCALA
en el .bd-svg, precisamente para que el transform que escribe el motor en
el plano no las pise. Por eso el fondo se pinta en el pseudo y no en el
plano: son dos transforms independientes que no compiten.
El desplazamiento máximo debe caber en el sobredimensionado: mantén
data-layer-max ≤ --bd-bleed (110px por defecto) o se verá el borde del
plano entrar en la sección.
── CONTRASTE (la regla dura) ─────────────────────────────────────────────
Sobre navy cualquier marca CLARA sube la luminancia del fondo y se come el
contraste del texto. El listón es el color de texto más débil del sistema,
--muted-on-navy #9fb0c0, que ya parte de 8.16:1 contra navy limpio: si él
aguanta AA, aguanta todo lo demás.
Los techos de abajo NO son cálculo de servilleta: salen de medir el píxel
real. Ojo con la trampa —el compositing ocurre en espacio gamma, así que
estimar la mezcla en luz lineal exagera el daño casi 3×; en la primera
vuelta ese error dejó los fondos de navy tan tímidos que no se veían.
--bd-max-mark-navy .11 marca clara (línea, punto, nodo) sobre navy
(medido: a .20 el texto muted cae justo a 4.5)
--bd-max-wash-navy .22 lavado ancho de cian sobre navy
(medido: a .25 el texto muted cae a 4.68)
--bd-max-mark-paper .28 marca de tinta sobre papel. El papel perdona
muchísimo más: oscurecer un fondo claro apenas
mueve el contraste del texto oscuro.
Son documentación ejecutable: si subes una alfa por encima de su techo,
vuelve a medir antes de publicar. Los valores por defecto de más abajo ya
están medidos sobre texto real (ver _lab-backdrops.html): con todos ellos
los tres colores de texto del sistema pasan AA con margen incluso en el
píxel individual más desfavorable de todo el panel.
Y hay una salida de diseño mejor que bajar alfas: .bd-fade-copy vacía el
centro del fondo justo donde cae la columna de texto.
── ACCESIBILIDAD ─────────────────────────────────────────────────────────
· Los fondos son decorativos: la capa va con aria-hidden="true" en el
marcado y pointer-events:none aquí. Nunca contienen información.
· Este archivo no anima nada por su cuenta, así que no hay nada que apagar
con prefers-reduced-motion; aun así se neutralizan transforms como red
de seguridad, por si el motor se apagara a media sesión.
· forced-colors (alto contraste de Windows) → los fondos desaparecen.
· En impresión desaparecen: no gastan tinta.
========================================================================== */
/* ==========================================================================
0 · PRIMITIVAS
========================================================================== */
.bd-scene {
position: relative;
isolation: isolate; /* imprescindible: da contexto al z-index:-1 de .bd */
overflow: clip; /* recorta el sobredimensionado del fondo */
}
/* Superficies del sistema, por comodidad al montar secciones nuevas.
Cada una deja ya puesto el tema del fondo que le corresponde. */
.bd-scene--navy { background: var(--navy); color: var(--text-on-navy); }
.bd-scene--navy-2 { background: var(--navy-2); color: var(--text-on-navy); }
.bd-scene--paper { background: var(--paper); color: var(--ink); }
.bd-scene--paper-2 { background: var(--paper-2); color: var(--ink); }
.bd-scene--navy, .bd-scene--navy-2 { --bd-rgb: 246 244 241; }
.bd-scene--paper, .bd-scene--paper-2 { --bd-rgb: 10 26 47; }
.bd {
position: absolute;
inset: calc(-1 * var(--bd-bleed));
z-index: -1;
pointer-events: none;
overflow: clip;
opacity: var(--bd-a, 1);
/* --- tokens comunes --- */
--bd-bleed: 110px; /* sobredimensionado: margen para el parallax */
--bd-rgb: 246 244 241; /* color de las marcas (papel = sobre navy) */
--bd-accent-rgb: 6 214 221; /* cian de marca */
--bd-rot: 0deg; /* rotación estática del dibujo */
--bd-over: 0px; /* holgura extra del dibujo al rotarlo */
--bd-scale: 1; /* escala estática del arte SVG */
/* techos de contraste — ver cabecera, no subir sin volver a medir */
--bd-max-mark-navy: .11;
--bd-max-wash-navy: .22;
--bd-max-mark-paper: .28;
}
/* Los PLANOS. Vacíos a propósito: aquí escribe el motor su transform. */
.bd-i, .bd-i2, .bd-i3 { position: absolute; inset: 0; display: block; }
/* El pintor. Se separa del plano para que rotación y parallax no compitan. */
.bd-i::before, .bd-i2::before, .bd-i3::before,
.bd-i::after, .bd-i2::after, .bd-i3::after {
content: "";
position: absolute;
inset: calc(-1 * var(--bd-over));
transform: rotate(var(--bd-rot));
transform-origin: 50% 50%;
}
/* Anfitrión de los símbolos de patterns.svg. El símbolo no trae color:
lo pone currentColor, y el grosor --pat-w (custom property → hereda
también dentro del árbol de sombra del