/**
 * Background Line
 */

.background-line-container {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
}

.background-line {
	position: absolute;
	width: 1px;
	height: 100%;
	background-color: var(--background-line-color, rgba(255, 255, 255, 0.1));
	overflow: hidden;
	/* z-index: -1; */
}

/* Vertical animation */
.background-line::after {
	content: '';
	position: absolute;
	right: 0;

	width: 1px;
	height: clamp(60px, 10vh, 120px);

	transform: translateY(calc(-1 * clamp(60px, 10vh, 120px)));

	background: linear-gradient(
		to bottom,
		rgba(255, 255, 255, 0) 0%,
		var(--background-line-decoration-color, rgba(255, 255, 255, 0.3)) 50%,
		var(--background-line-decoration-color, rgba(255, 255, 255, 0.3)) 90%,
		rgba(255, 255, 255, 0) 100%
	);

	animation: background-line-decoration 7s infinite;
	animation-fill-mode: forwards;
	animation-timing-function: cubic-bezier(.4, .26, .16, .98);
	animation-delay: var(--background-line-delay, 0s);
}

/* Horizontal line */
.background-line--horizontal {
	width: 200vw;
	height: 1px;
	transform: translateX(-50%);
}

/* Horizontal animation */
.background-line--horizontal::after {
	top: 0;
	left: 0;
	right: auto;

	width: clamp(60px, 10vw, 120px);
	height: 1px;

	transform: translateX(calc(-1 * clamp(60px, 10vw, 120px)));

	background: linear-gradient(
		to right,
		rgba(255, 255, 255, 0) 0%,
		var(--background-line-decoration-color, rgba(255, 255, 255, 0.3)) 50%,
		var(--background-line-decoration-color, rgba(255, 255, 255, 0.3)) 90%,
		rgba(255, 255, 255, 0) 100%
	);

	animation: background-line-decoration-horizontal 9s infinite;
	animation-fill-mode: forwards;
	animation-timing-function: cubic-bezier(0.1, 0.1, 0.9, 0.9);
	animation-delay: var(--background-line-delay, 0s);
}

/* Keyframes */
@keyframes background-line-decoration {
	0% {
		top: -120px;
	}

	100% {
		top: calc(100% + 120px);
	}
}

@keyframes background-line-decoration-horizontal {
	0% {
		transform: translateX(calc(-1 * clamp(60px, 10vw, 120px)));
	}

	100% {
		transform: translateX(200vw);
	}
}