/**
 * Motion Layer Image
 */

/*
 * ================================================================
 * Root
 * ================================================================
 */

.mli {
	--mli-stage-width: 100%;
	position: relative;
	width: 100%;
	display: block;
	box-sizing: border-box;
}


/*
 * ================================================================
 * Stage
 * ================================================================
 */

.mli__stage {
	position: relative;
	margin-left: auto;
	margin-right: auto;
	max-width: 100%;
	box-sizing: border-box;
}


/*
 * ================================================================
 * Layers
 * ================================================================
 *
 * Every layer has exactly the same center point:
 *
 * left: 50%
 * top: 50%
 *
 * There is NO orbit radius.
 * There is NO X/Y orbital movement.
 */

.mli__layer {
	position: absolute;
	left: 50%;
	top: 50%;

	width: var(--mli-size);
	height: auto;

	margin: 0;
	padding: 0;

	opacity: var(--mli-opacity);

	transform:
		translate(-50%, -50%)
		rotate(var(--mli-start-angle));

	transform-origin:
		calc(50% + var(--mli-axis-x))
		calc(50% + var(--mli-axis-y));

	box-sizing: border-box;

	pointer-events: none;

	will-change: transform;

	transform-style: flat;
}


/*
 * Layer image.
 */

.mli__layer img {
	display: block;

	width: 100%;
	height: auto;

	max-width: none;

	margin: 0;
	padding: 0;

	border: 0;

	user-select: none;
	-webkit-user-drag: none;
}


/*
 * ================================================================
 * Rotation
 * ================================================================
 *
 * Exactly one animation cycle = exactly 360 degrees.
 *
 * No translate is performed during animation.
 * Therefore the image does NOT travel around a circle.
 */

.mli__layer--rotate {
	animation-duration: var(--mli-duration);
	animation-delay: var(--mli-delay);
	animation-iteration-count: infinite;
	animation-timing-function: linear;
	animation-fill-mode: both;
}


.mli__layer--cw {
	animation-name: mli-rotate-cw;
}


.mli__layer--ccw {
	animation-name: mli-rotate-ccw;
}


/*
 * Clockwise.
 */

@keyframes mli-rotate-cw {

	from {
		transform:
			translate(-50%, -50%)
			rotate(var(--mli-start-angle));
	}

	to {
		transform:
			translate(-50%, -50%)
			rotate(
				calc(
					var(--mli-start-angle) + 360deg
				)
			);
	}
}


/*
 * Counterclockwise.
 */

@keyframes mli-rotate-ccw {

	from {
		transform:
			translate(-50%, -50%)
			rotate(var(--mli-start-angle));
	}

	to {
		transform:
			translate(-50%, -50%)
			rotate(
				calc(
					var(--mli-start-angle) - 360deg
				)
			);
	}
}


/*
 * ================================================================
 * Static layers
 * ================================================================
 */

.mli__layer--static {
	animation: none !important;
}


/*
 * ================================================================
 * Main image
 * ================================================================
 */

.mli__main {
	position: absolute;

	left: 50%;
	top: 50%;

	height: auto;

	margin: 0;
	padding: 0;

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

	box-sizing: border-box;

	pointer-events: none;
}


.mli__main img {
	display: block;

	width: 100%;
	height: auto;

	max-width: none;

	margin: 0;
	padding: 0;

	border: 0;

	user-select: none;
	-webkit-user-drag: none;
}


/*
 * ================================================================
 * Placeholder
 * ================================================================
 */

.mli__placeholder {
	display: flex;

	align-items: center;
	justify-content: center;

	width: 100%;
	aspect-ratio: 1 / 1;

	padding: 20px;

	box-sizing: border-box;

	background: #f4f4f4;

	color: #777;

	text-align: center;

	font-size: 14px;
}


/*
 * ================================================================
 * Reduced motion
 * ================================================================
 */

@media (prefers-reduced-motion: reduce) {

	.mli__layer--rotate {
		animation: none !important;
	}
}


/*
 * ================================================================
 * Elementor editor
 * ================================================================
 */

.elementor-editor-active .mli__layer,
.elementor-editor-preview .mli__layer {
	pointer-events: none;
}


/*
 * ================================================================
 * Mobile
 * ================================================================
 */

@media (max-width: 767px) {

	.mli {
		width: 100%;
	}

	.mli__stage {
		max-width: 100%;
	}
}