/* Dycode Reveal Background — frontend styles */

/* Host section/row: layers go behind, content stays above */
.dyc-reveal-host {
	position: relative;
	overflow: hidden;
}

/* Divi content (rows/columns) must sit ABOVE the reveal layers */
.dyc-reveal-host > .et_pb_row,
.dyc-reveal-host > .et_pb_row_inner,
.dyc-reveal-host > .et_pb_column,
.dyc-reveal-host > .et_pb_with_border {
	position: relative;
	z-index: 2;
}

/* The two background layers (base + reveal) */
.dyc-reveal-layer {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;          /* clicks pass through to modules */
	background-position: center center;
	background-repeat: no-repeat;
}

.dyc-reveal-layer.dyc-cover   { background-size: cover; }
.dyc-reveal-layer.dyc-contain { background-size: contain; }

/* Reveal layer sits on top of base and is clipped to a moving spotlight */
.dyc-reveal-layer--reveal {
	z-index: 1;
	--mx: 50%;
	--my: 50%;
	--r: 260px;
	opacity: 1;
	transition: opacity 0.35s ease;

	-webkit-mask-image: radial-gradient(
		circle var(--r) at var(--mx) var(--my),
		rgba(0,0,0,1) 0,
		rgba(0,0,0,1) 40%,
		rgba(0,0,0,0.40) 70%,
		rgba(0,0,0,0.12) 86%,
		rgba(0,0,0,0) 100%
	);
	        mask-image: radial-gradient(
		circle var(--r) at var(--mx) var(--my),
		rgba(0,0,0,1) 0,
		rgba(0,0,0,1) 40%,
		rgba(0,0,0,0.40) 70%,
		rgba(0,0,0,0.12) 86%,
		rgba(0,0,0,0) 100%
	);

	-webkit-mask-repeat: no-repeat;
	        mask-repeat: no-repeat;
	-webkit-mask-mode: alpha;
	        mask-mode: alpha;
}

/* Graceful fallback: if masking isn't supported, hide reveal so the base
   image shows cleanly instead of fully covering it */
@supports not ((-webkit-mask-image: radial-gradient(circle, #000, #000)) or (mask-image: radial-gradient(circle, #000, #000))) {
	.dyc-reveal-layer--reveal { display: none; }
}