/*** Styles for the Intro of Albert's story ***/
/*** Last updated: 2 February 2024 by Justin Herrin ***/

.intro-screen-1 {
	background: #00155b;
	background: linear-gradient(0deg, #020994 0%, #00155b 100%);
	color: #fff;
}

.screen1-stars {
	background-image: url('../images/intro/screen1-stars.png');
	background-repeat: no-repeat;
	background-size: cover;
	background-position: bottom left;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	opacity: 0;
}

.screen1-orb {
	position: absolute;
	bottom: -110px;
	left: 50%;
	transform: translateX(-50%);
	width: 300px;
	z-index: 30;
	opacity: 0;
}
.screen1-orb img {
	display: block;
}

.screen1-lightbeam {
	background: rgba(255, 255, 255, .1);
	background: linear-gradient(0deg, rgba(255,255,255,0.2) 40%, rgba(255,255,255,0) 100%);
	clip-path: polygon(0 0, 100% 0, 50% 100%, 50% 100%);
	position: absolute;
	left: 50%;
	top: 0;
	transform: translateX(-50%) translateY(200%);
	height: calc(100vh - 150px);
	width: 40px;
}

.intro-screen-1 .bounce-arrow-wrapper {
	opacity: 0;
}

.fdx-badge {
	position: absolute;
	top: 20%;
	left: 50%;
	transform: translateX(-50%) translateY(-100%);
	opacity: 0;
	z-index: 60;
}
.fdx-badge img {
	display: block;
	width: 200px;
}

.titles {
	max-width: 1000px;
	margin: 30% auto 0 auto;
	text-align: center;
	padding: 0 20px;
	opacity: 0;
	transform: translateY(-100%);
}
@media screen and (min-width: 1000px) {
	.screen1-stars {
		background-position: center center;
	}

	.screen1-orb {
		bottom: -170px;
		width: 400px;
	}

	.titles {
		margin: 10% auto 0 auto;
		padding: 0;
	}
}


.intro-screen-2 {
	background-image: url('../images/intro/bg-screen2.svg');
	background-repeat: no-repeat;
	background-size: cover;
	background-position: top left;
}

.intro-screen-3,
.intro-screen-4 {
	background-image: url('../images/intro/bg-screen3.svg');
	background-repeat: no-repeat;
	background-size: cover;
	background-attachment: fixed;
}
@media screen and (min-width: 1300px) {
	.intro-screen-3,
	.intro-screen-4 {
		background-position: center center;
		background-size: auto;
	}
}


.intro-screen-5 {
	background: #2475FF;
	background: linear-gradient(0deg, #2475FF 0%, #7D94FF 100%);
}

.orb-container {
	height: 100vh;
	max-width: 580px;
	width: 66vw;
	overflow: hidden;
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
}
.orb-bg {
	background: #00CFA3;
	background: linear-gradient(0deg, #A9BEF5 0%, #00CFA3 100%);
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
	border: 1px solid #010728;
	height: 0;
	max-height: 520px;
	position: absolute;
	bottom: 0;
	left: 0;
	transform: translateY(5px);
	width: 100%;
	z-index: 1;
}
.orb {
	position: absolute;
	bottom: 0;
	left: 0;
	transform: translateY(100%);
	z-index: 9;
}
.lightbeam {
	background: rgba(255, 255, 255, .1);
	background: linear-gradient(0deg, rgba(255,255,255,0.3) 40%, rgba(255,255,255,0) 100%);
	clip-path: polygon(0 0, 100% 0, 50% 100%, 50% 100%);
	position: absolute;
	left: 50%;
	transform: translateX(-50%) translateY(200%);
	height: 80vh;
	width: 10px;
	max-width: 580px;
}
@media screen and (min-width: 1000px) {
	.orb-container {
		width: 41vw;
		left: 50px;
		transform: none;
	}
	.lightbeam {
		height: 70vh;
		width: 20vw;
	}
}