/* ==========================================================================
   SERO — efectos de imagen
   --------------------------------------------------------------------------
   Se activan con el atributo data-fx="nombre" en el contenedor de la imagen
   (hoy: imágenes de la columna central, con la casilla «Animar»).
   La lógica está en assets/js/fx.js; aquí solo hay variables y estilos,
   así que el aspecto se ajusta cambiando estos valores.
   ========================================================================== */

/* ---- Efecto «reveal»: textura de fotocopia que se revela con el cursor ---- */
[data-fx="reveal"] {
	/* Textura */
	--fx-ink: #000;              /* color de la «tinta» que cubre la imagen */
	--fx-speck: #fff;            /* color de las motas de la fotocopia */
	--fx-speck-density: 0.07;    /* cantidad de motas (0 = negro liso, 0.3 = muy granulado) */
	--fx-grain: 2;               /* tamaño de cada mota, en píxeles */
	--fx-streaks: 7;             /* rayas horizontales de fotocopiadora (0 = ninguna) */

	/* Pincel (lo que se descubre al pasar el cursor) */
	--fx-brush: 70;              /* radio, en píxeles */
	--fx-brush-grain: 0.7;       /* borde del pincel: 0 = liso, 1 = muy granulado */

	/* Comportamiento */
	--fx-heal: 0;                /* segundos en volver a cubrirse (0 = lo revelado se queda) */
	--fx-intro: 0.5s;            /* fundido de la textura al aparecer */

	position: relative;
	background: var(--fx-ink);
}

.fx-canvas {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	display: block;
	pointer-events: none;
	animation: fx-in var(--fx-intro, 0.5s) ease both;
}
@keyframes fx-in { from { opacity: 0; } to { opacity: 1; } }

/* Mientras se prepara la textura, la imagen no se ve (evita un destello).
   Si el script fallara, la imagen aparece sola a los 3 segundos. */
html.fx-on [data-fx="reveal"]:not(.fx-ready) img {
	opacity: 0;
	animation: fx-failsafe 0s 3s forwards;
}
@keyframes fx-failsafe { to { opacity: 1; } }

/* El cursor indica que la imagen se puede «rascar». */
html.fx-on [data-fx="reveal"].fx-ready { cursor: crosshair; }