/**
 * @desc Frontend helper styles for iDig Motion Controls.
 */

.idig-motion-target {
	position: relative;
	transform-origin: center center;
	backface-visibility: hidden;
}

.idig-motion-js [data-idig-motion="1"] {
	opacity: 0;
	will-change: transform, opacity;
}

.idig-motion-js [data-idig-motion="1"][data-idig-motion-type="none"] {
	opacity: 1;
	transform: none;
}

.idig-has-bg-motion {
	will-change: transform;
}

/**
 * @desc Canvas background host wrapper.
 */
.idig-canvas-bg-host {
	position: relative;
	overflow: hidden;
	isolation: isolate;
}

/**
 * @desc Canvas layer sits behind content.
 */
.idig-canvas-bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	z-index: 0;
	pointer-events: none;
}

/**
 * @desc Ensure child content sits above the canvas layer.
 */
.idig-canvas-bg-host > *:not(.idig-canvas-bg) {
	position: relative;
	z-index: 1;
}