/**
 * QRIX Wisch-Effekt
 *
 * Eine Fläche fährt über das Element, deckt es zu und fährt wieder hinaus.
 * In der Mitte der Bewegung erscheint der Inhalt. Gesteuert über Klassen
 * (qrix-wipe, qrix-wipe--r|l|d|u, qrix-wipe--cover, qrix-wipe--play) und
 * die Variablen --qrix-wipe-color, --qrix-wipe-duration, --qrix-wipe-delay,
 * --qrix-wipe-under. Aktiv nur mit JavaScript und ohne „weniger Bewegung“,
 * nie im Elementor-Editor.
 */

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

	body:not(.elementor-editor-active) .qrix-wipe {
		position: relative;
		overflow: hidden;
		visibility: hidden;
	}

	body:not(.elementor-editor-active) .qrix-wipe--play {
		visibility: visible;
	}

	/* Wischfläche */
	body:not(.elementor-editor-active) .qrix-wipe::after {
		content: "";
		position: absolute;
		inset: 0;
		z-index: 2;
		pointer-events: none;
		background: var(--qrix-wipe-color, var(--e-global-color-primary));
		clip-path: inset(0 100% 0 0);
	}

	/* Deckfläche für Hintergründe */
	body:not(.elementor-editor-active) .qrix-wipe--cover::before {
		content: "";
		position: absolute;
		inset: 0;
		z-index: 1;
		pointer-events: none;
		background: var(--qrix-wipe-under, white);
	}

	/* Richtungen: Startzustand der Wischfläche */
	body:not(.elementor-editor-active) .qrix-wipe--l::after { clip-path: inset(0 0 0 100%); }
	body:not(.elementor-editor-active) .qrix-wipe--d::after { clip-path: inset(0 0 100% 0); }
	body:not(.elementor-editor-active) .qrix-wipe--u::after { clip-path: inset(100% 0 0 0); }

	/* Abspielen */
	body:not(.elementor-editor-active) .qrix-wipe--play::after {
		animation: qrix-wipe-bar-r var(--qrix-wipe-duration, 1250ms) cubic-bezier(0.25, 0.1, 0.25, 1) var(--qrix-wipe-delay, 0ms) both;
	}
	body:not(.elementor-editor-active) .qrix-wipe--l.qrix-wipe--play::after { animation-name: qrix-wipe-bar-l; }
	body:not(.elementor-editor-active) .qrix-wipe--d.qrix-wipe--play::after { animation-name: qrix-wipe-bar-d; }
	body:not(.elementor-editor-active) .qrix-wipe--u.qrix-wipe--play::after { animation-name: qrix-wipe-bar-u; }

	body:not(.elementor-editor-active) .qrix-wipe--play > * {
		animation: qrix-wipe-show var(--qrix-wipe-duration, 1250ms) ease var(--qrix-wipe-delay, 0ms) both;
	}

	body:not(.elementor-editor-active) .qrix-wipe--play img {
		animation: qrix-wipe-img var(--qrix-wipe-duration, 1250ms) ease var(--qrix-wipe-delay, 0ms) both;
	}

	body:not(.elementor-editor-active) .qrix-wipe--cover.qrix-wipe--play::before {
		animation: qrix-wipe-under var(--qrix-wipe-duration, 1250ms) ease var(--qrix-wipe-delay, 0ms) both;
	}

	@keyframes qrix-wipe-bar-r {
		0%   { clip-path: inset(0 100% 0 0); }
		50%  { clip-path: inset(0 0 0 0); }
		51%  { clip-path: inset(0 0 0 0); }
		100% { clip-path: inset(0 0 0 100%); }
	}

	@keyframes qrix-wipe-bar-l {
		0%   { clip-path: inset(0 0 0 100%); }
		50%  { clip-path: inset(0 0 0 0); }
		51%  { clip-path: inset(0 0 0 0); }
		100% { clip-path: inset(0 100% 0 0); }
	}

	@keyframes qrix-wipe-bar-d {
		0%   { clip-path: inset(0 0 100% 0); }
		50%  { clip-path: inset(0 0 0 0); }
		51%  { clip-path: inset(0 0 0 0); }
		100% { clip-path: inset(100% 0 0 0); }
	}

	@keyframes qrix-wipe-bar-u {
		0%   { clip-path: inset(100% 0 0 0); }
		50%  { clip-path: inset(0 0 0 0); }
		51%  { clip-path: inset(0 0 0 0); }
		100% { clip-path: inset(0 0 100% 0); }
	}

	@keyframes qrix-wipe-show {
		0%, 50%   { opacity: 0; }
		51%, 100% { opacity: 1; }
	}

	@keyframes qrix-wipe-img {
		0%, 50% { scale: 1.25; }
		100%    { scale: 1; }
	}

	@keyframes qrix-wipe-under {
		0%, 50%   { opacity: 1; }
		51%, 100% { opacity: 0; }
	}
}