/**
 * Motion · Day timeline, "From market to last glass" (inc/elementor/widgets/timeline.php).
 *
 * market-to-moon: the day passes as the section scrolls through the window.
 * - The sand warms into dusk: a rose-to-plum light gathers from the right (kept faint enough
 *   for the ink text to stay well above contrast).
 * - Each step's hairline is ruled in wine, morning to night, one after the other.
 * - A small moon at the top right goes from a thin crescent to full by the last step.
 * The steps themselves come in once, one after the other, when the section arrives. Without
 * scroll-driven animations (Firefox) the hairlines rule in on arrival and the moon rises full.
 */

.ml-timeline__moon {
	display: none;
}

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

		[data-ml-motion~="market-to-moon"] {
			position: relative;
			isolation: isolate;
			view-timeline-name: --ml-day;
		}

		[data-ml-motion~="market-to-moon"] > .ml-container {
			position: relative;
		}

		/* Dusk light, behind the copy. */
		[data-ml-motion~="market-to-moon"]::before {
			content: "";
			position: absolute;
			inset: 0;
			z-index: -1;
			background:
				radial-gradient(120% 140% at 100% 0%, rgba(122, 59, 57, 0.2), rgba(122, 59, 57, 0) 60%),
				linear-gradient(180deg, rgba(196, 128, 92, 0.08), rgba(76, 39, 50, 0.12));
			opacity: 0;
			pointer-events: none;
		}

		/* The moon. */
		.ml-timeline__moon {
			display: block;
			position: absolute;
			top: 0;
			right: 0;
			width: 44px;
			aspect-ratio: 1;
			border-radius: 50%;
			overflow: hidden;
			background: radial-gradient(circle at 38% 36%, #fffaf0, #f2e2c2 60%, #e3cc9f);
			box-shadow: 0 0 0 1px rgba(76, 39, 50, 0.12);
		}

		.ml-timeline__moon::after {
			content: "";
			position: absolute;
			inset: -1px;
			border-radius: 50%;
			background: var(--ml-bg, var(--ml-c-sand));
			translate: -12% 0;
		}

		/* Already in view as the page opened: it is night already. */
		[data-ml-motion~="market-to-moon"].is-instant .ml-timeline__moon::after {
			translate: 110% 0;
		}

		/* Steps: in one after the other. */
		[data-ml-motion~="market-to-moon"]:not(.is-in) :is(.ml-timeline__time, .ml-timeline__body) {
			opacity: 0;
		}

		[data-ml-motion~="market-to-moon"].is-in:not(.is-instant) :is(.ml-timeline__time, .ml-timeline__body) {
			animation: ml-step-in calc(800ms * var(--mgk-tempo)) var(--mgk-ease-out) calc((200ms + var(--i, 0) * 110ms) * var(--mgk-tempo)) backwards;
		}

		[data-ml-motion~="market-to-moon"].is-in:not(.is-instant) .ml-timeline__body {
			animation-delay: calc((300ms + var(--i, 0) * 110ms) * var(--mgk-tempo));
		}

		/* Hairlines ruled in wine over the grey ones (fallback: on arrival). */
		[data-ml-motion~="market-to-moon"] .ml-timeline__step {
			position: relative;
		}

		[data-ml-motion~="market-to-moon"]:not(.is-instant) .ml-timeline__step::before {
			content: "";
			position: absolute;
			top: -1px;
			left: 0;
			right: 0;
			height: 1px;
			background: var(--ml-c-wine);
			transform-origin: 0 50%;
			scale: 0 1;
		}

		[data-ml-motion~="market-to-moon"].is-in:not(.is-instant) .ml-timeline__step::before {
			animation: ml-rule calc(600ms * var(--mgk-tempo)) cubic-bezier(0.65, 0, 0.35, 1) calc((250ms + var(--i, 0) * 160ms) * var(--mgk-tempo)) forwards;
		}

		[data-ml-motion~="market-to-moon"].is-in:not(.is-instant) .ml-timeline__moon {
			animation: ml-step-in calc(900ms * var(--mgk-tempo)) var(--mgk-ease-out) calc(300ms * var(--mgk-tempo)) backwards;
		}

		[data-ml-motion~="market-to-moon"].is-in:not(.is-instant) .ml-timeline__moon::after {
			animation: ml-wax calc(1800ms * var(--mgk-tempo)) var(--mgk-ease-inout) calc(800ms * var(--mgk-tempo)) forwards;
		}
	}
}

/* With scroll-driven animations the day follows the scroll. */
@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) {
		:root.mgk-js:not([data-mgk-edit], [data-mgk-motion="off"], [data-mgk-motion="reduced"]) {

			[data-ml-motion~="market-to-moon"]::before {
				animation: ml-dusk-tint linear both;
				animation-timeline: --ml-day;
				animation-range: cover 20% cover 65%;
			}

			[data-ml-motion~="market-to-moon"]:not(.is-instant) .ml-timeline__step::before,
			[data-ml-motion~="market-to-moon"].is-in:not(.is-instant) .ml-timeline__step::before {
				animation: ml-rule linear both;
				animation-timeline: --ml-day;
				animation-range: cover calc(28% + var(--i, 0) * 4%) cover calc(33% + var(--i, 0) * 4%);
			}

			[data-ml-motion~="market-to-moon"] .ml-timeline__moon::after,
			[data-ml-motion~="market-to-moon"].is-in:not(.is-instant) .ml-timeline__moon::after {
				animation: ml-wax linear both;
				animation-timeline: --ml-day;
				animation-range: cover 25% cover 55%;
			}
		}
	}
}

@media (max-width: 767px) {
	.ml-timeline__moon {
		width: 32px;
	}
}

@keyframes ml-step-in {
	from {
		opacity: 0;
		translate: 0 calc(14px * var(--mgk-intensity));
	}
}

@keyframes ml-rule {
	from {
		scale: 0 1;
	}
	to {
		scale: 1 1;
	}
}

@keyframes ml-wax {
	from {
		translate: -12% 0;
	}
	to {
		translate: 110% 0;
	}
}

@keyframes ml-dusk-tint {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}