/* Animated Text — block style for core/paragraph & core/heading
 * Usage: wrap rotating words in <mark> separated by |
 * e.g.  The ultimate toolkit for <mark>WordPress|Shopify|WooCommerce</mark>
 * ------------------------------------------------------------------ */

.is-style-animated-text mark {
	background: none;
	color: inherit;
	display: inline-block;
	position: relative;
	vertical-align: bottom;
}

.is-style-animated-text mark .animated-text__word {
	position: absolute;
	inset-inline-start: 0;
	bottom: 0;
	white-space: nowrap;
	opacity: 0;
	transition: opacity 0.6s ease;
	will-change: opacity;
}

.is-style-animated-text mark .animated-text__word.is-active {
	opacity: 1;
}