/**
 * QRIX Ken-Burns-Effekt
 *
 * Langsamer Zoom (optional mit Schwenk) auf Hintergrundbildern von Containern
 * (qrix-kb--bg) und Bildern in Widgets (qrix-kb--img). Gesteuert über Klassen
 * (qrix-kb, qrix-kb--in|out, qrix-kb--pan-l|r|u|d, qrix-kb--ready, qrix-kb--play)
 * und die Variablen --qrix-kb-scale, --qrix-kb-duration, --qrix-kb-delay.
 * Containern setzt das Script eine Ebene (.qrix-kb__layer) ein, die das
 * Hintergrundbild des Containers erbt (background: inherit) und bewegt wird.
 * Aktiv nur mit JavaScript und ohne „weniger Bewegung“, nie im Elementor-Editor.
 */

@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {

	/* Schwenkrichtung (-1, 0, 1) */
	body:not(.elementor-editor-active) .qrix-kb {
		--qrix-kb-dx: 0;
		--qrix-kb-dy: 0;
		/* 90 % der möglichen Verschiebung ((Zoom - 1) / 2), damit nie ein Bildrand sichtbar wird */
		--qrix-kb-m: calc((var(--qrix-kb-scale, 1.12) - 1) * 45%);
	}
	body:not(.elementor-editor-active) .qrix-kb--pan-l { --qrix-kb-dx: -1; }
	body:not(.elementor-editor-active) .qrix-kb--pan-r { --qrix-kb-dx: 1; }
	body:not(.elementor-editor-active) .qrix-kb--pan-u { --qrix-kb-dy: -1; }
	body:not(.elementor-editor-active) .qrix-kb--pan-d { --qrix-kb-dy: 1; }

	/* Container: Ebene mit geerbtem Hintergrund hinter dem Inhalt */
	body:not(.elementor-editor-active) .qrix-kb--bg.qrix-kb--ready {
		position: relative;
		overflow: hidden;
		isolation: isolate;
	}

	body:not(.elementor-editor-active) .qrix-kb__layer {
		position: absolute;
		inset: 0;
		z-index: -1;
		pointer-events: none;
		background: inherit;
		will-change: transform;
	}

	/* Widgets: Bilder im Widget */
	body:not(.elementor-editor-active) .qrix-kb--img.qrix-kb--ready {
		overflow: hidden;
	}

	body:not(.elementor-editor-active) .qrix-kb--img.qrix-kb--ready img {
		will-change: transform;
	}

	/* Startzustand: Herauszoomen beginnt vergrößert (und verschoben) */
	body:not(.elementor-editor-active) .qrix-kb--out.qrix-kb--ready .qrix-kb__layer,
	body:not(.elementor-editor-active) .qrix-kb--out.qrix-kb--img.qrix-kb--ready img {
		transform: translate(
			calc(var(--qrix-kb-dx) * var(--qrix-kb-m) * -1),
			calc(var(--qrix-kb-dy) * var(--qrix-kb-m) * -1)
		) scale(var(--qrix-kb-scale, 1.12));
	}

	/* Startzustand: Hineinzoomen beginnt in Originalgröße */
	body:not(.elementor-editor-active) .qrix-kb--in.qrix-kb--ready .qrix-kb__layer,
	body:not(.elementor-editor-active) .qrix-kb--in.qrix-kb--img.qrix-kb--ready img {
		transform: translate(0, 0) scale(1);
	}

	/* Abspielen */
	body:not(.elementor-editor-active) .qrix-kb--ready.qrix-kb--play .qrix-kb__layer,
	body:not(.elementor-editor-active) .qrix-kb--img.qrix-kb--ready.qrix-kb--play img {
		transition: transform var(--qrix-kb-duration, 12s) cubic-bezier(0.22, 0.61, 0.36, 1) var(--qrix-kb-delay, 0ms);
	}

	body:not(.elementor-editor-active) .qrix-kb--out.qrix-kb--ready.qrix-kb--play .qrix-kb__layer,
	body:not(.elementor-editor-active) .qrix-kb--out.qrix-kb--img.qrix-kb--ready.qrix-kb--play img {
		transform: translate(0, 0) scale(1);
	}

	body:not(.elementor-editor-active) .qrix-kb--in.qrix-kb--ready.qrix-kb--play .qrix-kb__layer,
	body:not(.elementor-editor-active) .qrix-kb--in.qrix-kb--img.qrix-kb--ready.qrix-kb--play img {
		transform: translate(
			calc(var(--qrix-kb-dx) * var(--qrix-kb-m)),
			calc(var(--qrix-kb-dy) * var(--qrix-kb-m))
		) scale(var(--qrix-kb-scale, 1.12));
	}
}