/* Firefox: prevent canvas flickering from the animated ancestor filter. */
@supports (-moz-appearance: none) {
	#hero-content {
		/* Override the inline filter animated by GSAP. */
		filter: none !important;
	}
}

/* Caret */
#name::after {
	content: '';
	padding-left: 0.4rem;
	border-right: 0.5rem solid transparent;
	animation: 0.6s linear infinite alternate blinking;
}

@keyframes blinking {
	0% {
		border-color: inherit;
	}
	90% {
		border-color: transparent;
	}
}

/* Entrances */
.no-js #enzo-face {
	--tx: 0;
	--ty: -15%;
	animation: appearFrom 0.6s forwards;
}

.no-js #short-description {
	--tx: 0;
	--ty: -15%;
	animation: appearFrom 0.6s forwards;
}

.no-js #name {
	--tx: 0;
	--ty: -55%;
	animation: appearFrom 0.6s forwards;
}

.no-js #profile-buttons > a {
	--tx: 0;
	--ty: -35%;
	animation: appearFrom 0.6s forwards;
}

@media (width >= 64rem) {
	.no-js #enzo-face {
		--tx: 15%;
		--ty: 0;
	}

	.no-js #name,
	.no-js #short-description {
		--tx: -15%;
		--ty: 0;
	}

	.no-js #profile-buttons > a {
		--tx: -35%;
		--ty: 0;
	}
}

@keyframes appearFrom {
	from {
		opacity: 0;
		transform: translate(var(--tx), var(--ty));
	}
	to {
		opacity: 1;
		transform: translate(0, 0);
	}
}

#enzo-face,
#short-description,
#name,
#profile-buttons > a {
	opacity: 0;
}