/**
 * Motion · Facts (inc/elementor/widgets/facts.php).
 *
 * "Stamped on the bill": the hairline above each number is drawn like a knife along the edge of
 * the bill, then each number is pressed down like an ink stamp (it lands a little too big and
 * tilted, presses in with a short bloom of ink, then sits straight), its label after it. The
 * photos under the numbers are laid on the table one by one: each drops in slightly turned and
 * straightens as it settles.
 *
 * Behind the mgk-motion gate (see hero.css): static and complete for reduced motion, the site
 * switch off, the Elementor editor or without JavaScript.
 */

@media (prefers-reduced-motion: no-preference) {
	:root.mgk-js:not([data-mgk-edit], [data-mgk-motion="off"], [data-mgk-motion="reduced"]) {

		/* Order of the numbers and photos: 0, 1, 2... */
		[data-ml-motion~="stamp"] > :nth-child(2),
		[data-ml-motion~="laid"] > :nth-child(2) {
			--n: 1;
		}

		[data-ml-motion~="stamp"] > :nth-child(3),
		[data-ml-motion~="laid"] > :nth-child(3) {
			--n: 2;
		}

		[data-ml-motion~="stamp"] > :nth-child(4),
		[data-ml-motion~="laid"] > :nth-child(4) {
			--n: 3;
		}

		[data-ml-motion~="stamp"] > :nth-child(n + 5),
		[data-ml-motion~="laid"] > :nth-child(n + 5) {
			--n: 4;
		}

		/* The ruled numbers draw their hairline instead of showing the border. */
		.ml-facts--ruled [data-ml-motion~="stamp"] > .ml-facts__number {
			position: relative;
			border-top-color: transparent;
		}

		.ml-facts--ruled [data-ml-motion~="stamp"] > .ml-facts__number::before {
			content: "";
			position: absolute;
			top: -1px;
			left: 0;
			right: 0;
			height: 1px;
			background: var(--ml-line);
			transform-origin: 0 50%;
		}

		[data-ml-motion~="stamp"]:not(.is-in) > .ml-facts__number::before {
			scale: 0 1;
		}

		[data-ml-motion~="stamp"]:not(.is-in) :is(.ml-facts__value, .ml-facts__label),
		[data-ml-motion~="laid"]:not(.is-in) > * {
			opacity: 0;
		}

		[data-ml-motion~="stamp"].is-in:not(.is-instant) > .ml-facts__number::before {
			animation: ml-rule calc(900ms * var(--mgk-tempo)) cubic-bezier(0.65, 0, 0.2, 1) calc(var(--n, 0) * 120ms * var(--mgk-tempo)) both;
		}

		[data-ml-motion~="stamp"].is-in:not(.is-instant) .ml-facts__value {
			display: inline-block;
			transform-origin: 40% 60%;
			animation: ml-stamp calc(760ms * var(--mgk-tempo)) cubic-bezier(0.3, 0, 0.2, 1) calc((420ms + var(--n, 0) * 180ms) * var(--mgk-tempo)) both;
		}

		[data-ml-motion~="stamp"].is-in:not(.is-instant) .ml-facts__label {
			animation: ml-label calc(600ms * var(--mgk-tempo)) var(--mgk-ease-out) calc((760ms + var(--n, 0) * 180ms) * var(--mgk-tempo)) both;
		}

		/* Photos: turned a few degrees each way, dropped and straightened. */
		[data-ml-motion~="laid"] > * {
			--r: -5deg;
		}

		[data-ml-motion~="laid"] > :nth-child(2n) {
			--r: 4deg;
		}

		[data-ml-motion~="laid"] > :nth-child(3n) {
			--r: -2.5deg;
		}

		[data-ml-motion~="laid"].is-in:not(.is-instant) > * {
			transform-origin: 50% 80%;
			animation: ml-laid calc(1100ms * var(--mgk-tempo)) var(--mgk-ease-spring) calc((200ms + var(--n, 0) * 140ms) * var(--mgk-tempo)) both;
		}
	}
}

@keyframes ml-rule {
	from {
		scale: 0 1;
	}
}

@keyframes ml-stamp {
	0% {
		opacity: 0;
		scale: calc(1 + 0.6 * var(--mgk-intensity));
		rotate: calc(-7deg * var(--mgk-intensity));
		filter: blur(3px);
	}
	55% {
		opacity: 1;
		scale: 0.94;
		rotate: 1deg;
		filter: blur(0);
		text-shadow: 0 0 10px currentColor, 0 0 2px currentColor;
	}
	75% {
		scale: 1.03;
		rotate: 0deg;
	}
	100% {
		text-shadow: none;
	}
}

@keyframes ml-label {
	from {
		opacity: 0;
		translate: 0 calc(8px * var(--mgk-intensity));
	}
}

@keyframes ml-laid {
	from {
		opacity: 0;
		translate: 0 calc(-48px * var(--mgk-intensity));
		rotate: calc(var(--r) * var(--mgk-intensity));
		scale: 1.08;
	}
	30% {
		opacity: 1;
	}
}