/* Drift background — the field sits behind the block's content and clips itself,
   so the block's own overflow (which other scripts may change) never matters. */

:where(.has-drift-bg, :has(> .drift-bg__field)) {
	position: relative;
}

.drift-bg__field {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
	pointer-events: none;
	contain: strict;
}

/* Kadence Row Layout: the field comes before .kt-row-layout-overlay, so the row's
   overlay tints the images and the columns stay on top. */
.kb-row-layout-wrap.has-drift-bg > .kt-row-column-wrap {
	position: relative;
	z-index: 1;
}

/* Core Group: lift the content above the field. Zero specificity, so any
   position the content already sets still wins. (:has covers the editor,
   where React owns the block's class list.) */
:where(.wp-block-group.has-drift-bg, .wp-block-group:has(> .drift-bg__field)) > :where(:not(.drift-bg__field)) {
	position: relative;
	z-index: 1;
}

.drift-bg__field > .drift-bg__card {
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	max-width: none;
	height: auto;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	opacity: 0;
	transition: opacity 0.9s ease;
	will-change: transform;
	user-select: none;
	-webkit-user-drag: none;
}

.drift-bg__field > .drift-bg__card.is-loaded {
	opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
	.drift-bg__field > .drift-bg__card {
		transition: none;
	}
}