/**
 * Motion · People (inc/elementor/widgets/team.php): "place cards".
 *
 * Each person is a place card lying flat on the table that stands up on its fold, one after the
 * other, with a little give as it settles. Its monogram ring is then drawn in one stroke like a
 * signature, curling a little past its start, and the initials are inked in. The drawn ring hands
 * over to the monogram's own border, so the section ends exactly as designed.
 *
 * The heading uses mgk-motion reveal.fade.up. 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 section is as designed (the ring stays a 0 × 0 svg).
 */

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

		[data-ml-motion~="placecards"] {
			perspective: 1100px;
			--ml-card-step: 180ms;
		}

		[data-ml-motion~="placecards"] > .ml-team__person {
			transform-origin: 50% 100%;
		}

		/* Before: the cards lie flat. */
		[data-ml-motion~="placecards"]:not(.is-in) > .ml-team__person {
			opacity: 0;
			rotate: x 82deg;
		}

		/* The card stands up on its fold and settles. */
		[data-ml-motion~="placecards"].is-in:not(.is-instant) > .ml-team__person {
			animation:
				ml-card-stand calc(1100ms * var(--mgk-tempo)) cubic-bezier(0.2, 0.9, 0.25, 1.15) calc((120ms + var(--i, 0) * var(--ml-card-step)) * var(--mgk-tempo)) backwards,
				ml-card-shade calc(1100ms * var(--mgk-tempo)) ease-out calc((120ms + var(--i, 0) * var(--ml-card-step)) * var(--mgk-tempo)) backwards;
		}

		/* The signature ring, drawn once the card is up. */
		[data-ml-motion~="placecards"] .ml-team__monogram {
			position: relative;
		}

		[data-ml-motion~="placecards"].is-in:not(.is-instant) .ml-team__ring {
			position: absolute;
			inset: -1px;
			width: calc(100% + 2px);
			height: calc(100% + 2px);
			overflow: visible;
			stroke: currentColor;
			stroke-width: 1.15;
			stroke-linecap: round;
			stroke-linejoin: round;
			stroke-dasharray: 1 1;
			vector-effect: non-scaling-stroke;
			pointer-events: none;
			animation:
				ml-ring-draw calc(1150ms * var(--mgk-tempo)) cubic-bezier(0.55, 0.1, 0.25, 1) calc((620ms + var(--i, 0) * var(--ml-card-step)) * var(--mgk-tempo)) backwards,
				ml-ring-handover calc(500ms * var(--mgk-tempo)) ease-in calc((1850ms + var(--i, 0) * var(--ml-card-step)) * var(--mgk-tempo)) both;
		}

		[data-ml-motion~="placecards"].is-in:not(.is-instant) .ml-team__ring path {
			vector-effect: non-scaling-stroke;
		}

		/* Our story columns use a lighter ring, as their border does. */
		.ml-team--columns [data-ml-motion~="placecards"].is-in:not(.is-instant) .ml-team__ring {
			stroke: color-mix(in srgb, currentColor 45%, transparent);
		}

		/* The monogram's own border takes over from the drawn ring. */
		[data-ml-motion~="placecards"].is-in:not(.is-instant) .ml-team__monogram {
			animation: ml-ring-border calc(500ms * var(--mgk-tempo)) ease-out calc((1850ms + var(--i, 0) * var(--ml-card-step)) * var(--mgk-tempo)) backwards;
		}

		/* The initials are inked in as the stroke closes. */
		[data-ml-motion~="placecards"].is-in:not(.is-instant) .ml-team__initials {
			display: inline-block;
			animation: ml-ink calc(900ms * var(--mgk-tempo)) var(--mgk-ease-out) calc((1250ms + var(--i, 0) * var(--ml-card-step)) * var(--mgk-tempo)) backwards;
		}
	}
}

@keyframes ml-card-stand {
	from {
		opacity: 0;
		rotate: x 82deg;
		translate: 0 calc(10px * var(--mgk-intensity));
	}
	30% {
		opacity: 1;
	}
}

@keyframes ml-card-shade {
	from {
		filter: brightness(0.7);
	}
}

@keyframes ml-ring-draw {
	from {
		stroke-dashoffset: 1;
	}
	to {
		stroke-dashoffset: 0;
	}
}

@keyframes ml-ring-handover {
	to {
		opacity: 0;
	}
}

@keyframes ml-ring-border {
	from {
		border-color: transparent;
	}
}

@keyframes ml-ink {
	from {
		opacity: 0;
		filter: blur(3px);
		scale: 0.9;
	}
}