/* ============================================================
 * NEXUS — Fondo de aliento: niebla que sube
 *
 * La niebla de la portada del libro, muy tenue, ascendiendo.
 * Tres capas de ruido fractal (feTurbulence) a distinta escala y
 * velocidad. El ruido lo genera el navegador: no va un solo píxel
 * en el archivo, las tres capas juntas ocupan 2 KB.
 *
 * Por qué ruido y no degradados: una niebla necesita bordes
 * irregulares y difusos. Con degradados salen óvalos, y un óvalo
 * se lee como mancha, no como niebla. El tono es #8AA29C,
 * muestreado de la bruma arbolada de la portada — resultó ser
 * casi el mismo --salvia que ya estaba en la paleta.
 *
 * `stitchTiles="stitch"` hace el ruido repetible, así que el
 * ascenso no tiene costura: la animación desplaza exactamente un
 * mosaico y el ciclo cierra invisible.
 *
 * Intentos anteriores, para no repetirlos: un bosque con montañas
 * (robaba protagonismo), unas manchas de luz enormes (tan grandes
 * y lentas que no se percibía el movimiento) y partículas (se
 * leían como puntos, no como calma).
 *
 * Uso:
 *   <section class="blanca">
 *     <div class="aliento" aria-hidden="true">
 *       <i class="n1"></i><i class="n2"></i><i class="n3"></i>
 *     </div>
 *     <div class="wrap"> …contenido… </div>
 *   </section>
 *
 * `.blanca` sola da fondo blanco sin nada detrás.
 *
 * ⚠ Opacidades medidas. La textura llega a ~0.73 de alfa en sus
 * puntos densos. Donde está el texto chico la máscara deja pasar el
 * 68%, así que ahí el papel baja a #D3DCDA y el texto --suave
 * (#625B50) queda en 4.81:1, sobre el 4.5:1 de AA.
 * Si subes las opacidades o aplanas la máscara, mide ese par: las dos
 * cosas lo afectan, y la máscara más de lo que parece.
 * ============================================================ */

.blanca{position:relative;background:#FFFFFF;isolation:isolate;overflow:hidden}
.blanca > .wrap{position:relative;z-index:2}

.aliento{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}

.aliento i{
  position:absolute;left:-6%;right:-6%;bottom:0;display:block;height:100%;
  background-repeat:repeat;
  /* La niebla NO es más densa en el borde de abajo: su punto más denso
     está al 22% de altura y se afloja otra vez hacia el suelo.
     Dos razones. Una, se parece más a niebla real, que flota sobre el
     terreno en vez de pegarse a él. Dos, y la que manda: el texto chico
     de la sección (--suave, «138 páginas · 24 prácticas») vive a ~12%
     del borde inferior, justo donde antes la niebla estaba a tope. Con
     este perfil ese renglón recibe el 68% de la densidad, lo que permite
     subir la niebla un 46% SIN empeorar su contraste. */
  -webkit-mask-image:linear-gradient(to top,rgba(0,0,0,.30) 0,#000 22%,rgba(0,0,0,.62) 52%,transparent 90%);
          mask-image:linear-gradient(to top,rgba(0,0,0,.30) 0,#000 22%,rgba(0,0,0,.62) 52%,transparent 90%);
  will-change:background-position;
}

.aliento .n1{opacity:.36;background-size:900px 620px;background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22900%22%20height%3D%22620%22%3E%3Cfilter%20id%3D%22n%22%20x%3D%220%22%20y%3D%220%22%20width%3D%22100%25%22%20height%3D%22100%25%22%3E%3CfeTurbulence%20type%3D%22fractalNoise%22%20baseFrequency%3D%220.0035%200.0085%22%20numOctaves%3D%224%22%20seed%3D%223%22%20stitchTiles%3D%22stitch%22%2F%3E%3CfeColorMatrix%20type%3D%22matrix%22%20values%3D%220%200%200%200%200.541%200%200%200%200%200.635%200%200%200%200%200.612%201.15%200%200%200%20-0.42%22%2F%3E%3C%2Ffilter%3E%3Crect%20width%3D%22900%22%20height%3D%22620%22%20filter%3D%22url%28%23n%29%22%2F%3E%3C%2Fsvg%3E");animation:ascender1 150s linear infinite}
.aliento .n2{opacity:.29;background-size:760px 540px;background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22760%22%20height%3D%22540%22%3E%3Cfilter%20id%3D%22n%22%20x%3D%220%22%20y%3D%220%22%20width%3D%22100%25%22%20height%3D%22100%25%22%3E%3CfeTurbulence%20type%3D%22fractalNoise%22%20baseFrequency%3D%220.007%200.015%22%20numOctaves%3D%224%22%20seed%3D%2211%22%20stitchTiles%3D%22stitch%22%2F%3E%3CfeColorMatrix%20type%3D%22matrix%22%20values%3D%220%200%200%200%200.541%200%200%200%200%200.635%200%200%200%200%200.612%201.2%200%200%200%20-0.48%22%2F%3E%3C%2Ffilter%3E%3Crect%20width%3D%22760%22%20height%3D%22540%22%20filter%3D%22url%28%23n%29%22%2F%3E%3C%2Fsvg%3E");animation:ascender2 104s linear infinite}
.aliento .n3{opacity:.23;background-size:640px 460px;background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22640%22%20height%3D%22460%22%3E%3Cfilter%20id%3D%22n%22%20x%3D%220%22%20y%3D%220%22%20width%3D%22100%25%22%20height%3D%22100%25%22%3E%3CfeTurbulence%20type%3D%22fractalNoise%22%20baseFrequency%3D%220.013%200.026%22%20numOctaves%3D%223%22%20seed%3D%2223%22%20stitchTiles%3D%22stitch%22%2F%3E%3CfeColorMatrix%20type%3D%22matrix%22%20values%3D%220%200%200%200%200.541%200%200%200%200%200.635%200%200%200%200%200.612%201.25%200%200%200%20-0.55%22%2F%3E%3C%2Ffilter%3E%3Crect%20width%3D%22640%22%20height%3D%22460%22%20filter%3D%22url%28%23n%29%22%2F%3E%3C%2Fsvg%3E");animation:ascender3  74s linear infinite}

/* Cada una sube exactamente un mosaico: el último fotograma es
   idéntico al primero y el bucle no se nota. */
@keyframes ascender1{from{background-position:0 0}to{background-position:0 -620px}}
@keyframes ascender2{from{background-position:0 0}to{background-position:0 -540px}}
@keyframes ascender3{from{background-position:0 0}to{background-position:0 -460px}}

/* Quien pidió menos movimiento ve la misma niebla, quieta. */
@media (prefers-reduced-motion:reduce){
  .aliento i{animation:none}
}