*[data-extend] {
	position: relative;
	overflow: hidden;
}

*[data-extend] * {
	opacity: 0;
}

.extend-right,
.extend-left {
	position: relative;
	z-index: 1;
}

.extend-right::before,
.extend-left::before {
	position: absolute;
	top: 0;
	content: "";
	width: 0;
	height: 100%;
	background: var(--primary-color);
	z-index: 2;
	animation-duration: 0.8s;
	animation-fill-mode: forwards;
}

.extend-right::before {
	left: 0;
	animation-name: LRextendAnime;
}

@keyframes LRextendAnime {
	0% {
		left: 0;
		width: 0;
	}

	45% {
		left: 0;
		width: 100%;
	}

	55% {
		left: 0;
		width: 100%;
	}

	100% {
		left: 100%;
		width: 100%;
	}
}

.extend-left::before {
	right: 0;
	animation-name: RLextendAnime;
}

@keyframes RLextendAnime {
	0% {
		right: 0;
		width: 0;
	}

	45% {
		right: 0;
		width: 100%;
	}

	55% {
		right: 0;
		width: 100%;
	}

	100% {
		right: 100%;
		width: 100%;
	}
}

.extend-right *,
.extend-left * {
	animation-name: extendAnimeContents;
	animation-duration: 0.1s;
	animation-delay: 0.5s;
	animation-fill-mode: forwards;
}

@keyframes extendAnimeContents {
	0% {
		opacity: 0;
	}

	100% {
		opacity: 1;
	}
}