/**
 * Motion · Reservation (inc/elementor/widgets/reservation.php).
 *
 * - Each step arrives like the next page of a menu being turned: the booking column swings in
 *   from its left edge, then its groups of options settle one after another.
 * - The button that sends a step spins while the next one loads (mgk-motion ui.button.loading,
 *   assets/js/motion/reservation.js); a details form with errors shakes (feedback.shake) and its
 *   fields light softly on focus (ui.input.focus).
 * - "Request received": a crescent moon waxes to full above the heading, instead of a tick.
 */

/* The moon of the received request: drawn full when nothing moves. */
.ml-reservation__moon {
	position: relative;
	display: block;
	width: 56px;
	height: 56px;
	overflow: hidden;
	border-radius: 50%;
	background: radial-gradient(circle at 36% 34%, #fffaf0 0%, #f0dfbd 58%, #d8bd8c 100%);
	box-shadow: 0 0 0 1px rgba(76, 39, 50, 0.12);
	isolation: isolate;
}

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

		/* A menu page turning in from its spine. In the first view it runs at first paint; further
		   down the page it waits to be scrolled to. */
		[data-ml-motion~="menu-turn"] {
			perspective: 1600px;
		}

		[data-ml-motion~="menu-turn"]:not(.is-in, [data-mgk-first] *) > * {
			opacity: 0;
		}

		[data-ml-motion~="menu-turn"]:is(.is-in, [data-mgk-first] *):not(.is-instant) > * {
			transform-origin: 0 50%;
			animation: ml-menu-turn calc(1100ms * var(--mgk-tempo)) cubic-bezier(0.2, 0.9, 0.25, 1) calc(250ms * var(--mgk-tempo)) both;
		}

		[data-ml-motion~="menu-turn"]:is(.is-in, [data-mgk-first] *):not(.is-instant) :is(.ml-reservation__group, .ml-reservation__field, .ml-reservation__actions, .ml-reservation__lines) {
			animation: ml-menu-line calc(700ms * var(--mgk-tempo)) var(--mgk-ease-out) both;
		}

		[data-ml-motion~="menu-turn"]:is(.is-in, [data-mgk-first] *):not(.is-instant) :is(.ml-reservation__group, .ml-reservation__field):nth-of-type(1) {
			animation-delay: calc(650ms * var(--mgk-tempo));
		}

		[data-ml-motion~="menu-turn"]:is(.is-in, [data-mgk-first] *):not(.is-instant) :is(.ml-reservation__group, .ml-reservation__field):nth-of-type(2) {
			animation-delay: calc(740ms * var(--mgk-tempo));
		}

		[data-ml-motion~="menu-turn"]:is(.is-in, [data-mgk-first] *):not(.is-instant) :is(.ml-reservation__group, .ml-reservation__field):nth-of-type(3) {
			animation-delay: calc(830ms * var(--mgk-tempo));
		}

		[data-ml-motion~="menu-turn"]:is(.is-in, [data-mgk-first] *):not(.is-instant) :is(.ml-reservation__group, .ml-reservation__field):nth-of-type(n + 4) {
			animation-delay: calc(920ms * var(--mgk-tempo));
		}

		[data-ml-motion~="menu-turn"]:is(.is-in, [data-mgk-first] *):not(.is-instant) :is(.ml-reservation__actions, .ml-reservation__lines) {
			animation-delay: calc(1000ms * var(--mgk-tempo));
		}

		/* The moon waxes: its shadow slides away, then a soft glow breathes out once. */
		[data-ml-motion~="full-moon"] .ml-reservation__moon::after {
			content: "";
			position: absolute;
			inset: -1px;
			border-radius: 50%;
			background: var(--ml-bg, #f2efe7);
			animation: ml-wax calc(2200ms * var(--mgk-tempo)) cubic-bezier(0.45, 0, 0.2, 1) calc(900ms * var(--mgk-tempo)) both;
		}

		[data-ml-motion~="full-moon"] .ml-reservation__moon {
			animation: ml-moon-glow calc(1600ms * var(--mgk-tempo)) var(--mgk-ease-out) calc(2900ms * var(--mgk-tempo)) both;
		}
	}
}

@keyframes ml-menu-turn {
	from {
		opacity: 0;
		transform: rotateY(calc(-28deg * var(--mgk-intensity))) translateX(-12px);
	}
}

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

@keyframes ml-wax {
	from {
		translate: -18% 0;
	}
	to {
		translate: 104% 0;
	}
}

@keyframes ml-moon-glow {
	from {
		box-shadow: 0 0 0 1px rgba(76, 39, 50, 0.12), 0 0 0 0 rgba(232, 201, 138, 0.55);
	}
	to {
		box-shadow: 0 0 0 1px rgba(76, 39, 50, 0.12), 0 0 0 22px rgba(232, 201, 138, 0);
	}
}