/* Hero - styles moved to css/start.css */

/* Text Screen */

.text-animation {
	display: flex;
	align-items: center;
	flex-direction: column;
	margin: 0 5vw;
}

.text-animation__text {
	font-size: 6.5vw;
	line-height: 1.3;
	font-weight: 400;
	text-align: center;
	text-transform: uppercase;
	color: white;
}

.text-animation__blur {
	position: relative;
	display: inline-block;
}

.text-animation__blur::before {
	content: '';
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 100%;
	height: 100%;
	max-width: 13.75vw;
	max-height: 5.6vw;
	border-radius: 50%;
	background-color: var(--text-animation-blue-color);
	filter: blur(6.25vw);
	z-index: 0;
	pointer-events: none;
}

.text-animation__word {
	position: relative;
	display: inline-block;
	transition:
		color 0.3s ease,
		opacity 0.3s ease;
	white-space: nowrap;
}

.text-animation__image-wrapper {
	position: relative;
	display: inline-block;
	flex-shrink: 0;
	overflow: hidden;
	margin: 0 0.5vw;
	width: 0;
	max-width: 14vw;
	height: 5.6vw;
	transition: width 0.1s ease-out;
}

.text-animation__animated-img {
	position: absolute;
	top: 0;
	left: 50%;
	width: 14vw;
	height: 100%;
	border-radius: 0.25rem;
	object-fit: cover;
	transform: translateX(-50%);
}

.text-animation__reveal {
	position: absolute;
	top: 0;
	z-index: 2;
	width: 50%;
	height: 100%;
	background-color: #050506;
	pointer-events: none;
}

.text-animation__reveal.left {
	left: 0;
}

.text-animation__reveal.right {
	right: 0;
}

/* About - styles moved to css/about.css */