/* Dycode Reveal Background — shared frontend engine styles */

/*
 * Layers are placed BEHIND the Divi content with negative z-index inside an
 * isolated stacking context on the host itself. We deliberately DO NOT add
 * position/z-index to rows/columns — doing so created a stacking context around
 * the content that made stroke text with transparent fill
 * (-webkit-text-fill-color: transparent) disappear. Now the content renders in
 * its natural context, untouched.
 */
.dyc-reveal-host {
	position: relative;
	overflow: hidden;
	isolation: isolate;   /* scope our negative z-index layers to this element */
}

/* Injected background layers — behind content, above the host's own Divi bg */
.dyc-reveal-layer {
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	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 clipped to a moving spotlight (updated via --mx/--my/--r) */
.dyc-reveal-layer--reveal {
	--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;
}

/* Module mode: base is a real <img> (intrinsic height); the reveal sits ABOVE it */
.dyc-reveal-module { display: block; line-height: 0; }
.dyc-reveal-module__img { display: block; width: 100%; height: auto; }
.dyc-reveal-module[data-dyc-empty] { min-height: 260px; }
.dyc-reveal-module .dyc-reveal-layer--reveal { z-index: 1; }

/* Fallback when CSS masks are unsupported: hide reveal so base shows cleanly */
@supports not ((-webkit-mask-image: radial-gradient(circle, #000, #000)) or (mask-image: radial-gradient(circle, #000, #000))) {
	.dyc-reveal-layer--reveal { display: none; }
}