/**
 * The glow is painted entirely here, from the variables module-styles emits.
 * The script only moves --dmoe-x / --dmoe-y and drives the highlight.
 */
.dmoe-spotlight-inner {
	display: grid;
}
.dmoe-spotlight-inner > .dmoe_spotlight_cards_item {
	height: 100%;
}
/* Grid gap owns the spacing; `.et_pb_module` is only here for specificity. */
.dmoe-spotlight-inner > .dmoe_spotlight_cards_item.et_pb_module {
	margin-bottom: 0;
}
.dmoe-spotlight-filter {
	position: absolute;
	width: 0;
	height: 0;
}
/* The card is the surface the Design tab styles AND the element the script
   transforms, so the lit edge can never drift away from the background. */
/* The resting rim has to be an outline, not a border: `overflow: hidden` clips the
   glow layers to the padding box, so a real border would always sit outside them and
   the lit edge would land a pixel short of the card. An outline is painted by the card
   itself, so the ring covers it exactly. */
.dmoe-spotlight-card {
	position: relative;
	height: 100%;
	overflow: hidden;
	isolation: isolate;
	outline: 1px solid var(--dmoe-spot-rim, rgba(255, 255, 255, 0.12));
	outline-offset: -1px;
	will-change: transform, opacity, filter;
}
/* One gap between whichever parts are switched on. A flex gap only falls between
   rendered children, so hiding the icon or subtitle closes its space instead of
   leaving a hole. The reset is what makes that gap the only spacing in play. */
.dmoe-spotlight-card-content {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.dmoe-spotlight-card-content > * {
	margin: 0;
	padding-bottom: 0;
}
/* Only the outer edges — paragraphs inside a multi-line description keep theirs. */
.dmoe-spotlight-card-description > :first-child {
	margin-top: 0;
}
.dmoe-spotlight-card-description > :last-child {
	margin-bottom: 0;
	padding-bottom: 0;
}
/* Nothing on the page makes the button a block box, and an inline one ignores
   width and height and lets the hover icon escape its background. */
.dmoe-spotlight-card .et_pb_button {
	display: inline-block;
}
/* Browsers give `figure` a 1em/40px margin of its own, which shows up as dead space
   around the image. The gap below it comes from Image Position instead. */
.dmoe-spotlight-card-media {
	margin: 0;
	overflow: hidden;
}
.dmoe-spotlight-card-image {
	display: block;
	width: 100%;
}

.dmoe-spotlight-card::before,
.dmoe-spotlight-card::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.3s ease;
}
/* `screen` is what makes this read as light falling on the card rather than a
   coloured disc painted over it — it can only brighten what is underneath. The long
   ramp to transparent is what stops it looking like a dot; under `screen` the dark
   end of that fade contributes nothing, so the falloff stays clean. */
.dmoe-spotlight-card::before {
	z-index: 1;
	background: radial-gradient(
		circle var(--dmoe-spot-size, 180px) at var(--dmoe-x, 50%) var(--dmoe-y, 50%),
		var(--dmoe-spot-color, #2ea3f2) 0%,
		var(--dmoe-spot-color-2, #2ea3f2) 25%,
		transparent 100%
	);
	mix-blend-mode: screen;
}
/* On a light card the same gradient washes to white under screen — multiply is
   its mirror (multiply(white, X) = X, the same way screen(black, X) = X is what
   makes the rule above work on dark cards), reading the true colour instead.
   The runtime measures each card's own real background once and sets this. */
.dmoe-spotlight-card[data-spot-tone="light"]::before {
	mix-blend-mode: multiply;
}
/* Above the content so a full-bleed image cannot cover the lit edge. The mask
   keeps only the padding ring, which is what makes it read as a border. */
.dmoe-spotlight-card::after {
	z-index: 3;
	padding: var(--dmoe-spot-border, 3px);
	background: radial-gradient(
		circle var(--dmoe-spot-edge-size, 250px) at var(--dmoe-x, 50%) var(--dmoe-y, 50%),
		var(--dmoe-spot-color, #2ea3f2) 0%,
		var(--dmoe-spot-color-2, #2ea3f2) 45%,
		transparent 100%
	);
	-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
	mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
}

.dmoe-spotlight-card:hover::before,
.dmoe-spotlight-card:focus-within::before {
	opacity: var(--dmoe-spot-opacity, 0.25);
}
.dmoe-spotlight-card:hover::after,
.dmoe-spotlight-card:focus-within::after {
	opacity: calc(var(--dmoe-spot-opacity, 0.25) * 3);
}

/* Which layers each effect uses. Border Glow and Electric are edge-only; Chasing
   keeps the surface light, so the spotlight still works under its sweep. */
.dmoe-spotlight--border .dmoe-spotlight-card::before,
.dmoe-spotlight--electric .dmoe-spotlight-card::before {
	display: none;
}
.dmoe-spotlight--inner .dmoe-spotlight-card::after {
	display: none;
}
.dmoe-spotlight-card-fx {
	display: none;
}

/* A lit edge on its own is a hairline and reads as a drawn line; this soft copy
   spreads that light onto the card. The mask and the blur MUST sit on different
   elements — CSS applies mask after filter, so doing both here would leave the
   mask's hard edge unblurred and the glow would land as a flat band. */
.dmoe-spotlight--border .dmoe-spotlight-card-fx,
.dmoe-spotlight--both .dmoe-spotlight-card-fx {
	display: block;
	position: absolute;
	inset: 0;
	z-index: 1;
	border-radius: inherit;
	pointer-events: none;
	mix-blend-mode: screen;
	filter: blur(calc(var(--dmoe-spot-edge-size, 250px) * 0.16));
	opacity: 0;
	transition: opacity 0.3s ease;
}
/* Same light-card mirror as the Inner Glow rule above, for this effect's own
   bloom layer. */
.dmoe-spotlight-card[data-spot-tone="light"] .dmoe-spotlight-card-fx {
	mix-blend-mode: multiply;
}
/* Reach is keyed to Edge Light Spread, not Lit Edge Thickness: thickness draws the
   crisp line, spread says how far the light carries — along the border and inward. */
.dmoe-spotlight--border .dmoe-spotlight-card-fx::before,
.dmoe-spotlight--both .dmoe-spotlight-card-fx::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	padding: calc(var(--dmoe-spot-edge-size, 250px) * 0.1);
	background: radial-gradient(
		circle var(--dmoe-spot-edge-size, 250px) at var(--dmoe-x, 50%) var(--dmoe-y, 50%),
		var(--dmoe-spot-color, #2ea3f2) 0%,
		var(--dmoe-spot-color-2, #2ea3f2) 50%,
		transparent 100%
	);
	-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
	mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
}
.dmoe-spotlight--border .dmoe-spotlight-card:hover .dmoe-spotlight-card-fx,
.dmoe-spotlight--border .dmoe-spotlight-card:focus-within .dmoe-spotlight-card-fx,
.dmoe-spotlight--both .dmoe-spotlight-card:hover .dmoe-spotlight-card-fx,
.dmoe-spotlight--both .dmoe-spotlight-card:focus-within .dmoe-spotlight-card-fx {
	opacity: calc(var(--dmoe-spot-opacity, 0.25) * 2.4);
}

/* Idle drift is always lit — there is no pointer to reveal it. */
.dmoe-spotlight-wrap[data-idle_motion="on"] .dmoe-spotlight-card::before {
	opacity: var(--dmoe-spot-opacity, 0.25);
}
.dmoe-spotlight-wrap[data-idle_motion="on"] .dmoe-spotlight-card::after {
	opacity: calc(var(--dmoe-spot-opacity, 0.25) * 3);
}
.dmoe-spotlight-wrap[data-idle_motion="on"].dmoe-spotlight--border .dmoe-spotlight-card-fx,
.dmoe-spotlight-wrap[data-idle_motion="on"].dmoe-spotlight--both .dmoe-spotlight-card-fx {
	opacity: calc(var(--dmoe-spot-opacity, 0.25) * 2.4);
}

/* Registering the angle is what lets a conic gradient interpolate — without it the
   browser treats --dmoe-angle as an unanimatable string and the ring sits still. */
@property --dmoe-angle {
	syntax: "<angle>";
	initial-value: 0deg;
	inherits: false;
}
@keyframes dmoe-spotlight-spin {
	to {
		--dmoe-angle: 360deg;
	}
}
.dmoe-spotlight--chase .dmoe-spotlight-card::after {
	opacity: calc(var(--dmoe-spot-opacity, 0.25) * 3);
	background: conic-gradient(
		from var(--dmoe-angle, 0deg),
		transparent 0%,
		var(--dmoe-spot-color, #2ea3f2) 10%,
		var(--dmoe-spot-color-2, #2ea3f2) 18%,
		transparent 32%
	);
	animation: dmoe-spotlight-spin var(--dmoe-spot-electric-speed, 2s) linear infinite;
}

/* Electric Border is a bordered box pushed around by an animated turbulence filter.
   The displacement throws the edge outside the card, so this is the one effect that
   cannot clip — the image gets its own rounding instead. */
.dmoe-spotlight--electric .dmoe-spotlight-card {
	overflow: visible;
}
/* The steady rim. Without it the crackle reads as a loose line floating off the
   card; anchored, the same displacement reads as current running along an edge. */
.dmoe-spotlight--electric .dmoe-spotlight-card-fx {
	display: block;
	position: absolute;
	inset: 0;
	z-index: 3;
	border-radius: inherit;
	pointer-events: none;
	box-shadow: inset 0 0 0 var(--dmoe-spot-border, 3px) var(--dmoe-spot-color, #2ea3f2);
	box-shadow: inset 0 0 0 var(--dmoe-spot-border, 3px) color-mix(in srgb, var(--dmoe-spot-color, #2ea3f2) 55%, transparent);
}
.dmoe-spotlight--electric .dmoe-spotlight-card-fx::before,
.dmoe-spotlight--electric .dmoe-spotlight-card-fx::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	border: var(--dmoe-spot-border, 3px) solid var(--dmoe-spot-color, #2ea3f2);
	opacity: calc(var(--dmoe-spot-opacity, 0.25) * 3);
	filter: url(#dmoe-spotlight-electric);
}
.dmoe-spotlight--electric .dmoe-spotlight-card-fx::after {
	border-color: var(--dmoe-spot-color-2, #2ea3f2);
	filter: url(#dmoe-spotlight-electric) blur(5px);
}
/* The bloom behind the edge — this is what turns a moving line into light. It has no
   blend mode, so a negative index is what keeps it off the image: inside a stacking
   context a negative child paints over the card's own background but under everything
   in flow. At z-index 0 it laid a flat blue veil across the picture. */
.dmoe-spotlight--electric .dmoe-spotlight-card::after {
	z-index: -1;
	padding: 0;
	opacity: calc(var(--dmoe-spot-opacity, 0.25) * 0.7);
	background: linear-gradient(
		-30deg,
		var(--dmoe-spot-color-2, #2ea3f2),
		transparent 45%,
		var(--dmoe-spot-color, #2ea3f2)
	);
	-webkit-mask: none;
	mask: none;
	filter: blur(26px);
	transform: scale(1.04);
}

@media (prefers-reduced-motion: reduce) {
	.dmoe-spotlight-card,
	.dmoe-spotlight-card::before,
	.dmoe-spotlight-card::after,
	.dmoe-spotlight-card-fx {
		transition: none;
	}
	.dmoe-spotlight--chase .dmoe-spotlight-card::after {
		animation: none;
	}
	.dmoe-spotlight--electric .dmoe-spotlight-card-fx::before,
	.dmoe-spotlight--electric .dmoe-spotlight-card-fx::after {
		filter: none;
	}
}