/**
 * SGP GSAP Animations – Initialzustände (FOUC-Vermeidung)
 * Prozent-Einheiten müssen zu GSAP-Werten passen (Interpolation).
 */

/* clip-path-swipe: Startzustand (vollständig zugedeckt) */
.gsap-swipe.gsap-dir-ltr {
	clip-path: inset(0% 100% 0% 0%);
	-webkit-clip-path: inset(0% 100% 0% 0%);
}

.gsap-swipe.gsap-dir-rtl {
	clip-path: inset(0% 0% 0% 100%);
	-webkit-clip-path: inset(0% 0% 0% 100%);
}

.gsap-swipe.gsap-dir-ttb {
	clip-path: inset(0% 0% 100% 0%);
	-webkit-clip-path: inset(0% 0% 100% 0%);
}

.gsap-swipe.gsap-dir-btt {
	clip-path: inset(100% 0% 0% 0%);
	-webkit-clip-path: inset(100% 0% 0% 0%);
}

/* Default-Richtung für .gsap-swipe ohne gsap-dir-* */
.gsap-swipe:not([class*="gsap-dir-"]) {
	clip-path: inset(0% 100% 0% 0%);
	-webkit-clip-path: inset(0% 100% 0% 0%);
}

/* Hintergrund-Wipe + Textfarbe */
.gsap-bg-wipe {
	--gsap-bg-from: #f5f5f5;
	--gsap-bg-to: #1a1a1a;
	--gsap-text-from: #1a1a1a;
	--gsap-text-to: #f5f5f5;
	--gsap-heading-from: var(--gsap-text-from);
	--gsap-heading-to: var(--gsap-text-to);
	position: relative;
	isolation: isolate;
	background-color: var(--gsap-bg-from);
	color: var(--gsap-text-from);
}

.gsap-bg-wipe-layer {
	position: absolute;
	inset: 0;
	z-index: 0;
	background-color: var(--gsap-bg-to);
	pointer-events: none;
}

.gsap-bg-wipe.gsap-dir-ltr > .gsap-bg-wipe-layer,
.gsap-bg-wipe:not([class*="gsap-dir-"]) > .gsap-bg-wipe-layer {
	clip-path: inset(0% 100% 0% 0%);
	-webkit-clip-path: inset(0% 100% 0% 0%);
}

.gsap-bg-wipe.gsap-dir-rtl > .gsap-bg-wipe-layer {
	clip-path: inset(0% 0% 0% 100%);
	-webkit-clip-path: inset(0% 0% 0% 100%);
}

.gsap-bg-wipe.gsap-dir-ttb > .gsap-bg-wipe-layer {
	clip-path: inset(0% 0% 100% 0%);
	-webkit-clip-path: inset(0% 0% 100% 0%);
}

.gsap-bg-wipe.gsap-dir-btt > .gsap-bg-wipe-layer {
	clip-path: inset(100% 0% 0% 0%);
	-webkit-clip-path: inset(100% 0% 0% 0%);
}

.gsap-bg-wipe > *:not(.gsap-bg-wipe-layer) {
	position: relative;
	z-index: 1;
}

/*
 * Heading-Farbe: Kadence/Theme nutzen oft hohe Spezifität oder !important.
 * Deshalb CSS-Variable + !important (GSAP animiert --gsap-heading-color).
 */
.gsap-bg-wipe .gsap-bg-wipe-heading.wp-block-kadence-advancedheading,
.gsap-bg-wipe .gsap-bg-wipe-heading[data-kb-block],
.gsap-bg-wipe h1.gsap-bg-wipe-heading,
.gsap-bg-wipe h2.gsap-bg-wipe-heading,
.gsap-bg-wipe h3.gsap-bg-wipe-heading,
.gsap-bg-wipe h4.gsap-bg-wipe-heading,
.gsap-bg-wipe h5.gsap-bg-wipe-heading,
.gsap-bg-wipe h6.gsap-bg-wipe-heading,
.gsap-bg-wipe p.gsap-bg-wipe-heading,
.gsap-bg-wipe .gsap-bg-wipe-heading :is(h1, h2, h3, h4, h5, h6, .wp-block-kadence-advancedheading) {
	color: var(--gsap-heading-color) !important;
	-webkit-text-fill-color: var(--gsap-heading-color) !important;
}

/* Ken-Burns: Overflow-Container (auch injizierte Wrapper) */
.gsap-scale-wrap {
	overflow: hidden;
	display: block;
}

.gsap-scale-wrap > img,
.gsap-scale img.kb-img,
.gsap-scale .kb-img img {
	transform-origin: center center;
	will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
	.gsap-swipe {
		clip-path: none !important;
		-webkit-clip-path: none !important;
	}

	.gsap-bg-wipe {
		background-color: var(--gsap-bg-to) !important;
		color: var(--gsap-text-to) !important;
	}

	.gsap-bg-wipe-layer {
		clip-path: none !important;
		-webkit-clip-path: none !important;
		display: none !important;
	}

	.gsap-parallax,
	.gsap-scale img {
		transform: none !important;
	}
}