/**
 * Mobile Fixed Background
 *
 * The layer is stretched one viewport height above and below its host element and
 * then clipped back to exactly the host box with clip-path. That gives the sticky
 * child enough travel room to stay pinned to the top of the viewport for the whole
 * time the host is on screen, which is what `background-attachment: fixed` does.
 *
 * clip-path is used instead of `overflow: hidden` on purpose: `overflow` would turn
 * the layer into a scroll container and kill `position: sticky`.
 */

.mfb-layer {
	position: absolute;
	left: 0;
	right: 0;
	top: calc(-1 * var(--mfb-vh, 100vh));
	bottom: calc(-1 * var(--mfb-vh, 100vh));
	pointer-events: none;
	overflow: visible;
	border-radius: inherit;
	-webkit-clip-path: inset(var(--mfb-vh, 100vh) 0);
	clip-path: inset(var(--mfb-vh, 100vh) 0);
}

.mfb-layer__img {
	position: -webkit-sticky;
	position: sticky;
	top: 0;
	left: 0;
	display: block;
	width: 100%;
	height: var(--mfb-vh, 100vh);
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
}

/* JS fallback: used when an ancestor's overflow makes `position: sticky` useless. */
.mfb-layer--js .mfb-layer__img {
	position: absolute;
	top: 0;
	will-change: transform;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}

/* Whole-page (html/body) fixed background. */
.mfb-body-layer {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: -1;
	pointer-events: none;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
}

/*
 * `overflow-x: hidden` on html/body makes them scroll containers, which breaks
 * `position: sticky`. `overflow-x: clip` prevents the same horizontal scrolling
 * without creating a scroll container.
 */
html.mfb-clip-x,
body.mfb-clip-x {
	overflow-x: clip !important;
}

/* Very old browsers without clip-path: better to show nothing than a bleeding layer. */
@supports not ((clip-path: inset(10px)) or (-webkit-clip-path: inset(10px))) {
	.mfb-layer {
		display: none !important;
	}
}