/**
 * Motion · Chapters (inc/elementor/widgets/chapters.php).
 *
 * page-turn: each chapter turns in like the page of a book from its spine at the left: it swings
 * from 95° to flat in 3D, a shadow sweeps off the paper as it lands, and the three chapters
 * follow one another on desktop and tablet. On phones each chapter turns as it arrives.
 */

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

		.ml-chapters__list {
			perspective: 2600px;
			perspective-origin: 0% 40%;
		}

		[data-ml-motion~="page-turn"] {
			position: relative;
			transform-origin: 0% 50%;
			backface-visibility: hidden;
		}

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

		[data-ml-motion~="page-turn"].is-in:not(.is-instant) {
			animation: ml-page-turn calc(1300ms * var(--mgk-tempo)) cubic-bezier(0.2, 0.75, 0.25, 1) calc(var(--_t, var(--i, 0)) * 220ms * var(--mgk-tempo)) backwards;
		}

		/* The shadow of the turning page, gone once it lies flat. */
		[data-ml-motion~="page-turn"].is-in:not(.is-instant)::after {
			content: "";
			position: absolute;
			inset: 0;
			background: linear-gradient(90deg, rgba(46, 35, 39, 0.38), rgba(46, 35, 39, 0) 70%);
			pointer-events: none;
			opacity: 0;
			animation: ml-page-shade calc(1300ms * var(--mgk-tempo)) ease-out calc(var(--_t, var(--i, 0)) * 220ms * var(--mgk-tempo)) backwards;
		}

		/* The number, then the title, settle a beat after the page. */
		[data-ml-motion~="page-turn"].is-in:not(.is-instant) :is(.ml-chapters__number, .ml-chapters__title, .ml-chapters__text) {
			animation: ml-page-ink calc(700ms * var(--mgk-tempo)) var(--mgk-ease-out) calc((var(--_t, var(--i, 0)) * 220ms + 650ms) * var(--mgk-tempo)) backwards;
		}

		[data-ml-motion~="page-turn"].is-in:not(.is-instant) .ml-chapters__text {
			animation-delay: calc((var(--_t, var(--i, 0)) * 220ms + 760ms) * var(--mgk-tempo));
		}
	}
}

@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~="page-turn"] {
		--_t: 0;
	}
}

@keyframes ml-page-turn {
	from {
		opacity: 0.2;
		transform: rotateY(calc(-95deg * min(1, var(--mgk-intensity))));
	}
	40% {
		opacity: 1;
	}
}

@keyframes ml-page-shade {
	from {
		opacity: 1;
	}
	to {
		opacity: 0;
	}
}

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