@darkBlue: #020024;

@-webkit-keyframes introClose {
	90% { opacity: 0; }
	100% { z-index: 0; }
}

@keyframes introClose {
	90% { opacity: 0; }
	100% { z-index: 0; }
}


html, body {
	margin: 0;
	padding: 0;
	min-height: 100vh;
	width: 100%;
	color: white;
	background-color: @darkBlue;
	overflow-x: hidden;

	img {
		max-width: 100%;
	}

	.snapContainer {
		.intro { 
			background-color: @darkBlue;
			position: fixed;
			opacity: 1;
			z-index: 5;
			height: 100vh;
			width: 100%;
			text-align: center;
			-webkit-animation: introClose 0.7s 0.8s forwards;
					animation: introClose 0.7s 0.8s forwards;
			img {
				position: absolute;
				left: 50%;
				top: 50%;
				transform: translate(-50%, -50%);
				max-height: 100vh;
			}
		}

		section {
			height: 100vh;
			display: flex;
			justify-content: center;
			margin-bottom: 400px;

			&.mainVidWrapper {
				video {
					cursor: pointer;
					max-width: 100%;
				}
			}

			&.a {
				background: @darkBlue;
				background: linear-gradient(0deg, rgba(9,9,121,1) 0%, rgba(2,0,36,1) 80%);
				.imgLeft img {
					-o-object-position: top;
					   object-position: top;
					transform: translateX(-60%);
					opacity: 0;
					transition: transform 0.7s, opacity 0.4s;
				}
				.imgRight img {
					-webkit-filter: blur(25px);
							filter: blur(25px);
					opacity: 0;
					transition: opacity 0.4s, -webkit-filter 0.7s;
					transition: filter 0.7s, opacity 0.4s;
					transition: filter 0.7s, opacity 0.4s, -webkit-filter 0.7s;	
				}
				&.animTrigger {
					.imgRight img {
						-webkit-filter: blur(0px);
								filter: blur(0px);
						opacity: 1;
						transition: opacity 0.4s, -webkit-filter 0.4s;
						transition: filter 0.4s, opacity 0.4s;
						transition: filter 0.4s, opacity 0.4s, -webkit-filter 0.4s;
					}
					.imgLeft img {
						transform: translateX(0%);
						opacity: 1;
						transition: transform 0.7s, opacity 0.4s;
					}
				}
			}
			
			
			&.b {
				background: rgb(80, 76, 148);
				background: linear-gradient(0deg, rgb(80, 76, 148) 0%, rgb(9, 9, 121) 80%);
				.imgLeft img {
					@media screen and (orientation: portrait) {
						-o-object-position: 44% 50%;
						   object-position: 44% 50%;
					}
					transform: translateY(60%);
					opacity: 0;
					transition: transform 0.7s, opacity 0.4s;
				}
				.imgRight img {
					transform: translateY(-60%);
					opacity: 0;
					transition: transform 0.7s, opacity 0.4s;
				}
				&.animTrigger {
					.imgRight img {
						transform: translateY(0%);
						opacity: 1;
						transition: transform 0.7s, opacity 0.4s;
					}
					.imgLeft img {
						transform: translateY(0%);
						opacity: 1;
						transition: transform 0.7s, opacity 0.4s;
					}
				}
			}

			&.c {
				background: rgb(120,120,175);
				background: linear-gradient(0deg, rgba(120,120,175,1) 0%, rgba(80,76,148,1) 80%);
				.imgLeft img {
					@media screen and (orientation: portrait) {
						-o-object-position: 30% 50%;
						   object-position: 30% 50%;
					}
					transform: translateX(60%);
					opacity: 0;
					transition: transform 0.7s, opacity 0.4s;
				}
				.imgRight img {
					@media screen and (orientation: portrait) {
						-o-object-position: 55% 50%;
						   object-position: 55% 50%;
					}
					transform: scale(0.1);
					opacity: 0;
					transition: transform 0.7s, opacity 0.4s;
				}
				&.animTrigger {
					.imgRight img {
						transform: scale(1);
						opacity: 1;
						transition: transform 0.7s, opacity 0.4s;
					}
					.imgLeft img {
						transform: translateX(0%);
						opacity: 1;
						transition: transform 0.7s, opacity 0.4s;
					}
				}
			}

			&.d {
				background: rgb(2,0,36);
				background: linear-gradient(0deg, rgba(2,0,36,1) 0%, rgba(120,120,175,1) 80%);
				.imgLeft img {
					transform: translateX(-60%);
					opacity: 0;
					transition: transform 0.7s, opacity 0.4s;
				}
				.imgRight img {
					@media screen and (orientation: portrait) {
						-o-object-position: 45% 50%;
						   object-position: 45% 50%;
					}
					transform: translateX(60%);
					opacity: 0;
					transition: transform 0.7s, opacity 0.4s;
				}
				&.animTrigger {
					.imgRight img {
						transform: translateX(0%);
						opacity: 1;
						transition: transform 0.7s, opacity 0.4s;
					}
					.imgLeft img {
						transform: translateX(0%);
						opacity: 1;
						transition: transform 0.7s, opacity 0.4s;
					}
				}
			}

			&.e {
				img {
					-o-object-fit: cover;
					   object-fit: cover;
					-webkit-filter: blur(5px);
							filter: blur(5px);
				}
				img:not(:first-child) {
					-webkit-filter: blur(0px);
							filter: blur(0px);
					-o-object-fit: contain;
					   object-fit: contain;
					position: absolute;
					top: 50%;
					left: 50%;
					transform: translate(-50%, -50%);
				}
				h2 {
					position: absolute;
					top: 50%;
					left: 50%;
					transform: translate(-50%, -50%) scale(0.1);
					font-size: 4.5rem;
					opacity: 0;
					transition: transform 0.7s, opacity 0.4s;
				}
				&.animTrigger h2 {
					opacity: 1;
					transform: translate(-50%, -50%) scale(1);
					transition: transform 0.7s, opacity 0.4s;
				}
			}

			.imgContainer {
				max-width: 2000px;
				padding: 20px;
				display: grid;
				grid-template-columns: 1fr 1fr;
				grid-template-rows: 1fr 1fr 1fr 1fr;
				gap: 20px 20px;
				grid-template-areas:
					". imgRight"
					"imgLeft imgRight"
					"imgLeft imgRight"
					"imgLeft .";

				.imgLeft { grid-area: imgLeft; }
				.imgRight { grid-area: imgRight; }

				img {
					-o-object-fit: cover;
					   object-fit: cover;
					-o-object-position: center;
					   object-position: center;
					width: 100%;
					height: 100%;
				}
			}
			
			&.b, &.d {
				.imgContainer {
					grid-template-areas:
					"imgLeft ."
					"imgLeft imgRight"
					"imgLeft imgRight"
					". imgRight";
				}
			}
			
			
		}
	}
}