/**
 * Motion · Room plan (inc/elementor/widgets/floor-plan.php): "service begins".
 *
 * The plan arrives dim, like the dining room before opening. Then the rooms come alive one after
 * the other: in the salle each table catches a candle glow and its four chairs are set around it,
 * the bar counter is lit along its length and the ten stools follow, and last Le Salon, its long
 * table glowing while the chairs are drawn up on both sides. Room labels appear as their room
 * opens. The glows fade back out, so the plan ends exactly as designed.
 *
 * With a mouse, pointing at a room on the plan (or at its name in the room list) brings that room
 * forward and lets the others recede (assets/js/motion/floor-plan.js); nothing is hidden by it.
 *
 * Every rule sits behind the mgk-motion gate: nothing moves for reduced motion, with the site
 * switch off or in the Elementor editor, and without JavaScript the plan is as designed.
 */

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

		/* When each room opens, and how far apart its tables or seats follow. */
		[data-ml-motion~="service"] [data-room="salle"] {
			--ml-open: 350ms;
			--ml-step: 95ms;
		}

		[data-ml-motion~="service"] [data-room="bar"] {
			--ml-open: 1400ms;
			--ml-step: 55ms;
		}

		[data-ml-motion~="service"] [data-room="salon"] {
			--ml-open: 2050ms;
			--ml-step: 60ms;
		}

		[data-ml-motion~="service"] :is(.ml-floor-plan__seats circle, .ml-floor-plan__glow, .ml-floor-plan__badge) {
			transform-box: fill-box;
			transform-origin: center;
		}

		/* Before service: the drawing waits, dim. */
		[data-ml-motion~="service"]:not(.is-in) .ml-floor-plan__plan {
			opacity: 0;
		}

		[data-ml-motion~="service"]:not(.is-in) :is(.ml-floor-plan__tables rect, .ml-floor-plan__counter, .ml-floor-plan__label, .ml-floor-plan__badge) {
			opacity: 0.18;
		}

		[data-ml-motion~="service"]:not(.is-in) .ml-floor-plan__seats circle {
			scale: 0;
		}

		/* The room itself: a dark, cool room warming to the paper of the design. */
		[data-ml-motion~="service"].is-in:not(.is-instant) .ml-floor-plan__plan {
			animation: ml-plan-arrive calc(700ms * var(--mgk-tempo)) var(--mgk-ease-out) backwards;
		}

		[data-ml-motion~="service"].is-in:not(.is-instant) :is(.ml-floor-plan__svg, .ml-floor-plan__street) {
			animation: ml-plan-dawn calc(2900ms * var(--mgk-tempo)) cubic-bezier(0.45, 0, 0.2, 1) calc(150ms * var(--mgk-tempo)) backwards;
		}

		/* Tables and labels light up in turn. */
		[data-ml-motion~="service"].is-in:not(.is-instant) :is(.ml-floor-plan__tables rect, .ml-floor-plan__label, .ml-floor-plan__badge) {
			animation: ml-plan-light calc(520ms * var(--mgk-tempo)) var(--mgk-ease-out) calc((var(--ml-open) + var(--i, 0) * var(--ml-step)) * var(--mgk-tempo)) backwards;
		}

		/* The bar counter is lit from one end to the other. */
		[data-ml-motion~="service"].is-in:not(.is-instant) .ml-floor-plan__counter {
			animation: ml-plan-counter calc(620ms * var(--mgk-tempo)) var(--mgk-ease-inout) calc(var(--ml-open) * var(--mgk-tempo)) backwards;
		}

		/* A candle flares at each table and dies back down. */
		[data-ml-motion~="service"].is-in:not(.is-instant) .ml-floor-plan__glow {
			animation: ml-plan-candle calc(1500ms * var(--mgk-tempo)) cubic-bezier(0.22, 1, 0.36, 1) calc((var(--ml-open) + var(--i, 0) * var(--ml-step) - 60ms) * var(--mgk-tempo)) both;
		}

		/* Chairs are set around their table, one after another. */
		[data-ml-motion~="service"].is-in:not(.is-instant) .ml-floor-plan__seats circle {
			animation: ml-plan-seat calc(var(--mgk-dur-spring) * var(--mgk-tempo)) var(--mgk-ease-spring) calc((var(--ml-open) + 140ms + var(--i, 0) * var(--ml-step) + var(--j, 0) * 45ms) * var(--mgk-tempo)) backwards;
		}

		/* Highlight: the room pointed at comes forward, the others recede. */
		.ml-floor-plan__zone {
			transition: fill-opacity calc(var(--mgk-dur-m) * var(--mgk-tempo)) var(--mgk-ease-ui);
			fill: var(--ml-plan-sand);
			fill-opacity: 0;
		}

		[data-ml-motion~="service"] :is(.ml-floor-plan__tables rect, .ml-floor-plan__seats circle, .ml-floor-plan__counter, .ml-floor-plan__label, .ml-floor-plan__badge) {
			transition: opacity calc(var(--mgk-dur-m) * var(--mgk-tempo)) var(--mgk-ease-ui);
		}

		[data-ml-motion~="service"] .ml-floor-plan__plan[data-ml-room] :is(.ml-floor-plan__tables rect, .ml-floor-plan__seats circle, .ml-floor-plan__counter, .ml-floor-plan__label, .ml-floor-plan__badge)[data-room] {
			opacity: 0.22;
		}

		[data-ml-motion~="service"] .ml-floor-plan__plan[data-ml-room="salle"] :is(.ml-floor-plan__tables rect, .ml-floor-plan__seats circle, .ml-floor-plan__counter, .ml-floor-plan__label, .ml-floor-plan__badge)[data-room="salle"],
		[data-ml-motion~="service"] .ml-floor-plan__plan[data-ml-room="bar"] :is(.ml-floor-plan__tables rect, .ml-floor-plan__seats circle, .ml-floor-plan__counter, .ml-floor-plan__label, .ml-floor-plan__badge)[data-room="bar"],
		[data-ml-motion~="service"] .ml-floor-plan__plan[data-ml-room="salon"] :is(.ml-floor-plan__tables rect, .ml-floor-plan__seats circle, .ml-floor-plan__counter, .ml-floor-plan__label, .ml-floor-plan__badge)[data-room="salon"] {
			opacity: 1;
		}

		[data-ml-motion~="service"] .ml-floor-plan__plan[data-ml-room="salle"] .ml-floor-plan__zone[data-room="salle"],
		[data-ml-motion~="service"] .ml-floor-plan__plan[data-ml-room="bar"] .ml-floor-plan__zone[data-room="bar"],
		[data-ml-motion~="service"] .ml-floor-plan__plan[data-ml-room="salon"] .ml-floor-plan__zone[data-room="salon"] {
			fill-opacity: 0.7;
		}

		/* Phones: the room list follows the room tapped on the plan. */
		[data-ml-motion~="service"] .ml-floor-plan__area {
			transition: opacity calc(var(--mgk-dur-m) * var(--mgk-tempo)) var(--mgk-ease-ui);
		}

		[data-ml-motion~="service"][data-ml-room] .ml-floor-plan__area {
			opacity: 0.45;
		}

		[data-ml-motion~="service"][data-ml-room="salle"] .ml-floor-plan__area[data-room="salle"],
		[data-ml-motion~="service"][data-ml-room="bar"] .ml-floor-plan__area[data-room="bar"],
		[data-ml-motion~="service"][data-ml-room="salon"] .ml-floor-plan__area[data-room="salon"] {
			opacity: 1;
		}
	}
}

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

@keyframes ml-plan-dawn {
	from {
		filter: brightness(0.62) sepia(0.5) saturate(0.9);
	}
	55% {
		filter: brightness(0.92) sepia(0.2) saturate(0.95);
	}
}

@keyframes ml-plan-light {
	from {
		opacity: 0.18;
	}
}

@keyframes ml-plan-counter {
	from {
		opacity: 0.18;
		clip-path: inset(0 100% 0 0);
	}
	to {
		clip-path: inset(0 0 0 0);
	}
}

@keyframes ml-plan-candle {
	0% {
		opacity: 0;
		scale: 0.4;
	}
	22% {
		opacity: 1;
		scale: 1.15;
	}
	38% {
		opacity: 0.78;
		scale: 1;
	}
	52% {
		opacity: 0.92;
	}
	100% {
		opacity: 0;
		scale: 1.05;
	}
}

@keyframes ml-plan-seat {
	from {
		scale: 0;
	}
}