/* STYLES.CSS */





/* ——————————	FONTS		—————————— */

@font-face {
	font-family: 'archiaregular';
	src: url('/assets/fonts/archia-regular-webfont.eot');
	src: url('/assets/fonts/archia-regular-webfont.eot?#iefix') format('embedded-opentype'),
		 url('/assets/fonts/archia-regular-webfont.woff2') format('woff2'),
		 url('/assets/fonts/archia-regular-webfont.woff') format('woff'),
		 url('/assets/fonts/archia-regular-webfont.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'archiathin';
	src: url('/assets/fonts/archia-thin-webfont.eot');
	src: url('/assets/fonts/archia-thin-webfont.eot?#iefix') format('embedded-opentype'),
		 url('/assets/fonts/archia-thin-webfont.woff2') format('woff2'),
		 url('/assets/fonts/archia-thin-webfont.woff') format('woff'),
		 url('/assets/fonts/archia-thin-webfont.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'archiabold';
	src: url('/assets/fonts/archia-bold-webfont.eot');
	src: url('/assets/fonts/archia-bold-webfont.eot?#iefix') format('embedded-opentype'),
		 url('/assets/fonts/archia-bold-webfont.woff2') format('woff2'),
		 url('/assets/fonts/archia-bold-webfont.woff') format('woff'),
		 url('/assets/fonts/archia-bold-webfont.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}





/* ——————————	VARIABLES	—————————— */

:root {
	
	--color-blue:		#81CEE6;	/* Sky Blue color */
	--color-blue00o:	#81CEE600;
	
	--color-white:		#EBECE4;	/* Paper color */
	
	--color-gray20:		#D9DAD2;
	--color-gray30:		#BFC0B9;
	--color-gray50:		#9B9C962;
	--color-gray80:		#4D5151;
	--color-gray90:		#373B3C;
	
	--color-black:		#212526;	/* Almost Black color */
	--color-black30o:	#21252630;
	--color-black50o:	#21252650;
	--color-black80o:	#21252680;
	--color-black90o:	#21252690;
	--color-black00o:	#21252600;
	--color-blacker:	#181B1B;
	--color-blackest:	#000000;	/* Pure Black color */
	
	--color-waves: 		var(--color-gray80);
	
	--filter:			saturate(1.5) blur(10px);
	
}

.blue {			color:	var(--color-blue); }
.blue-fill {	fill:	var(--color-blue); }
.white { 		color:	var(--color-white); }
.white-fill { 	fill:	var(--color-white); }
.black { 		color:	var(--color-black); }
.black-fill { 	fill:	var(--color-black); }





/* ——————————	ANIMATION	—————————— */

@keyframes rotate-star {
	from {
		transform: rotate(0deg);
	}
	to {
		transform: rotate(360deg);
	}
}

@keyframes fade-in {
	from {
		opacity: 0;
		transform: translateY(var(--translation));
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes shadow-on {
	from {
		box-shadow: 0 10px 30px var(--color-blue00o);
	}
	to {
		box-shadow: 0 20px 50px var(--color-blue);
	}
}

@keyframes shadow-out {
	from {
		box-shadow: 0 20px 50px var(--color-blue);
		
	}
	to {
		box-shadow: 0 10px 30px var(--color-blue00o);
	}
}

canvas {
	display: block;
	position: fixed; 
	top: 0; 
	left: 0; 
	width: 100%; 
	height: 100%;
	z-index: -1000;
	background-color: var(--color-black);
}





/* ——————————	GLOBAL		—————————— */

* {
	margin: 0;
	padding: 0;
	max-width: 100vw;
	overflow: hidden;
	box-sizing: border-box;
	color: var(--color-white);
}

body {
	width: 100%;
	height: 100dvh;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	background-color: var(--color-black);
	font-family: 'archiaregular', 'Helvetica Neue', 'Helvetica', Arial, sans-serif;
	overflow: hidden;
	box-sizing: border-box;
	font-size: 1em;
}





/* ——————————	HEADINGS	—————————— */

h1 {
	font-weight: lighter;
	font-size: 3em;
	color: var(--color-white);
}

h2 {
	font-weight: light;
	font-size: 1em;
	color: var(--color-white);
}

h3 {
	font-weight: lighter;
	font-size: 1em;
	letter-spacing: 5px;
	color: var(--color-white);
	opacity: 0.5;
	margin: 0;
	padding: 0;
}





/* ——————————	TEXT		—————————— */

p {
	color: var(--color-white);
	text-align: left;
}





/* ——————————	LINKS		—————————— */

a:link, 
a:active, 
a:visited {
	color: var(--color-white);
	text-decoration: underline;
	transition: all 0.2s ease-in;
}

a:hover {
	color: var(--color-blue);
	text-decoration: none;
	transition: all 0.2s ease-in;
}





/* ——————————	LAYOUT		—————————— */

.container {
	background: var(--color-black90o);
	backdrop-filter: var(--filter);
	-webkit-backdrop-filter: var(--filter);
	box-sizing: border-box;
	border-width: 0.5px;
	border-style: solid;
	border-image: 
		linear-gradient(
			to top, 
			var(--color-blue), 
			var(--color-blue00o)
		) 1 100%;
}
.container::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 1px;
	border-bottom: solid 0.5px var(--color-blue);
}


@media (max-width: 768px) {
	
	body {
		font-size: 1.5em;
	}
	
	.layout {
		display: flex;
		overflow: hidden;
	}
	
	.container {
		place-self: center;
		padding: 1em;
		margin: auto 1em;
	}
	
}

@media (min-width: 769px) {
	
	.layout {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		grid-template-rows: repeat(3, 1fr);
		grid-column-gap: 0px;
		grid-row-gap: 0px;
	}
	
	.container {
		grid-area: 2 / 2 / 3 / 3;
		padding: 2em;
		margin: auto;
	}
	.container.shadow-on {
		animation: shadow-on 1.0s ease-out forwards;
	}
	.container.shadow-out {
		animation: shadow-out 1.0s ease-out forwards;
	}
	
}

header {
	width: 100%;
	height: auto;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 1em;
	.logo  {
		width: 100%;
		height: 100%;
		display: block;
		opacity: 0;
		--translation: 30px;
		animation: fade-in 0.5s ease-out forwards;
		.name {
			fill: var(--color-white);
		}
		.claim {
			fill: var(--color-white);
			transition: all 1.0s ease-in;
		}
		.claim.blue-fill {
			fill: var(--color-blue);
			transition: all 0.5s ease-in;
		}
		.star {
			fill: var(--color-blue);
			transform-origin: 492px 14px;
			animation: rotate-star 0.5s ease-in-out;
			animation-delay: 0.5s;
		}
	}
}

section {
	margin-bottom: 1em;
	animation: fade-in 0.5s ease-out forwards;
	p {
		span {
			opacity: 0;
			display: inline-block;
			--translation: 10px;
			animation: fade-in 0.8s ease-out forwards;
		}
	}
	p span:nth-of-type(1) { animation-delay: 0.3s; }
	p span:nth-of-type(2) { animation-delay: 0.6s; }
	p span:nth-of-type(3) { animation-delay: 0.8s; }
	p span:nth-of-type(4) { animation-delay: 1.0s; }
}

footer {
	margin-bottom: 1em;
	opacity: 0;
	--translation: 10px;
	animation: fade-in 0.5s ease-out forwards;
	animation-delay: 1.2s;
}





/* ——————————	MISC		—————————— */

.hidden {
	display: none;
}