/**
 * Motion · Map (inc/elementor/widgets/location.php): "the paper map".
 *
 * The street map arrives folded in three like a paper map and is opened out flat on the table
 * (assets/js/motion/location.js lays the folded copies over the map). Once it is flat the compass
 * needle swings to north, Tiong Bahru MRT is marked, the walk is inked along the streets, the
 * walk time appears beside it, and the Maison Lune pin drops onto the door with a ring spreading
 * once around it. The photo opens with mgk-motion reveal.mask.inset.
 *
 * 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 map is as designed (the walk
 * mask is full and the ripple invisible).
 */

/* Beats the pins' own fill (.ml-location__pins circle): the ripple is a ring only. */
.ml-location__pins .ml-location__ripple {
	fill: none;
	stroke: var(--ml-map-ink);
	pointer-events: 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~="unfold"] {
			position: relative;
		}

		/* Waiting: the map is still in its folds. */
		[data-ml-motion~="unfold"]:not(.is-in) > .ml-location__svg {
			opacity: 0;
		}

		[data-ml-motion~="unfold"].is-folding > .ml-location__svg {
			visibility: hidden;
		}

		/* The folded sheet (built by the script). */
		.ml-fold {
			position: absolute;
			top: 0;
			left: 0;
			z-index: 1;
			width: 100%;
			height: 100%;
			perspective: 1800px;
			perspective-origin: 0 50%;
			pointer-events: none;
			will-change: transform, opacity;
		}

		.ml-fold__panel {
			position: absolute;
			top: 0;
			transform-origin: 0 50%;
			transform-style: preserve-3d;
		}

		.ml-fold__face {
			position: absolute;
			inset: 0;
			overflow: hidden;
			backface-visibility: hidden;
		}

		/* The creases: a panel facing away is in shadow, one facing the light catches it. */
		.ml-fold__shade {
			position: absolute;
			inset: 0;
			pointer-events: none;
		}

		.ml-fold__shade--back {
			background: linear-gradient(90deg, rgba(46, 35, 39, 0.75), rgba(46, 35, 39, 0.25) 60%, rgba(46, 35, 39, 0.5));
		}

		.ml-fold__shade--front {
			background: linear-gradient(90deg, rgba(255, 250, 240, 0.4), rgba(46, 35, 39, 0.15) 80%, rgba(46, 35, 39, 0.35));
		}

		/* Until the map is flat: no walk, no pins, no names on them. */
		[data-ml-motion~="unfold"].is-in:not(.is-instant):not(.is-unfolded) .ml-location__walk {
			stroke-dasharray: 1 1;
			stroke-dashoffset: 1;
		}

		[data-ml-motion~="unfold"].is-in:not(.is-instant):not(.is-unfolded) :is(.ml-location__pin, .ml-location__start, .ml-location__end, .ml-location__note) {
			opacity: 0;
		}

		[data-ml-motion~="unfold"] :is(.ml-location__pin, .ml-location__ripple, .ml-location__north path, .ml-location__end) {
			transform-box: fill-box;
			transform-origin: center;
		}

		[data-ml-motion~="unfold"] .ml-location__north path {
			transform-origin: 50% 100%;
		}

		/* The compass needle swings to north as the paper settles. */
		[data-ml-motion~="unfold"].is-unfolded .ml-location__north path {
			animation: ml-map-needle calc(1400ms * var(--mgk-tempo)) cubic-bezier(0.3, 1.6, 0.4, 1) backwards;
		}

		/* The station is marked. */
		[data-ml-motion~="unfold"].is-unfolded .ml-location__pin--start {
			animation: ml-map-pop calc(var(--mgk-dur-spring) * var(--mgk-tempo)) var(--mgk-ease-spring) calc(120ms * var(--mgk-tempo)) backwards;
		}

		[data-ml-motion~="unfold"].is-unfolded .ml-location__start {
			animation: ml-map-name calc(520ms * var(--mgk-tempo)) var(--mgk-ease-out) calc(260ms * var(--mgk-tempo)) backwards;
		}

		/* The walk is inked along the streets, dashes and all. */
		[data-ml-motion~="unfold"].is-unfolded .ml-location__walk {
			stroke-dasharray: 1 1;
			animation: ml-map-walk calc(1350ms * var(--mgk-tempo)) cubic-bezier(0.55, 0.05, 0.35, 1) calc(300ms * var(--mgk-tempo)) both;
		}

		[data-ml-motion~="unfold"].is-unfolded .ml-location__note {
			animation: ml-map-name calc(600ms * var(--mgk-tempo)) var(--mgk-ease-out) calc(750ms * var(--mgk-tempo)) backwards;
		}

		/* The Maison Lune pin drops onto the door; a ring spreads once around it. */
		[data-ml-motion~="unfold"].is-unfolded .ml-location__pin--end {
			animation: ml-map-drop calc(900ms * var(--mgk-tempo)) linear calc(1500ms * var(--mgk-tempo)) backwards;
		}

		[data-ml-motion~="unfold"].is-unfolded .ml-location__ripple {
			animation: ml-map-ripple calc(1200ms * var(--mgk-tempo)) cubic-bezier(0.22, 1, 0.36, 1) calc(1880ms * var(--mgk-tempo));
		}

		[data-ml-motion~="unfold"].is-unfolded .ml-location__end {
			animation: ml-map-sign calc(900ms * var(--mgk-tempo)) var(--mgk-ease-out) calc(1850ms * var(--mgk-tempo)) backwards;
		}
	}
}

@keyframes ml-map-needle {
	from {
		rotate: -70deg;
	}
}

@keyframes ml-map-pop {
	from {
		scale: 0;
	}
}

@keyframes ml-map-name {
	from {
		opacity: 0;
		translate: 0 calc(6px * var(--mgk-intensity));
	}
}

@keyframes ml-map-walk {
	from {
		stroke-dashoffset: 1;
	}
	to {
		stroke-dashoffset: 0;
	}
}

/* Falls, lands, gives a little and settles: keyed by hand, so it reads as a pin, not a spring. */
@keyframes ml-map-drop {
	0% {
		opacity: 0;
		translate: 0 calc(-48px * var(--mgk-intensity));
		scale: 0.8;
		animation-timing-function: cubic-bezier(0.5, 0, 0.9, 0.5);
	}
	40% {
		opacity: 1;
		translate: 0 0;
		scale: 1.25 0.75;
		animation-timing-function: cubic-bezier(0.2, 0.6, 0.4, 1);
	}
	62% {
		translate: 0 calc(-8px * var(--mgk-intensity));
		scale: 0.92 1.1;
		animation-timing-function: cubic-bezier(0.5, 0, 0.8, 0.6);
	}
	80% {
		translate: 0 0;
		scale: 1.06 0.95;
	}
	100% {
		scale: 1;
	}
}

@keyframes ml-map-ripple {
	from {
		opacity: 0.8;
		scale: 1;
	}
	to {
		opacity: 0;
		scale: 3.6;
	}
}

@keyframes ml-map-sign {
	from {
		opacity: 0;
		translate: calc(-8px * var(--mgk-intensity)) 0;
		filter: blur(2px);
	}
}