@import url("https://fonts.googleapis.com/css2?family=Inter:wght@700&display=swap");
/* Styles for the ScrollToTop button */
.scroll-to-top-btn {
    position: fixed;
    bottom: 32px;
    right: 32px;
    padding: 12px 20px;
    font-size: 1rem;
    border: none;
    border-radius: 6px;
    background: #32CD32;
    color: #fff;
    cursor: pointer;
    /* Enhanced shadow for more depth */
    box-shadow: 0 4px 24px 0 rgba(0,0,0,0.25), 0 1.5px 6px 0 rgba(0,0,0,0.18);
    z-index: 1000;
    display: none;
}
:root {
	--bg-color: #333333;
	--txt-color: #efefef;
	--reveal-active: #ffffff;
	--reveal-inactive: #333333;
}
.spacer {
	height: 30vh;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	line-height: 0.1em;

	h1 {
		display: block;
	}

	&:first-child {
		height: 100vh;
	}
}
.container {
	max-width: 900px;
	padding: 4vh 1.5rem;
	box-sizing: border-box;
	margin: 0 auto;
	container-type: inline-size;
}
@media (max-width: 900px) {
	.container {
		max-width: 100vw;
		padding: 3vh 1rem;
	}
}
@media (max-width: 600px) {
	.container {
		padding: 2vh 0.5rem;
	}
}
.text-reveal-container {
	background-color: var(--bg-color, #000);
	padding: 6vh 0;

	& .text-reveal {
		font-size: 3rem;
		font-weight: 700;
		line-height: 1.4;
		margin: 0;
		--line-height: 50.4px;
		--fully-active-y: 0px;
		--active-x: 0%;
		--reveal-active: #ffffff;
		--reveal-inactive: #333333;
		color: transparent;
		background-clip: text;
		-webkit-background-clip: text;
		background-image:
			linear-gradient(
				to right,
				var(--reveal-active) 0%,
				var(--reveal-active) var(--active-x),
				transparent var(--active-x)
			),
			linear-gradient(
				to bottom,
				var(--reveal-active) 0%,
				var(--reveal-active) var(--fully-active-y),
				var(--reveal-inactive) var(--fully-active-y)
			);
		background-size:
			100% var(--line-height),
			100% 100%;
		background-position:
			0 var(--fully-active-y),
			0 0;
		background-repeat: no-repeat;

		& .highlight-reveal {
			--highlight-reveal: #ffd600;
			--highlight-unrevealed: var(--reveal-inactive);
			display: inline-block;
			background-image: linear-gradient(
				to right,
				var(--highlight-reveal) 0%,
				var(--highlight-reveal) var(--active-x),
				var(--highlight-unrevealed) var(--active-x)
			);
			background-size: 100% 100%;
			background-repeat: no-repeat;
			-webkit-background-clip: text;
			background-clip: text;
			-webkit-text-fill-color: transparent;
			text-fill-color: transparent;
			position: relative;
			z-index: 2;
		}

		&.text-reveal[data-dot]::after {
			content: "";
			display: inline-block;
			width: 5px;
			height: 5px;
			background-color: var(--highlight-reveal);
			margin-top: 10px;
			margin-bottom: 0px;
			margin-left: -10px;

			background-image: linear-gradient(
				to right,
				var(--highlight-reveal, #ffd600) 0%,
				var(--highlight-reveal, #ffd600) var(--dot-active-x, 0%),
				var(--highlight-unrevealed, var(--reveal-inactive)) var(--dot-active-x, 0%)
			);
		}
	}

	& .text-reveal[data-single-line] {
		white-space: nowrap;
	}
}
/* Styles for the ScrollToTop button */
.scroll-to-top-btn {
    position: fixed;
    bottom: 32px;
    right: 32px;
    padding: 12px 20px;
    font-size: 1rem;
    border: none;
    border-radius: 6px;
    background: #32CD32;
    color: #fff;
    cursor: pointer;
    /* Enhanced shadow for more depth */
    box-shadow: 0 4px 24px 0 rgba(0,0,0,0.25), 0 1.5px 6px 0 rgba(0,0,0,0.18);
    z-index: 1000;
    display: none;
}