/**
 * Motion · La carte (inc/elementor/widgets/carte.php, assets/js/motion/carte.js).
 *
 * - table-card: the dark formule card is laid on the table (rises and settles from a slight
 *   tilt), then one gold glint runs over its prices.
 * - course: each course is printed line by line: the title settles, every dish's hairline is
 *   ruled from left to right and its name and price follow. Its photo arrives as a plate set
 *   down: a circle opening from the middle.
 * - sticky-plate (desktop): one plate stays in the right column while the courses scroll past;
 *   reaching the next course swaps the photo with a circle wipe (carte.js builds the plate from
 *   the course photos; the originals keep their place, hidden, so nothing moves).
 */

.ml-carte__plate {
	display: none;
}

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

		/* Formule card: laid on the table. */
		[data-ml-motion~="table-card"]:not(.is-in) {
			opacity: 0;
		}

		[data-ml-motion~="table-card"].is-in:not(.is-instant) {
			transform-origin: 0 100%;
			animation: ml-card-lay calc(var(--mgk-dur-spring) * 1.3 * var(--mgk-tempo)) var(--mgk-ease-spring) backwards;
		}

		[data-ml-motion~="table-card"].is-in:not(.is-instant) .ml-carte__formule-prices {
			background: linear-gradient(100deg, currentColor 0 40%, #e8c98a 47%, #fff3d6 50%, #e8c98a 53%, currentColor 60% 100%) 100% 0 / 260% 100% no-repeat;
			-webkit-background-clip: text;
			background-clip: text;
			-webkit-text-fill-color: transparent;
			animation: ml-carte-glint calc(1600ms * var(--mgk-tempo)) cubic-bezier(0.45, 0, 0.2, 1) calc(700ms * var(--mgk-tempo)) forwards;
		}

		/* Courses: hidden until printed. */
		[data-ml-motion~="course"]:not(.is-in) :is(.ml-carte__title, .ml-carte__intro, .ml-carte__line, .ml-carte__desc, .ml-carte__figure) {
			opacity: 0;
		}

		[data-ml-motion~="course"] .ml-carte__dish {
			position: relative;
		}

		[data-ml-motion~="course"]:not(.is-instant) .ml-carte__dish {
			border-top-color: transparent;
		}

		/* The hairline, ruled across. */
		[data-ml-motion~="course"]:not(.is-instant) .ml-carte__dish::before {
			content: "";
			position: absolute;
			top: -1px;
			left: 0;
			right: 0;
			height: 1px;
			background: var(--ml-line);
			transform-origin: 0 50%;
			scale: 0 1;
		}

		[data-ml-motion~="course"].is-in:not(.is-instant) .ml-carte__dish::before {
			scale: 1 1;
			transition: scale calc(700ms * var(--mgk-tempo)) cubic-bezier(0.65, 0, 0.35, 1) calc((200ms + var(--i, 0) * 120ms) * var(--mgk-tempo));
		}

		[data-ml-motion~="course"].is-in:not(.is-instant) :is(.ml-carte__title, .ml-carte__intro) {
			animation: ml-ink-in calc(900ms * var(--mgk-tempo)) var(--mgk-ease-out) backwards;
		}

		[data-ml-motion~="course"].is-in:not(.is-instant) .ml-carte__intro {
			animation-delay: calc(100ms * var(--mgk-tempo));
		}

		[data-ml-motion~="course"].is-in:not(.is-instant) :is(.ml-carte__line, .ml-carte__desc) {
			animation: ml-ink-in calc(800ms * var(--mgk-tempo)) var(--mgk-ease-out) calc((380ms + var(--i, 0) * 120ms) * var(--mgk-tempo)) backwards;
		}

		[data-ml-motion~="course"].is-in:not(.is-instant) .ml-carte__desc {
			animation-delay: calc((460ms + var(--i, 0) * 120ms) * var(--mgk-tempo));
		}

		/* The course photo, set down like a plate. */
		[data-ml-motion~="course"].is-in:not(.is-instant) .ml-carte__figure .ml-figure__media {
			animation: ml-plate-wipe calc(1100ms * var(--mgk-tempo)) var(--mgk-ease-inout) calc(150ms * var(--mgk-tempo)) backwards;
		}

		[data-ml-motion~="course"].is-in:not(.is-instant) .ml-carte__figure {
			animation: ml-fade calc(300ms * var(--mgk-tempo)) linear calc(150ms * var(--mgk-tempo)) backwards;
		}

		/* Sticky plate (desktop, built by carte.js). */
		.has-plate .ml-carte__inner {
			position: relative;
		}

		.has-plate .ml-carte__course .ml-carte__figure {
			opacity: 0 !important;
		}

		.has-plate .ml-carte__plate {
			display: block;
			position: absolute;
			z-index: 1;
			pointer-events: none;
		}

		/* Empty until the first course reaches the middle of the window. */
		.ml-carte__plate:not(.is-live) {
			visibility: hidden;
		}

		.ml-carte__plate-stick {
			position: sticky;
			top: max(96px, calc(50vh - 230px));
		}

		.ml-carte__plate-frame {
			position: relative;
			aspect-ratio: 520 / 390;
			overflow: hidden;
			background: var(--ml-c-line);
		}

		.ml-carte__plate-img {
			position: absolute;
			inset: 0;
			display: block;
			width: 100%;
			height: 100%;
			max-width: none;
			object-fit: cover;
			opacity: 0;
		}

		.ml-carte__plate-img.is-shown {
			opacity: 1;
		}

		.ml-carte__plate-img.is-wipe {
			animation: ml-plate-swap calc(1000ms * var(--mgk-tempo)) var(--mgk-ease-inout) both;
		}

		.ml-carte__plate-caps {
			display: grid;
			margin-top: 8px;
		}

		.ml-carte__plate-cap {
			grid-area: 1 / 1;
			opacity: 0;
			translate: 0 6px;
			transition: opacity calc(300ms * var(--mgk-tempo)) linear, translate calc(400ms * var(--mgk-tempo)) var(--mgk-ease-out);
		}

		.ml-carte__plate-cap.is-current {
			opacity: 1;
			translate: 0 0;
			transition-delay: calc(350ms * var(--mgk-tempo));
		}
	}
}

@keyframes ml-card-lay {
	from {
		opacity: 0;
		translate: 0 calc(36px * var(--mgk-intensity));
		rotate: calc(-1.5deg * var(--mgk-intensity));
	}
}

@keyframes ml-carte-glint {
	to {
		background-position: 0 0;
	}
}

@keyframes ml-ink-in {
	from {
		opacity: 0;
		translate: 0 calc(10px * var(--mgk-intensity));
		filter: blur(3px);
	}
}

@keyframes ml-fade {
	from {
		opacity: 0;
	}
}

@keyframes ml-plate-wipe {
	from {
		clip-path: circle(0% at 50% 50%);
	}
	to {
		clip-path: circle(75% at 50% 50%);
	}
}

@keyframes ml-plate-swap {
	from {
		opacity: 1;
		clip-path: circle(0% at 50% 50%);
		scale: 1.08;
	}
	to {
		opacity: 1;
		clip-path: circle(75% at 50% 50%);
		scale: 1;
	}
}