llevan data-layer="1|2|3", que NO son factores de
parallax sino los índices de profundidad que trae el sprite scenes.svg.
Ahí no hay data-parallax-scene, así que motion2 nunca los registra: son
inertes y no cuestan nada. Se dejan como están.
------------------------------------------------------------------------- */
.art-plane { display: block; }
/* --- 13.8 · MOVIMIENTO REDUCIDO ------------------------------------------
motion2.js no arranca con reduced-motion, así que trazos y capas ya quedan
completos; esto solo cubre el caso de que el usuario lo active en vivo. */
@media (prefers-reduced-motion: reduce) {
.flow-line--draw > svg line {
stroke-dasharray: none !important;
stroke-dashoffset: 0 !important;
}
.art-plane { transform: none !important; }
}
/* ==========================================================================
14 · FONDO CON MÁSCARA + PARALLAX — corrección de rasterizado
--------------------------------------------------------------------------
PROBLEMA MEDIDO. Un `.bd` que lleva máscara (`.bd-fade-y`) y además tiene
planos que se mueven (`data-layer`) repinta el dibujo ENTERO en cada paso
del parallax. La máscara obliga a rasterizar todo el subárbol en un único
destino, así que los planos dejan de componerse por separado: el
`will-change: transform` que ya traen no sirve de nada, porque el trabajo
no está en la capa sino en el destino de la máscara.
MEDIDO (scroll continuo de 3 s, 1440×900, p95 de frame / frames > 20 ms):
antes después
/insights ondas 33.3 ms / 9 16.7 ms / 0
/work puntos 16.8 ms / 6 16.8 ms / 0
/careers puntos 16.8 ms / 8 16.7 ms / 0
/community puntos 16.8 ms / 8 16.8 ms / 0
/insights era el único que rompía el listón de p95 porque `bd-waves` son
20 + 10 curvas largas trazadas sobre 1660×1149: el repintado más caro del
sistema. En los tres de puntos el mismo fallo solo se veía en la cola
(frames sueltos de 50 ms), pero es exactamente el mismo mecanismo.
ARREGLO. La máscara baja del contenedor a cada plano. Geometría idéntica
(los planos son `inset: 0` del `.bd`, y `--bd-fade` se hereda), pero ahora
cada plano vuelve a ser una capa compuesta independiente y el parallax es
de nuevo compositor puro. El degradado viaja con su plano; a la amplitud
real (`data-layer-max` ≤ 80 px sobre una banda de desvanecido de ~184 px
al 5-9 % de alfa) el desplazamiento no es perceptible — comprobado a 1440
y 390.
El `:has()` es la condición exacta: solo actúa cuando hay máscara Y hay
planos en movimiento. Un fondo con máscara y quieto no paga nada y se
queda como está.
------------------------------------------------------------------------- */
.bd-fade-y:has(> [data-layer]) { -webkit-mask-image: none; mask-image: none; }
.bd-fade-y:has(> [data-layer]) > .bd-i,
.bd-fade-y:has(> [data-layer]) > .bd-i2,
.bd-fade-y:has(> [data-layer]) > .bd-i3 {
-webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 var(--bd-fade), #000 calc(100% - var(--bd-fade)), transparent 100%);
mask-image: linear-gradient(to bottom, transparent 0, #000 var(--bd-fade), #000 calc(100% - var(--bd-fade)), transparent 100%);
}
/* ==========================================================================
14 · CORRECCIONES DE DIRECCIÓN DE ARTE (pase de revisión nivel 2)
Tres arreglos de LEGIBILIDAD sobre la aplicación de la fundación. Todo
aditivo: ni un token nuevo, ni una palabra de copy tocada.
========================================================================== */
/* --- 14.1 · EL CIRCUITO NO PASA POR ENCIMA DEL TEXTO (systems · mind-os) ---
Medido: sobre papel las trazas de bd-circuit llegan a 1.4-1.6 de contraste
contra el papel — cuatro veces la tinta de bd-dots (1.03-1.07), que es la
referencia que SÍ funciona en el sitio. A esa fuerza una traza de 1px deja
de ser textura y se lee como un tachón cruzando el titular y el párrafo:
en /mind-os §04 y /systems §03 las trazas cortaban «See your whole
operation.» y «Each application owns a clear job…» a 1440 y a 390.
ARREGLO. No se baja la alfa —eso mataría el motivo, que en las páginas de
producto es el correcto— sino que se cambia la máscara: bd-fade-y (que
solo desvanece arriba y abajo) se sustituye por el vaciado elíptico que la
propia cabecera de backdrops.css recomienda como primera opción. El dibujo
se conserva entero en los márgenes, donde acompaña al diagrama, y sale de
la columna de texto. Elipse desplazada a 42% porque en ambas páginas la
copia vive en la mitad izquierda y la escena en la derecha.
------------------------------------------------------------------------- */
.bd-circuit.bd-on-paper.bd-fade-y {
-webkit-mask-image: radial-gradient(ellipse 62% 78% at 42% 50%, transparent 0%, rgb(0 0 0 / .14) 48%, #000 90%);
mask-image: radial-gradient(ellipse 62% 78% at 42% 50%, transparent 0%, rgb(0 0 0 / .14) 48%, #000 90%);
}
/* Bajo 900px la copia ocupa el ancho entero: el vaciado se centra y se abre,
porque ya no hay «columna izquierda» que proteger sino toda la plana. */
@media (max-width: 900px) {
.bd-circuit.bd-on-paper.bd-fade-y {
-webkit-mask-image: radial-gradient(ellipse 86% 74% at 50% 50%, transparent 0%, rgb(0 0 0 / .12) 52%, #000 94%);
mask-image: radial-gradient(ellipse 86% 74% at 50% 50%, transparent 0%, rgb(0 0 0 / .12) 52%, #000 94%);
}
}
/* --- 14.2 · EL SKYLINE DE CIERRE DE /industries, A ESCALA DE LÁMINA -------
A 980px la escena 8:5 medía 960×530 y ocupaba una banda navy de casi 700px
ella sola: a ese tamaño el trazo fino se estira y el sol cian se convierte
en una mancha plana que pesa más que el dibujo entero. La misma lámina en
/about §06 mide ~600px, va integrada en un spread editorial y se lee mucho
mejor — esa es la referencia. Se baja a 760px: sigue siendo el cierre de la
página, deja de ser una valla publicitaria. -------------------------------- */
.ind-skyline-art { max-width: 760px; }
/* ==========================================================================
15 · .site-progress — BARRA FANTASMA DE main.js (neutralizada)
--------------------------------------------------------------------------
main.js crea al vuelo un y en CADA evento de
scroll le escribe `style.width`. Su hoja de estilo es css/site.css, que
ya NO la carga ninguna página del sitio: el nodo queda sin estilo, en
flujo normal al final del , con altura 0 y fondo transparente. Es
invisible — pero `width` es una propiedad de LAYOUT, así que cada escritura
ensucia el layout del documento y la lectura de `scrollHeight` que hace la
propia función lo obliga a recalcularse de forma síncrona. Un layout
forzado por frame, todo el scroll, para pintar nada.
Solo la ven las 3 páginas que cargan main.js — /insights, /work y /contact
— y en las tres la barra de lectura REAL es .page-progress (system.css),
que ya hace el mismo trabajo con `transform: scaleX()`, sin tocar layout.
Así que esto no esconde una función: quita un duplicado muerto.
MEDIDO (layouts provocados por una pasada de scroll, tras calentamiento):
antes después
/insights 193 0
/work 193 0
/contact 193 0
Probado también `contain: strict` sobre el nodo: no sirve (193 layouts
igual). La escritura de `width` invalida el layout del documento aunque el
elemento esté contenido; lo único que lo corta es sacarlo del árbol de
cajas. main.js es intocable en esta fase, así que el arreglo vive aquí.
Si algún día vuelve css/site.css, basta con borrar esta regla.
------------------------------------------------------------------------- */
.site-progress { display: none; }