/**
 * Colour bleed — greyscale image that reveals colour in a feathered circle
 * following the cursor.
 *
 * Consolidates three near-identical style blocks from the WPCode global Footer
 * field (.color-bleed-2, .color-bleed-3, .color-bleed-4). Blocks 2 and 4 were
 * byte-identical after normalising class names; block 3 differed only in
 * comment wording, rule order, and using `top/left: 0` instead of `inset: 0`,
 * which computes the same for a full-size absolutely positioned element.
 *
 * Every declaration below is unchanged from the originals. The only difference
 * is that the injected container now has one class (.iwo-bleed) instead of
 * .bleed for two of the variants and .bleed-bg-container for the third.
 *
 * The section classes are untouched, so no page content needed editing.
 *
 * Tunables are custom properties so the settings screen can drive them; the
 * defaults here are the original hardcoded values.
 */

.color-bleed-2,
.color-bleed-3,
.color-bleed-4 {
	position: relative !important;
	overflow: hidden !important; /* keeps the hover circle inside the section */
	background: transparent !important; /* drop Divi's own background */
}

/* Divi's own content must sit above the injected background. */
.color-bleed-2 > .et_pb_row,
.color-bleed-2 > .et_pb_background_pattern,
.color-bleed-2 > .et_pb_background_mask,
.color-bleed-3 > .et_pb_row,
.color-bleed-3 > .et_pb_background_pattern,
.color-bleed-3 > .et_pb_background_mask,
.color-bleed-4 > .et_pb_row,
.color-bleed-4 > .et_pb_background_pattern,
.color-bleed-4 > .et_pb_background_mask {
	position: relative !important;
	z-index: 2 !important;
	pointer-events: auto !important;
}

.iwo-bleed {
	position: absolute !important;
	inset: 0 !important;
	width: 100% !important;
	height: 100% !important;
	overflow: hidden;
	cursor: crosshair;
	z-index: 0 !important; /* behind the Divi content */

	/* Driven by JS. */
	--x: 50%;
	--y: 50%;
	--r: 0px;

	/* Tunable. */
	--feather: 140px;
	--iwo-bleed-dim: 0.2;
	--iwo-bleed-lit: 0.5;
}

.iwo-bleed img {
	position: absolute !important;
	inset: 0 !important;
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
	user-select: none;
	-webkit-user-drag: none;
	pointer-events: none;
	display: block;
}

/* Base greyscale layer, deliberately dark. */
.iwo-bleed .bw {
	filter: grayscale(1) contrast(1.02) brightness(var(--iwo-bleed-dim)) !important;
}

/* Colour layer, revealed through a feathered radial mask. */
.iwo-bleed .color {
	filter: brightness(var(--iwo-bleed-lit)) !important;
	-webkit-mask-image: radial-gradient(
		circle var(--r) at var(--x) var(--y),
		#000 0,
		#000 calc(var(--r) - var(--feather)),
		transparent var(--r)
	);
	mask-image: radial-gradient(
		circle var(--r) at var(--x) var(--y),
		#000 0,
		#000 calc(var(--r) - var(--feather)),
		transparent var(--r)
	);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	will-change: mask-image;
}

/* The effect is decorative and motion-heavy; show plain colour instead. */
@media (prefers-reduced-motion: reduce) {
	.iwo-bleed .color {
		-webkit-mask-image: none;
		mask-image: none;
	}
}