/*
 * Cross-device parallax layer.
 *
 * The image is painted on a ::before layer that is taller than its container
 * (30% headroom top and bottom), then slid vertically by --gn-px-y. The JS
 * never moves it further than that headroom, so no edge can ever be exposed.
 *
 * Headroom must be at least TRAVEL * 50 percent. Raising one without the other
 * either exposes an edge or wastes image detail.
 */

.gn-parallax {
	position: relative;
	overflow: hidden;
	/* The JS copies this element's own background image onto the layer below,
	   then blanks it here so the image is not painted twice. */
	background-image: none !important;
}

.gn-parallax::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: -30%;
	bottom: -30%;
	background-image: var(--gn-px-img);
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	transform: translate3d(0, var(--gn-px-y, 0px), 0);
	will-change: transform;
	pointer-events: none;
	z-index: 0;
}

/* Keep the section's real content above the image layer. */
.gn-parallax > * {
	position: relative;
	z-index: 1;
}