/**
 * Divi FX frontend styles.
 *
 * Deliberately tiny: everything variable lives in inline styles written by the
 * effect modules, so this file only carries the stacking contract.
 *
 * Every node the plugin injects carries .dfx-overlay. Nothing here ever sets
 * `position` on a node the plugin did not create: overriding the position of a
 * host's own children destroys any layer the theme positions absolutely, such
 * as a Divi module background or gradient overlay.
 */

/* Positioning context for injected overlays. Also set inline as a fallback. */
.dfx-host {
	position: relative;
}

/*
 * Makes the host a stacking context so a negative z-index overlay stays inside
 * it. `isolation` is the one property that does this with no side effects: it
 * changes no layout, no paint and no containing block.
 */
.dfx-host--isolate {
	isolation: isolate;
}

.dfx-overlay {
	position: absolute;
	pointer-events: none;
}

.dfx-layer {
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 0;
}

/*
 * Painted after the host's own background and border, but before every one of
 * its descendants. That is exactly "between background and content", and it
 * needs no cooperation from the content at all.
 */
.dfx-layer--behind {
	z-index: -1;
}

.dfx-cycler__frame {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	opacity: 0;
	background-repeat: no-repeat;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	will-change: opacity;
}

/* Outline overlay. Sits above the image layer so the two effects can share a target. */
.dfx-trace {
	top: 0;
	left: 0;
	z-index: 2;
	width: 100%;
	height: 100%;
	overflow: visible;
}

/* Hidden until the animation drives the offset, including before scripts run. */
.dfx-trace path {
	fill: none;
	stroke-dasharray: 1;
	stroke-dashoffset: 1;
}

@media print {
	.dfx-overlay {
		display: none;
	}
}