/**
 * Motion · Closing (inc/elementor/widgets/closing.php).
 *
 * "Last orders": as the closing photo comes up, the room's lights dim, from warm evening light to
 * the dark overlay of the design (on desktop this follows the scroll, elsewhere it plays once).
 * The title lights up word by word as it is read (mgk-motion scroll.text-highlight) and the line
 * under it fades up. The card of questions arrives like the bill on its plate: slid up from below,
 * a little turned, settling straight. The button gets one lap of candlelight around its edge
 * when the section arrives, then rests; on hover its colour spreads from the centre
 * (hover.fill.radial).
 *
 * Behind the mgk-motion gate (see hero.css). The final state is exactly the design.
 */

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

		/* Lights dim. */
		[data-ml-motion~="dim"].is-in:not(.is-instant) .ml-closing__overlay {
			animation: ml-dim calc(2400ms * var(--mgk-tempo)) cubic-bezier(0.33, 0, 0.2, 1) both;
		}

		/* The bill on its plate. */
		[data-ml-motion~="bill"] {
			transform-origin: 20% 100%;
		}

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

		[data-ml-motion~="bill"].is-in:not(.is-instant) {
			animation: ml-bill calc(1200ms * var(--mgk-tempo)) var(--mgk-ease-spring) calc(350ms * var(--mgk-tempo)) both;
		}

		/* The button: wine-dark spreading from the centre on hover, one lap of light on arrival. */
		.ml-closing [data-mgk~="hover.fill.radial"] {
			--mgk-fill: var(--ml-c-wine-dark);
			--mgk-fill-ink: var(--ml-c-paper);
		}

		[data-ml-motion~="beam"]::after {
			content: "";
			position: absolute;
			inset: 0;
			border-radius: inherit;
			padding: 1.5px;
			pointer-events: none;
			background: conic-gradient(from var(--ml-beam-a), transparent 0 68%, rgba(232, 201, 138, 0.9) 84%, #fff6e2 91%, transparent 100%);
			-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
			-webkit-mask-composite: xor;
			mask-composite: exclude;
			opacity: 0;
		}

		[data-ml-motion~="beam"].is-in:not(.is-instant)::after {
			animation: ml-beam calc(2600ms * var(--mgk-tempo)) cubic-bezier(0.45, 0, 0.55, 1) calc(1100ms * var(--mgk-tempo)) both;
		}
	}
}

/* Desktop: the lights follow the scroll, fully dimmed once the section is half way up
   (:not(#…) outranks the time-based rule 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~="dim"] {
			view-timeline-name: --ml-dim;
		}

		:root.mgk-js:not([data-mgk-edit], [data-mgk-motion="off"], [data-mgk-motion="reduced"]) [data-ml-motion~="dim"]:not(#ml-scroll-linked) .ml-closing__overlay {
			animation: ml-dim linear both;
			animation-timeline: --ml-dim;
			animation-range: entry 0% cover 45%;
		}
	}
}

@property --ml-beam-a {
	syntax: "<angle>";
	inherits: false;
	initial-value: 0deg;
}

@keyframes ml-dim {
	from {
		background: #8a5232;
		opacity: 0.16;
	}
}

@keyframes ml-bill {
	from {
		opacity: 0;
		translate: 0 calc(96px * var(--mgk-intensity));
		rotate: calc(-3.5deg * var(--mgk-intensity));
	}
	25% {
		opacity: 1;
	}
}

@keyframes ml-beam {
	0% {
		opacity: 0;
		--ml-beam-a: 0deg;
	}
	12% {
		opacity: 1;
	}
	85% {
		opacity: 1;
	}
	100% {
		opacity: 0;
		--ml-beam-a: 360deg;
	}
}