#cl-hero-intro-overlay {
	position: fixed;
	inset: 0;
	z-index: 999999;
	opacity: 1;
	pointer-events: none;
}

/* Guards against a JS load failure leaving the overlay stuck permanently
   covering the page — if the script never runs, this still fades out and
   disables itself on its own after a generous fallback delay. */
#cl-hero-intro-overlay {
	animation: cl-hero-intro-fallback-fade 0.01s 5s forwards;
}

@keyframes cl-hero-intro-fallback-fade {
	to {
		opacity: 0;
		visibility: hidden;
	}
}

/* Words start faint (15%) rather than invisible. Blurred at 15% they look
   the same as nothing, but the heading counts as painted from the first
   frame. Lighthouse otherwise treated the page's main content as not
   there until the last word had faded in. */
.cl-hero-intro-word {
	display: inline-block;
	opacity: 0.15;
	filter: blur(8px);
	will-change: opacity, filter;
}

.cl-hero-intro-word--visible {
	opacity: 1;
	filter: blur(0);
}

/* Prevents scrolling the real page underneath while the overlay is
   covering it. Removed by JS once the overlay finishes. */
html.cl-hero-intro-active,
body.cl-hero-intro-active {
	overflow: hidden;
	height: 100%;
}