/* Panel slide */
.come-in-init {
	transform: translateY(64px);
	opacity: 0;
}

.come-in {
	transform: translateY(64px);
	opacity: 0;
	animation: come-in 0.5s ease-out both;
	animation-delay: 0.1s;
}

.already-visible {
	transform: translateY(0);
	opacity: 1;
	animation: none;
}

@keyframes come-in {
	to {
		transform: translateY(0);
		opacity: 1;
	}
}

/* h1 reveal */

h1.reveal-init {
	clip-path: inset(0 100% 0 0);
}

.reveal:not(.already-visible), .reveal:not(.already-visible)::after {
	animation-duration: 800ms;
	animation-delay: 0.2s;
}

.reveal {
	animation-name: text;
	animation-fill-mode: forwards;
}

.reveal::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: var(--highlight);
	transform: scaleX(0);
	transform-origin: 0 50%;
	animation-name: revealer;
}

@keyframes text {
	from {
        clip-path: inset(0 100% 0 0);
	}
	to {
        clip-path: inset(0 0 0 0);
	}
}

@keyframes revealer {
	0%, 50% {
		transform-origin: 0 50%;
	}
	60%, 100% {
	transform-origin: 100% 50%;		
	}
	60% {
	transform: scaleX(1);
	}
	100% {
	transform: scaleX(0);
	}
}

@media print {
	h1.reveal-init {
		clip-path: inset(0 0 0 0);
	}

	.come-in-init {
		transform: translateY(0);
		opacity: 1;
	}
}