/**
 * Motion · L'ardoise (inc/elementor/widgets/board.php).
 *
 * The chalkboard is hung on its hook: it arrives swinging from a point above its top edge and
 * settles after a few smaller swings. Then today's board is written in chalk, line by line in
 * reading order (label, date, each group and its rows): every line appears behind a grainy
 * chalk edge that runs left to right, with a little chalk dust that clears, the dotted leader
 * is drawn out to the price, and the price is written last. assets/js/motion/board.js numbers
 * the lines (--c).
 *
 * Behind the mgk-motion gate (see hero.css).
 */

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

		/* Swing on the hook. */
		[data-ml-motion~="swing"] {
			transform-origin: 50% -72px;
		}

		[data-ml-motion~="swing"]:not(.is-in) {
			opacity: 0;
		}

		[data-ml-motion~="swing"].is-in:not(.is-instant) {
			animation: ml-swing calc(2200ms * var(--mgk-tempo)) cubic-bezier(0.25, 0.6, 0.3, 1) both;
		}

		/* Chalk: a grainy edge runs across each line. */
		[data-ml-motion~="chalk"] :is(.ml-board__label, .ml-board__date, .ml-board__group-label, .ml-board__name, .ml-board__price) {
			-webkit-mask-image: linear-gradient(90deg, #000 0 38%, rgba(0, 0, 0, 0.45) 41%, #000 43%, rgba(0, 0, 0, 0.25) 46%, rgba(0, 0, 0, 0.6) 47%, transparent 50% 100%);
			mask-image: linear-gradient(90deg, #000 0 38%, rgba(0, 0, 0, 0.45) 41%, #000 43%, rgba(0, 0, 0, 0.25) 46%, rgba(0, 0, 0, 0.6) 47%, transparent 50% 100%);
			-webkit-mask-size: 260% 100%;
			mask-size: 260% 100%;
			-webkit-mask-repeat: no-repeat;
			mask-repeat: no-repeat;
			-webkit-mask-position: 0 0;
			mask-position: 0 0;
		}

		[data-ml-motion~="chalk"]:not(.is-in) :is(.ml-board__label, .ml-board__date, .ml-board__group-label, .ml-board__name, .ml-board__price) {
			-webkit-mask-position: 100% 0;
			mask-position: 100% 0;
		}

		[data-ml-motion~="chalk"]:not(.is-in) .ml-board__leader {
			scale: 0 1;
		}

		[data-ml-motion~="chalk"].is-in:not(.is-instant) :is(.ml-board__label, .ml-board__date, .ml-board__group-label, .ml-board__name) {
			animation: ml-chalk calc(var(--w, 700ms) * var(--mgk-tempo)) cubic-bezier(0.45, 0.05, 0.4, 1) calc((500ms + var(--c, 0) * 190ms) * var(--mgk-tempo)) both;
		}

		[data-ml-motion~="chalk"].is-in:not(.is-instant) .ml-board__date {
			--w: 1200ms;
		}

		[data-ml-motion~="chalk"].is-in:not(.is-instant) .ml-board__leader {
			transform-origin: 0 50%;
			animation: ml-leader calc(420ms * var(--mgk-tempo)) linear calc((950ms + var(--c, 0) * 190ms) * var(--mgk-tempo)) both;
		}

		[data-ml-motion~="chalk"].is-in:not(.is-instant) .ml-board__price {
			animation: ml-chalk calc(380ms * var(--mgk-tempo)) cubic-bezier(0.45, 0.05, 0.4, 1) calc((1250ms + var(--c, 0) * 190ms) * var(--mgk-tempo)) both;
		}
	}
}

@keyframes ml-swing {
	0% {
		opacity: 0;
		rotate: calc(-9deg * var(--mgk-intensity));
		translate: 0 -24px;
	}
	12% {
		opacity: 1;
	}
	32% {
		rotate: calc(5deg * var(--mgk-intensity));
		translate: 0 0;
	}
	52% {
		rotate: calc(-2.4deg * var(--mgk-intensity));
	}
	70% {
		rotate: calc(1.1deg * var(--mgk-intensity));
	}
	86% {
		rotate: -0.4deg;
	}
	100% {
		rotate: 0deg;
	}
}

@keyframes ml-chalk {
	from {
		-webkit-mask-position: 100% 0;
		mask-position: 100% 0;
		filter: blur(0.6px);
		text-shadow: 0 0 6px currentColor;
	}
	70% {
		filter: blur(0);
	}
	to {
		-webkit-mask-position: 0 0;
		mask-position: 0 0;
		text-shadow: 0 0 0 transparent;
	}
}

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