/* Styles relating to the animated intro */

#intro-overlay {
	position: fixed;
	width: 100%;
	height: 100%;
	background-color: var(--sand);
	z-index: 99;
	pointer-events: none;
	opacity: 0;
	transition: opacity 1s;
}

#intro-overlay.covered {
	opacity: 1;
}

#intro-overlay.intro-out {
	opacity: 1;
	transition: opacity 0.5s ease-in;
}

#intro-overlay.intro-out-alt {
	animation: intro-bg 1s 0.0s ease-in reverse forwards;
}

#intro-overlay.intro-in {
	animation: intro-bg 1s 0.0s ease-in forwards;
}

#intro-overlay.intro-transition {
	animation: intro-bg-transition 2.2s 0.0s ease-in-out forwards;
}

#intro-overlay.intro-in-instant {
	animation: intro-bg 0s 0s ease-in forwards;
}

#intro-title {
	position: fixed;
	z-index: 10;
	font-size: 11vh;
	cursor: pointer;
	letter-spacing: 8px;
	transition: letter-spacing 0.5s;
	text-align: center;
}

#intro-title {
	animation: intro-title 1.8s 0.5s forwards ease-out;
	background: linear-gradient(to right, #000000FF 45%, #00000000 55%);
	background-size: 400% 100%;
	-webkit-text-fill-color: transparent;
  	background-clip: text;
  	-webkit-background-clip: text;
  	background-position: 75% 0%;
}

#intro-title:hover {
	letter-spacing: 13px;
	transition: letter-spacing 0.5s;
}

#title.intro-in h1.title {
	animation: h1-title 2s forwards ease-out;
}

.dedication h3 {
	animation: h3-dedication 7s forwards linear;
}

.dedication {
	animation: dedication 7s forwards linear;
}

#firstTime .container {
	padding: 0px;
}

#firstTime .firstTimeButtons {
	display: grid;
	width: 100%;
	grid-template-columns: 50% 50%;
}

#firstTime button {
	font-family: var(--primaryFont);
	font-size: 1.1em;
	padding: 10px 20px;
	text-align: center;
	letter-spacing: 3px;
	transition: letter-spacing 0.5s;
}

#firstTime button:hover {
	letter-spacing: 5px;
	transition: letter-spacing 0.5s;
}

img {
	position: fixed;
	width: 70vh;
	height: 70vh;
	transform: scale(10);
	opacity: 0;
	animation: intro-logo 2s forwards;
}

img:nth-of-type(2) {
	animation-delay: 0.1s;
}

img:nth-of-type(1) {
	animation-delay: 0.2s;
}

.hidden {
	display: none;
}

@keyframes h1-title {
	from {
		letter-spacing: 7px;
	}
	to {
		letter-spacing: 2px;
	}
}

@keyframes dedication {
	from {
		letter-spacing: 1px;
	}
	to {
		letter-spacing: 5px;
	}
}

@keyframes h3-dedication {
	from {
		letter-spacing: 1px;
	}
	to {
		letter-spacing: 3px;
	}
}

@keyframes intro-title {
	0% {
		background-position: 75% 0%;
		transform: scale(2);
		opacity: 0;
	}
	15% {
		opacity: 1;
	}
	100% {
		background-position: 25% 0%;
		transform: scale(1);
		opacity: 1;
	}
}

@keyframes intro-logo {
	0% {
		transform: scale(10);
		opacity: 0;
	}
	25% {
		opacity: 1;
	}
	100% {
		transform: scale(1);
		opacity: 1;
	}
}

@keyframes intro-bg {
	from {
		transform: scale(1);
		opacity: 1;
	}
	to {
		transform: scale(1.1);
		opacity: 0;
	}
}

@keyframes intro-bg-transition {
	0% {
		opacity: 0;
	}
	45%,55% {
		opacity: 1;
	}
	100% {
		opacity: 0;
	}
}

@media only screen and (max-width: 700px) {
	#intro-title {
		font-size: 8vh;
	}

	img {
		width: 60vh;
		height: 60vh;
	}

	@keyframes intro-title {
		0% {
			background-position: 75% 0%;
			transform: scale(1.5);
			opacity: 0;
		}
		15% {
			opacity: 1;
		}
		100% {
			background-position: 25% 0%;
			transform: scale(1);
			opacity: 1;
		}
	}
}

@media only screen and (max-width: 500px) {
	#intro-title {
		font-size: 5vh;
	}

	img {
		width: 50vh;
		height: 50vh;
	}
}