/* ==========================================================================
   LIEPS Parallax-Bildebenen
   ========================================================================== */

.lieps-parallax-gallery {
	position: relative;
	isolation: isolate;

	width: 100%;
	min-width: 0;

	background-color:
		var(--parallax-background, transparent);
}

/* Modus: Eigene Scroll-Bühne – erzeugt eigene Scroll-Länge und pinnt die Bühne. */
.lieps-parallax-gallery.is-pinned {
	min-height:
		calc(
			var(--parallax-scroll-length, 300) * 1vh
		);
	min-height:
		calc(
			var(--parallax-scroll-length, 300) * 1svh
		);
}

.lieps-parallax-gallery.is-pinned
	.lieps-parallax-gallery__stage {
	position: sticky;
	top: 0;
}

/* Modus: An Container gebunden – bleibt vollständig im umgebenden Element. */
.lieps-parallax-gallery.is-contained {
	height: 100%;
}

.lieps-parallax-gallery.is-contained
	.lieps-parallax-gallery__stage {
	position: relative;

	max-height: 100%;
}

.lieps-parallax-gallery__stage {
	width: 100%;
	height:
		calc(
			var(--parallax-stage-height, 100) * 1vh
		);
	min-height: 20rem;
	max-height: 100%;
	overflow: clip;

	background-color:
		var(--parallax-background, transparent);
}

.lieps-parallax-gallery__layers {
	position: absolute;
	inset: 0;

	isolation: isolate;

	width: 100%;
	height: 100%;

	pointer-events: none;
}

.lieps-parallax-gallery__layer {
	position: absolute;
	top:
		calc(
			var(--parallax-y, 50) * 1%
		);
	left:
		calc(
			var(--parallax-x, 50) * 1%
		);
	z-index: var(--parallax-z, 1);

	width:
		calc(
			var(--parallax-width, 60) * 1%
		);
	max-width: none;

	opacity: var(--parallax-opacity, 100%);

	transform: translate(-50%, -50%);

	pointer-events: none;
}

.lieps-parallax-gallery__media {
	position: relative;

	width: 100%;

	transform: translate3d(0, 0, 0);
	will-change: transform;
}

.lieps-parallax-gallery__link {
	display: block;

	width: 100%;

	color: inherit;
	text-decoration: none;

	pointer-events: auto;
}

.lieps-parallax-gallery__image {
	display: block;

	width: 100%;
	height: auto;
	max-width: none;

	user-select: none;

	-webkit-user-drag: none;
}

.lieps-parallax-gallery__link:focus-visible {
	outline: 3px solid currentColor;
	outline-offset: 6px;
}

/* Ohne GSAP bleibt eine statische, vollständig nutzbare Ebenendarstellung. */
.lieps-parallax-gallery.is-parallax-fallback
	.lieps-parallax-gallery__media {
	transform: none !important;
	will-change: auto;
}

@media (prefers-reduced-motion: reduce) {
	.lieps-parallax-gallery {
		min-height:
			calc(
				var(--parallax-stage-height, 100) * 1vh
			);
		min-height:
			calc(
				var(--parallax-stage-height, 100) * 1svh
			);
	}

	.lieps-parallax-gallery__stage {
		position: relative;
	}

	.lieps-parallax-gallery__media {
		transform: none !important;
		will-change: auto;
	}
}