/**
 * Digitalise animated heading.
 */

.dgah {
	margin: 0;
	text-wrap: balance;
}

.dgah__before {
	display: inline;
}

.dgah__rotate {
	display: inline;
}

/* The caret sits on the text baseline and blinks on its own so it does not
   depend on the typing loop running. */
.dgah__caret {
	display: inline-block;
	width: 3px;
	height: 0.86em;
	margin-left: 0.06em;
	vertical-align: text-bottom;
	background: currentColor;
	animation: dgah-blink 1.05s steps(2, start) infinite;
}

@keyframes dgah-blink {
	to {
		visibility: hidden;
	}
}

@media (prefers-reduced-motion: reduce) {
	.dgah__caret {
		animation: none;
		visibility: hidden;
	}
}

/* The rotating line reserves the height of its tallest phrase, so nothing
   below the headline moves when the words change. Every phrase is laid out
   in the same grid cell; the invisible stack sets the height, the live line
   sits on top of it. */
.dgah__slot {
	display: grid;
}

.dgah__slot > * {
	grid-area: 1 / 1;
}

.dgah__ghost {
	display: grid;
	visibility: hidden;
	pointer-events: none;
}

.dgah__ghost > span {
	grid-area: 1 / 1;
}