/**
 * Motion · Dishes (inc/elementor/widgets/dishes.php).
 *
 * "Served under a cloche": each card waits under a silver dome on its sand plate. When the
 * section arrives the domes are lifted one after another (up and tipped back), the photo opens
 * from the bottom of the plate as a widening ellipse, a wisp of steam rises from the dish and
 * fades, then the dish name and its line come in. On hover (or focus) the photo of a linked
 * card closes in a little more slowly than the theme's own hover.
 *
 * 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"]) {

		[data-ml-motion~="cloche"] > :nth-child(2) {
			--n: 1;
		}

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

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

		/* Each card's start (--d): the domes are lifted one after another. */
		[data-ml-motion~="cloche"] > * {
			--d: calc(var(--n, 0) * 220ms * var(--mgk-tempo));
		}

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

		/* The dome: a polished cover with a knob, sitting on the plate. */
		[data-ml-motion~="cloche"] .ml-dish__media::before {
			content: "";
			position: absolute;
			inset: 0;
			z-index: 2;
			pointer-events: none;
			background:
				radial-gradient(ellipse 5% 3.4% at 50% 54.5%, #f4efe4 0 45%, #a99d88 70%, transparent 74%),
				radial-gradient(ellipse 18% 16% at 38% 70%, rgba(255, 255, 255, 0.7), transparent 72%),
				radial-gradient(ellipse 52% 9% at 50% 93%, #b6aa95 0 62%, rgba(76, 39, 50, 0.18) 72%, transparent 76%),
				radial-gradient(ellipse 50% 48% at 50% 96%, #e4ddcf 0 52%, #c9bfac 74%, #9d917c 84%, transparent 86%);
			opacity: 0;
		}

		/* A wisp of steam (two strokes), only seen while it rises. */
		[data-ml-motion~="cloche"] .ml-dish__media::after {
			content: "";
			position: absolute;
			left: 50%;
			top: 14%;
			z-index: 1;
			width: 96px;
			height: 140px;
			margin-left: -48px;
			pointer-events: none;
			background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 140' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M36 136c-14-18 14-30 0-50s12-32 0-52' opacity='.9'/%3E%3Cpath d='M62 132c-12-16 12-26 0-44s10-28 0-46' opacity='.7'/%3E%3C/svg%3E") center / contain no-repeat;
			filter: blur(1.5px);
			opacity: 0;
		}

		[data-ml-motion~="cloche"]:not(.is-in) .ml-dish__media::before {
			opacity: 1;
		}

		[data-ml-motion~="cloche"]:not(.is-in) .ml-dish__media img {
			clip-path: ellipse(0% 0% at 50% 100%);
		}

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

		[data-ml-motion~="cloche"].is-in:not(.is-instant) .ml-dish__media::before {
			transform-origin: 82% 82%;
			animation: ml-lift calc(900ms * var(--mgk-tempo)) cubic-bezier(0.5, 0, 0.2, 1) calc(var(--d) + 250ms * var(--mgk-tempo)) both;
		}

		[data-ml-motion~="cloche"].is-in:not(.is-instant) .ml-dish__media img {
			animation: ml-plate calc(1100ms * var(--mgk-tempo)) cubic-bezier(0.22, 1, 0.36, 1) calc(var(--d) + 420ms * var(--mgk-tempo)) both;
		}

		[data-ml-motion~="cloche"].is-in:not(.is-instant) .ml-dish__media::after {
			animation: ml-steam calc(2200ms * var(--mgk-tempo)) cubic-bezier(0.3, 0, 0.3, 1) calc(var(--d) + 820ms * var(--mgk-tempo)) both;
		}

		[data-ml-motion~="cloche"].is-in:not(.is-instant) .ml-dish__text {
			animation: ml-dish-text calc(700ms * var(--mgk-tempo)) var(--mgk-ease-out) calc(var(--d) + 900ms * var(--mgk-tempo)) both;
		}

		/* Hover: the dish draws closer. */
		[data-ml-motion~="cloche"] .ml-dish__media img {
			transition: transform 0.4s ease, scale calc(var(--mgk-dur-l) * 1.4 * var(--mgk-tempo)) var(--mgk-ease-out);
		}

		[data-ml-motion~="cloche"] .ml-dish--linked:is(:hover, :focus-within) .ml-dish__media img {
			scale: calc(1 + 0.04 * var(--mgk-intensity) * var(--mgk-k));
		}
	}
}

@keyframes ml-lift {
	0% {
		opacity: 1;
	}
	25% {
		opacity: 1;
		translate: 0 -4%;
	}
	100% {
		opacity: 0;
		translate: 0 calc(-70% * var(--mgk-intensity));
		rotate: calc(-14deg * var(--mgk-intensity));
	}
}

@keyframes ml-plate {
	from {
		clip-path: ellipse(0% 0% at 50% 100%);
		scale: 1.08;
	}
	to {
		clip-path: ellipse(150% 150% at 50% 100%);
	}
}

@keyframes ml-steam {
	0% {
		opacity: 0;
		translate: 0 30px;
		scale: 0.8 0.7;
	}
	35% {
		opacity: 0.75;
	}
	100% {
		opacity: 0;
		translate: 0 calc(-56px * var(--mgk-intensity));
		scale: 1.15 1.2;
	}
}

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