/* ============================================================
   Breakdance Typing Header — base styles
   These are global (not scoped) so the effect is reliable on
   first paint. Control-driven overrides live in the element's
   scoped css.twig.
   ============================================================ */

.bd-typing-header {
	margin: 0;
	text-align: left;
	direction: ltr;
}

.bd-typing-header__stage {
	display: inline-block;
	text-align: left;
	direction: ltr;
	white-space: pre-wrap;
	word-break: break-word;
}

.bd-typing-header__text {
	white-space: pre-wrap;
}

.bd-typing-header__caret {
	display: inline-block;
	width: 0.09em;
	min-width: 2px;
	height: 1em;
	margin: 0;
	padding: 0;
	border: 0;
	background-color: currentColor;
	letter-spacing: 0;
	vertical-align: text-bottom;
	animation: bd-th-blink 1.05s steps(1, end) infinite;
}

/* Collapse the caret completely while there is nothing typed yet, so it
   reserves no space and the first letter starts flush at the left. */
.bd-typing-header__caret.is-empty {
	display: none;
}

/* Used when the user disables blinking, or for reduced motion. */
.bd-typing-header__caret.no-blink {
	animation: none;
}

/* Full text for screen readers / no-JS / SEO. Visually hidden. */
.bd-typing-header__sr {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

@keyframes bd-th-blink {
	0%, 50%      { opacity: 1; }
	50.01%, 100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
	.bd-typing-header__caret {
		animation: none;
	}
}