/* Motion Elements Depth Image
   The relit canvas lives behind the container's content. The host
   becomes its own stacking context so the layer can sit at a negative
   level: painted after the container's own background, before anything
   inside it, and never in front of a neighbour. Rounded containers clip
   it through the inherited radius. */

.pwf-depth-host {
	position: relative;
	isolation: isolate;
}

.pwf-depth {
	position: absolute;
	inset: 0;
	z-index: -1;
	overflow: hidden;
	border-radius: inherit;
	pointer-events: none;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

.pwf-depth canvas {
	display: block;
	width: 100%;
	height: 100%;
}

/* Without WebGL the picture shows flat, as a cover background. */
.pwf-depth--flat canvas {
	display: none;
}