/**
 * Motion · Photos (inc/elementor/widgets/photos.php).
 *
 * - mat (row and mosaic layouts): each photo opens like a print in a passe-partout: a rounded
 *   window grows from the middle of the frame to its edges while the photo inside settles from
 *   close up, and the caption follows. On desktop the photos of a row open from the centre
 *   outwards (--d: distance from the middle of the row, set in PHP).
 * - pair-open (pair layout): the two photos arrive overlapping in the middle, like a folded card,
 *   and slide apart to their places. Stacked on phones, they unfold from each other vertically.
 * - Hover (mgk-motion hover.zoom): the photo leans in a little inside its frame.
 */

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

		/* Mat. */
		[data-ml-motion~="mat"]:not(.is-in) :is(.ml-photos__media, .ml-photos__caption) {
			opacity: 0;
		}

		[data-ml-motion~="mat"].is-in:not(.is-instant) .ml-photos__media {
			animation: ml-mat calc(1150ms * var(--mgk-tempo)) cubic-bezier(0.7, 0, 0.2, 1) calc(var(--_d, var(--d, 0)) * 160ms * var(--mgk-tempo)) backwards;
		}

		[data-ml-motion~="mat"].is-in:not(.is-instant) .ml-photos__media img {
			animation: ml-mat-photo calc(1500ms * var(--mgk-tempo)) cubic-bezier(0.2, 0.7, 0.2, 1) calc(var(--_d, var(--d, 0)) * 160ms * var(--mgk-tempo)) backwards;
		}

		[data-ml-motion~="mat"].is-in:not(.is-instant) .ml-photos__caption {
			animation: ml-cap-in calc(600ms * var(--mgk-tempo)) var(--mgk-ease-out) calc((var(--_d, var(--d, 0)) * 160ms + 650ms) * var(--mgk-tempo)) backwards;
		}

		/* Pair. */
		[data-ml-motion~="pair-open"]:not(.is-in) .ml-photos__item {
			opacity: 0;
		}

		[data-ml-motion~="pair-open"] .ml-photos__item:first-child {
			position: relative;
			z-index: 1;
		}

		[data-ml-motion~="pair-open"].is-in:not(.is-instant) .ml-photos__item {
			animation: ml-pair-a calc(1300ms * var(--mgk-tempo)) cubic-bezier(0.65, 0, 0.2, 1) calc(150ms * var(--mgk-tempo)) backwards;
		}

		[data-ml-motion~="pair-open"].is-in:not(.is-instant) .ml-photos__item + .ml-photos__item {
			animation-name: ml-pair-b;
		}

		[data-ml-motion~="pair-open"].is-in:not(.is-instant) .ml-photos__item:first-child .ml-photos__media {
			animation: ml-pair-shadow calc(1300ms * var(--mgk-tempo)) ease-out calc(150ms * var(--mgk-tempo)) backwards;
		}
	}
}

/* Rows dissolve into a grid below the desktop width: every photo opens on its own beat. */
@media (prefers-reduced-motion: no-preference) and (max-width: 1024px) {
	:root.mgk-js:not([data-mgk-edit], [data-mgk-motion="off"], [data-mgk-motion="reduced"]) [data-ml-motion~="mat"] {
		--_d: 0;
	}
}

@media (prefers-reduced-motion: no-preference) and (max-width: 767px) {
	:root.mgk-js:not([data-mgk-edit], [data-mgk-motion="off"], [data-mgk-motion="reduced"]) [data-ml-motion~="pair-open"].is-in:not(.is-instant) .ml-photos__item {
		animation-name: ml-pair-a-v;
	}

	:root.mgk-js:not([data-mgk-edit], [data-mgk-motion="off"], [data-mgk-motion="reduced"]) [data-ml-motion~="pair-open"].is-in:not(.is-instant) .ml-photos__item + .ml-photos__item {
		animation-name: ml-pair-b-v;
	}
}

@keyframes ml-mat {
	from {
		opacity: 1;
		clip-path: inset(22% 18% round 28px);
	}
	to {
		opacity: 1;
		clip-path: inset(0 round 0);
	}
}

@keyframes ml-mat-photo {
	from {
		scale: calc(1 + 0.22 * var(--mgk-intensity));
	}
}

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

/* The first photo comes from where the second sits and the second from the first's place. */
@keyframes ml-pair-a {
	from {
		opacity: 0;
		translate: calc(48% * min(1, var(--mgk-intensity))) 0;
		rotate: -2deg;
	}
	30% {
		opacity: 1;
	}
}

@keyframes ml-pair-b {
	from {
		opacity: 0;
		translate: calc(-48% * min(1, var(--mgk-intensity))) 0;
		rotate: 2deg;
	}
	30% {
		opacity: 1;
	}
}

@keyframes ml-pair-a-v {
	from {
		opacity: 0;
		translate: 0 calc(40% * min(1, var(--mgk-intensity)));
	}
	30% {
		opacity: 1;
	}
}

@keyframes ml-pair-b-v {
	from {
		opacity: 0;
		translate: 0 calc(-40% * min(1, var(--mgk-intensity)));
	}
	30% {
		opacity: 1;
	}
}

@keyframes ml-pair-shadow {
	from {
		box-shadow: 0 24px 48px -12px rgba(46, 35, 39, 0.45);
	}
	to {
		box-shadow: 0 0 0 0 rgba(46, 35, 39, 0);
	}
}