/* #region Theme & Layout */

:root {
	--theme__color-back: rgb(26 26 26);
	--theme__color-fore: rgb(255 255 255);
	--theme__color-accent: rgb(49 229 151 / 100%);

	--theme__gap-1: 0.3rem;
	--theme__gap-2: 0.6rem;
	--theme__gap-3: 1.2rem;
	--theme__gap-4: 2.4rem;
	--theme__gap-5: 4.8rem;

	font-family: "Raleway", sans-serif;
	font-optical-sizing: auto;
	font-weight: 400;
	font-style: normal;
}

* {
	padding: 0;
	margin: 0;
	font: inherit;
	color: inherit;
	touch-action: pan-y;
}

body {
	overflow-x: clip;
	scroll-behavior: smooth;
	background: var(--theme__color-back);
	color: var(--theme__color-fore);
}

/*#endregion*/

/* #region Navigation */

/* General navigation styles */
.navigation {
	position: fixed;
	inset: 0 0 auto 0;
	z-index: 1000;
	display: grid;
	grid-auto-flow: column;
	grid-template-columns: 1fr;
	grid-auto-columns: auto;
	justify-items: start;
	align-items: center;
	gap: var(--theme__gap-4);
	padding: var(--theme__gap-3) var(--theme__gap-4);
	backdrop-filter: blur(15px);
	background: linear-gradient(rgb(from var(--theme__color-back) R G B / 100%),
		rgb(from var(--theme__color-back) R G B / 30%) 30%);
	mask: linear-gradient(white calc(100% - var(--theme__gap-3)), transparent);
}

.navigation__link {
	text-transform: uppercase;
	text-decoration: none;
	transition: color 0.3s linear;
	outline: none;
}

.navigation__link:hover,
.navigation__link:focus,
.navigation__link--active {
	color: var(--theme__color-accent);
	transition-duration: 0.1s;
}

.navigation__link--active {
	text-decoration: none;
	text-transform: uppercase;
}

.navigation__logo {
	width: 2.5rem;
}

.navigation__toggle {
	display: none;
	cursor: pointer;
	flex-direction: column;
	gap: 0.5rem;
	align-items: center;
	justify-content: space-between;
	transition: transform 0.3s ease-in-out;
	position: relative;
	width: 2rem;
	height: 1.5rem;
}

.navigation__toggle span {
	width: 100%;
	height: 0.25rem;
	background-color: #FFF;
	border-radius: 0.25rem;
	transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
	position: absolute;
	left: 0;
}

.navigation__links {
	display: grid;
	gap: var(--theme__gap-4);
	grid-template-columns: repeat(4, auto);
}

.navigation__home {
	display: none;
}

@media only screen and (max-width: 800px) {
	#navigation__logo__link,
	.navigation__logo {
		display: none;
	}

	.navigation__home {
		display: block;
		text-transform: uppercase;
		text-decoration: none;
	}

	.navigation {
		grid-template-columns: 1fr;
	}

	.navigation__links {
		display: none;
		flex-direction: column;
		align-items: center;
		width: 100%;
		gap: var(--theme__gap-4);
		transform: translateY(-20px);
		opacity: 0;
		transition: opacity 0.3s ease, transform 0.3s ease;
	}

	.navigation__links--open {
		display: flex;
		opacity: 1;
		transform: translateY(0);
	}

	.navigation__toggle {
		display: flex;
		float: right;
	}

	.navigation__link {
		display: block;
		text-align: center;
		width: 100%;
		padding: var(--theme__gap-3);
	}

	.navigation__toggle span:nth-child(1) {
		top: 0;
	}
	
	.navigation__toggle span:nth-child(2) {
		top: 50%;
		transform: translateY(-50%);
	}
	
	.navigation__toggle span:nth-child(3) {
		bottom: 0;
	}

	.navigation__toggle.open span:nth-child(1) {
		transform: translateY(9px) rotate(45deg);
	}
	
	.navigation__toggle.open span:nth-child(2) {
		opacity: 0;
	}
	
	.navigation__toggle.open span:nth-child(3) {
		transform: translateY(-9px) rotate(-45deg);
	}
}

/* #endregion */

/* #region Common */

.card {
	display: flex;
	flex-flow: column nowrap;
	align-items: center;
	justify-content: center;
	min-height: 100vh;
}

.button {
	padding: var(--theme__gap-3);
	background: transparent;
	border: 1px solid rgb(from var(--theme__color-fore) R G B / 30%);
	border-radius: 3px;
	outline: none;
	cursor: pointer;
	text-align: center;
	text-decoration: none;
	transition: all 0.3s linear;
}

.button:hover {
	border-color: rgb(from var(--theme__color-fore) R G B / 40%);
	background: rgb(from var(--theme__color-fore) R G B / 3%);
	transition-duration: 0.1s;
}

.button:focus {
	border-color: var(--theme__color-accent);
}

#background-canvas {
	position: fixed;
	inset: 0;
	width: 100%;
	height: 100%;
	z-index: -1;
	pointer-events: none;
	touch-action: none;
}

@property --scroll__coordinate {
	syntax: "<number>";
	inherits: false;
	initial-value: 0.0;
}

@property --scroll__offset {
	syntax: "<number>";
	inherits: false;
	initial-value: 0.0;
}

@property --scroll__length {
	syntax: "<number>";
	inherits: false;
	initial-value: 1.0;
}

@property --scroll__value {
	syntax: "<number>";
	inherits: false;
	initial-value: 0.0;
}

.scroll {
	--scroll__value: calc(min(1.0, max(0.0, (var(--scroll__coordinate) - var(--scroll__offset)) / var(--scroll__length))));
}

.scroll--length-25 { --scroll__length: 0.25; }
.scroll--length-50 { --scroll__length: 0.5; }
.scroll--length-75 { --scroll__length: 0.75; }
.scroll--length-100 { --scroll__length: 1.0; }
.scroll--later-50 { --scroll__offset: 0.5; }
.scroll--later-100 { --scroll__offset: 1.0; }
.scroll--earlier-25 { --scroll__offset: -0.25; }
.scroll--earlier-50 { --scroll__offset: -0.5; }
.scroll--earlier-60 { --scroll__offset: -0.60; }
.scroll--earlier-65 { --scroll__offset: -0.65; }
.scroll--earlier-75 { --scroll__offset: -0.75; }
.scroll--earlier-100 { --scroll__offset: -1.0; }

.scroll--appear {
	opacity: var(--scroll__value);
	perspective: 100px;
	transform: rotate3d(1.0, 0.0, 0.0, calc((1.0 - var(--scroll__value)) * 45deg));
}

.scroll--fade {
	opacity: calc(1.0 - var(--scroll__value) * 0.3);
}

.visible {
	transition: opacity .3s ease-in-out;
}

/*#endregion*/