/**
 * MRMVR Elements — entrance motion.
 *
 * Content is visible by default. The pre-animation state is applied only after
 * the script has confirmed it can observe the element, so a page with no
 * JavaScript, a failed script load, or a crawler always sees finished content
 * rather than a blank block waiting on an observer.
 *
 * @package MRMVR\Elements
 * @since   1.8.0
 */

[data-mrx-anim="pending"] {
	opacity: 0;
	transform: translateY(18px);
	will-change: opacity, transform;
}

[data-mrx-anim="in"] {
	opacity: 1;
	transform: none;
	transition:
		opacity 700ms var(--mrmvr-ease, cubic-bezier(0.22, 0.61, 0.36, 1)) var(--mrx-anim-delay, 0ms),
		transform 700ms var(--mrmvr-ease, cubic-bezier(0.22, 0.61, 0.36, 1)) var(--mrx-anim-delay, 0ms);
}

/* The media panels read better easing in from their own edge. */
.mrx-split__media[data-mrx-anim="pending"] {
	transform: translateX(-22px);
}

.mrx-points__media[data-mrx-anim="pending"] {
	transform: scale(0.96);
}

/* Point lists drift in from the side they sit on. */
.mrx-points__col--start .mrx-points__item[data-mrx-anim="pending"] {
	transform: translateX(-18px);
}

.mrx-points__col--end .mrx-points__item[data-mrx-anim="pending"] {
	transform: translateX(18px);
}

/* The header arrow draws attention last, once both labels have settled. */
.mrx-points__header-icon[data-mrx-anim="pending"] {
	transform: translateX(-10px);
}

@media (prefers-reduced-motion: reduce) {
	[data-mrx-anim] {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}
}