/*** Module: Hero — Style: typing_highlight ***/

.module.hero.style-typing-highlight {
	--prefix-in: 0.4s;
	--type-step: 130ms;
	/* Predicate starts typing 150ms after the prefix has come in. */
	--type-start: calc(var(--prefix-in) + 150ms);
	color: var(--black);
	padding-block: var(--module-spacing-xlarge) var(--module-spacing-small);
}

.module.hero.style-typing-highlight .grid {
	gap: 0;
}

.module.hero.style-typing-highlight .eyebrow,
.module.hero.style-typing-highlight :is(.heading-1, .heading-2) {
	grid-column: 2 / span 10;
	text-align: center;
}

.module.hero.style-typing-highlight .eyebrow + :is(.heading-1, .heading-2) {
	margin-top: var(--text-spacing-xsmall);
}

/* H2 runs the prefix + predicate on one line (drops the H1 line break). */
.module.hero.style-typing-highlight .heading-2 br {
	display: none;
}

.module.hero.style-typing-highlight.align-left .eyebrow,
.module.hero.style-typing-highlight.align-left :is(.heading-1, .heading-2) {
	grid-column: 1 / span 10;
	text-align: left;
}

/* Per-char caret so the cursor advances with the text; opacity driven by the animations below. */
.module.hero.style-typing-highlight .char::after {
	background: currentColor;
	bottom: 4px;
	content: '';
	display: inline-block;
	height: 0.85em;
	opacity: 0;
	position: absolute;
	vertical-align: text-bottom;
	width: 2px;
}

/* Cursorless reveal (no text-editor look) — centred heroes and the left-aligned
   platform hero both drop the caret. */
.module.hero.style-typing-highlight:is(.align-center, .align-left) .char::after {
	display: none;
}

/***************************************************************************************************************************************************************************************/
/* MQ MAX-WIDTH 1400 - Smaller Desktop Sizes */
/***************************************************************************************************************************************************************************************/

@media only screen and (max-width: calc(1400rem / 16)) {

	.module.hero.style-typing-highlight {
		padding-top: var(--module-spacing-large);
	}

}

/***************************************************************************************************************************************************************************************/
/* MQ MAX-WIDTH 950 - Tablet Sizes */
/***************************************************************************************************************************************************************************************/

@media only screen and (max-width: calc(950rem / 16)) {

	.module.hero.style-typing-highlight {
		padding-bottom: var(--text-spacing-xlarge);
	}

	/* .align-left echoed so the full-width stack beats its 1 / span 10 variant. */
	.module.hero.style-typing-highlight .eyebrow,
	.module.hero.style-typing-highlight :is(.heading-1, .heading-2),
	.module.hero.style-typing-highlight.align-left .eyebrow,
	.module.hero.style-typing-highlight.align-left :is(.heading-1, .heading-2) {
		grid-column: 1 / -1;
	}

}

/***************************************************************************************************************************************************************************************/
/* MQ MAX-WIDTH 650 - Mobile Sizes */
/***************************************************************************************************************************************************************************************/

@media only screen and (max-width: calc(650rem / 16)) {

	/* Authored line breaks are tuned to the desktop measure — let the headline wrap
	   to the column instead. */
	.module.hero.style-typing-highlight h1 br {
		display: none;
	}

}

@media (prefers-reduced-motion: reduce) {

	.module.hero.style-typing-highlight .char:last-child::after {
		opacity: 1;
	}

}

@media (prefers-reduced-motion: no-preference) {

	/* X comes in first; Y (the typed predicate) fires 150ms later via --type-start. */
	.module.hero.style-typing-highlight .prefix {
		animation: type-in var(--prefix-in) ease forwards;
		opacity: 0;
	}

	.module.hero.style-typing-highlight .char {
		animation: type-in 1ms linear forwards;
		animation-delay: calc(var(--i, 0) * var(--type-step) + var(--type-start));
		opacity: 0;
	}

	/* Cursorless heroes ease each char in rather than snapping. */
	.module.hero.style-typing-highlight:is(.align-center, .align-left) .char {
		animation-duration: 0.2s;
		animation-timing-function: ease-out;
	}

	/* ...and type noticeably quicker, so long predicates don't drag. */
	.module.hero.style-typing-highlight:is(.align-center, .align-left) {
		--type-step: 60ms;
	}

	/* Non-last caret: appears with its char, vanishes when the next char takes over. */
	.module.hero.style-typing-highlight .char:not(:last-child)::after {
		animation:
			type-in 1ms linear forwards,
			cursor-vanish 1ms linear forwards;
		animation-delay:
			calc(var(--i, 0) * var(--type-step) + var(--type-start)),
			calc((var(--i, 0) + 1) * var(--type-step) + var(--type-start));
	}

	/* Last caret: appears → blinks → vanishes after the period lands. */
	.module.hero.style-typing-highlight .char:last-child::after {
		animation:
			type-in 1ms linear forwards,
			cursor-blink 0.7s steps(1) infinite,
			cursor-vanish 0.4s ease forwards;
		animation-delay:
			calc(var(--i, 0) * var(--type-step) + var(--type-start)),
			calc((var(--i, 0) + 1) * var(--type-step) + var(--type-start)),
			calc(var(--total-chars, 10) * var(--type-step) + var(--type-start) + 1.5s);
	}

	/* Period drops in just before the last caret leaves. */
	.module.hero.style-typing-highlight .period {
		animation: type-in 1ms linear forwards;
		animation-delay: calc(var(--total-chars, 10) * var(--type-step) + var(--type-start) + 1.2s);
		opacity: 0;
	}

}

@keyframes type-in {
	to {
		opacity: 1;
	}
}

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

@keyframes cursor-vanish {
	to {
		opacity: 0;
	}
}