.mosaic-animated-text {
	margin: 0;
	color: var(--mosaic-color-headings, inherit);
	line-height: 1.25;
	overflow-wrap: break-word;
}

h1.mosaic-animated-text { font-size: var(--mosaic-fs-h1, 2.25rem); }
h2.mosaic-animated-text { font-size: var(--mosaic-fs-h2, 1.875rem); }
h3.mosaic-animated-text { font-size: var(--mosaic-fs-h3, 1.5rem); }
h4.mosaic-animated-text { font-size: var(--mosaic-fs-h4, 1.25rem); }

/* All words share one cell: the line is as wide as the longest and never jumps. */
.mosaic-at__stage {
	display: inline-grid;
	vertical-align: bottom;
}

.mosaic-at__word {
	grid-area: 1 / 1;
	white-space: nowrap;
	visibility: hidden;
}

.mosaic-at__word.is-active {
	visibility: visible;
}

.mosaic-at__word.is-sizer {
	visibility: hidden;
}

.mosaic-at__word.mosaic-at__type {
	visibility: visible;
}

/* Typewriter: a blinking caret at the end of the typed text. */
.mosaic-at--typewriter .mosaic-at__type::after {
	content: "";
	display: inline-block;
	inline-size: 0;
	block-size: 1em;
	margin-inline-start: 0.1em;
	border-inline-start: 0.08em solid currentColor;
	vertical-align: -0.1em;
	animation: mosaic-at-blink 1s steps(1) infinite;
}

@keyframes mosaic-at-blink {
	50% {
		opacity: 0;
	}
}

/* Fade and slide: JS switches which word is active. */
.mosaic-at--fade .mosaic-at__word,
.mosaic-at--slide .mosaic-at__word {
	visibility: visible;
	opacity: 0;
	transition: opacity 0.4s ease, transform 0.4s ease;
}

.mosaic-at--slide .mosaic-at__word {
	transform: translateY(0.5em);
}

.mosaic-at--fade .mosaic-at__word.is-active,
.mosaic-at--slide .mosaic-at__word.is-active {
	opacity: 1;
	transform: none;
}

.mosaic-at--slide .mosaic-at__word.is-leaving {
	transform: translateY(-0.5em);
}

/* Styles for the changing word. */
.mosaic-at--style-gradient .mosaic-at__word {
	color: transparent;
	background-image: linear-gradient(90deg, var(--mosaic-at-from, var(--mosaic-color-primary, #2b4acb)), var(--mosaic-at-to, var(--mosaic-color-accent, #c026d3)));
	-webkit-background-clip: text;
	background-clip: text;
}

.mosaic-at--style-highlight .mosaic-at__word {
	padding-inline: 0.25em;
	background-color: var(--mosaic-color-accent, #fde68a);
	border-radius: 0.2em;
}

.mosaic-at--style-underline .mosaic-at__word {
	text-decoration: underline;
	text-decoration-thickness: 0.1em;
	text-underline-offset: 0.15em;
}

.mosaic-at--style-outline .mosaic-at__word {
	color: transparent;
	-webkit-text-stroke: 0.04em currentColor;
}

@media (prefers-reduced-motion: reduce) {
	.mosaic-at--typewriter .mosaic-at__type::after {
		animation: none;
	}

	.mosaic-at__word {
		transition: none;
	}
}

/* On a phone a long word or phrase may wrap instead of running past the edge of the screen. */
@media (max-width: 47.9375rem) {
	.mosaic-at__stage {
		max-inline-size: 100%;
	}

	.mosaic-at__word {
		white-space: normal;
		overflow-wrap: anywhere;
	}
}