/**
 * Motion · Wine (inc/elementor/widgets/feature.php).
 *
 * "The pour": the sand panel is filled from the bottom like a glass. Its colour rises with a
 * gently moving surface, and a wine-red meniscus rides on top and fades when the panel is full
 * (--ml-wine, registered below so it can fade).
 * On desktop the level follows the scroll (from when the panel enters until it is about half
 * way up the screen; scrolling back lowers it); elsewhere it pours once in about two seconds.
 * The title fades up, the wines by the glass come in one by one from the left (mgk-motion
 * reveal.stagger.right) and the small photo drifts against the scroll (scroll.parallax).
 *
 * Behind the mgk-motion gate (see hero.css). Without it the panel is simply sand.
 */

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

		/* The panel's colour moves to a layer that can rise; the surface is a wave on its top. */
		[data-ml-motion~="pour"] {
			position: relative;
			isolation: isolate;
			overflow: clip;
			background: transparent;
		}

		[data-ml-motion~="pour"]::before {
			content: "";
			position: absolute;
			top: -16px;
			left: 0;
			right: 0;
			bottom: 0;
			z-index: -1;
			pointer-events: none;
			background: linear-gradient(var(--ml-wine), transparent 34px), var(--ml-bg);
			-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 16'%3E%3Cpath d='M0 8C20 2 40 2 60 8s40 6 60 0 30-6 40-2V16H0z'/%3E%3C/svg%3E") 0 0 / 160px 16px repeat-x, linear-gradient(#000, #000) 0 15px / 100% 100% no-repeat;
			mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 16'%3E%3Cpath d='M0 8C20 2 40 2 60 8s40 6 60 0 30-6 40-2V16H0z'/%3E%3C/svg%3E") 0 0 / 160px 16px repeat-x, linear-gradient(#000, #000) 0 15px / 100% 100% no-repeat;
		}

		[data-ml-motion~="pour"]:not(.is-in)::before {
			translate: 0 100%;
		}

		[data-ml-motion~="pour"].is-in:not(.is-instant)::before {
			animation: ml-pour calc(2000ms * var(--mgk-tempo)) cubic-bezier(0.45, 0.05, 0.25, 1) calc(200ms * var(--mgk-tempo)) both;
		}
	}
}

/* Desktop: the level follows the scroll (:not(#…) outranks the time-based pour above). */
@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) and (min-width: 1025px) {
		:root.mgk-js:not([data-mgk-edit], [data-mgk-motion="off"], [data-mgk-motion="reduced"]) [data-ml-motion~="pour"] {
			view-timeline-name: --ml-pour;
		}

		:root.mgk-js:not([data-mgk-edit], [data-mgk-motion="off"], [data-mgk-motion="reduced"]) [data-ml-motion~="pour"]:not(#ml-scroll-linked)::before {
			translate: none;
			animation: ml-pour linear both;
			animation-timeline: --ml-pour;
			animation-range: entry 20% cover 55%;
		}
	}
}

@property --ml-wine {
	syntax: "<color>";
	inherits: false;
	initial-value: transparent;
}

@keyframes ml-pour {
	0% {
		translate: 0 100%;
		--ml-wine: rgba(92, 41, 56, 0.6);
		-webkit-mask-position: 0 0, 0 15px;
		mask-position: 0 0, 0 15px;
	}
	75% {
		--ml-wine: rgba(92, 41, 56, 0.45);
	}
	100% {
		translate: 0 0;
		--ml-wine: rgba(92, 41, 56, 0);
		-webkit-mask-position: -320px 0, 0 15px;
		mask-position: -320px 0, 0 15px;
	}
}