/* Título vaporizado — soporte para assets/js/vapor-title.js.
   El encabezado conserva su caja y su tipografía; solo se le vuelve el color
   transparente cuando el JS ha conseguido montar el canvas encima. Mientras
   eso no ocurra, el título se ve tal cual: nada depende del script para ser
   legible. */

[data-vapor] {
	position: relative;
}

/* La clase la pone el JS, y solo después de dibujar.

   Se oculta con -webkit-text-fill-color y NO con `color: transparent`, aunque
   el resultado en pantalla sea el mismo. El motivo: el lienzo relee el color
   real del título en cada fotograma para seguir la rampa de color del scroll
   (assets/js/vapor-title.js). Con `color: transparent`, esa lectura devolvía
   transparente y las partículas salían negras; con text-fill-color el valor de
   `color` se conserva intacto y sólo cambia el relleno del glifo. */
[data-vapor].is-vapor,
[data-vapor].is-vapor * {
	-webkit-text-fill-color: transparent;
	        text-fill-color: transparent;
}

.vapor-canvas {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
}

/* Variante para imágenes: el canvas solo cubre la entrada y luego se retira,
   así que la imagen se oculta únicamente mientras dura.

   Aquí solo se fija `position`, nunca `display`: este atributo se pone sobre
   contenedores que ya existen y que traen su propia maquetación —el del hero
   es .mask, que es block con overflow:hidden—, y forzarles un display los
   rompería. Con que establezcan bloque contenedor es suficiente. */
[data-vapor-img] {
	position: relative;
}

[data-vapor-img].is-vapor-img > img,
[data-vapor-img].is-vapor-img > picture {
	opacity: 0;
}