.header {
	position: relative;

	width: 100%;
	height: 100vh;

	background-image: radial-gradient(
			circle at -20% 90%,
			transparentize($color-grey-dark, 0.4),
			transparent
	),
	url('/assets/img/header.jpg?as=webp');
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;

	clip-path: polygon(0 0, 100% 0, 100% 93%, 50% 98%, 0% 93%);

	@include respond(tab-port) {
		height: 100vh;
	}

	@include respond(phablet) {
		clip-path: none;
	}

	@include respond(phone) {
		height: 80vh;
	}

	&__logo {
		position: absolute;
		left: -12%;
		bottom: 0;

		height: 75%;

		filter: drop-shadow($shadow-grey-distracted);
		opacity: 0.4;
		transform: rotate(-15deg) translateX(0);
		animation: headerLogo 2.4s ease-out;

		@include respond(tab-port) {
			height: 55%;
		}

		@include respond(phone) {
			left: -15%;

			height: 45%;
		}
	}

	&__text-container {
		@include flex(0, center, center, column);

		position: absolute;
		top: 30%;
		left: 50%;
		transform: translateX(-50%);
		z-index: 1;

		width: max-content;

		font-family: $font-family-headings;
	}

	&__heading-primary {
		position: relative;

		font-family: $font-family-headings;
		font-size: 5.4vmax;
		font-weight: 700;
		color: $color-primary-regular;
		text-transform: uppercase;
		text-shadow: $text-shadow-color;

		transform: translateX(-30%);

		@include respond(tab-port) {
			font-size: 6.2rem;

			transform: translateX(-10%);
		}

		@include respond(phablet) {
			font-size: 5.6rem;

			transform: translateX(0);
		}

		@include respond(phone) {
			font-size: 7.2rem;
			line-height: 100%;
			text-align: center;

			width: min-content;
		}
	}

	&__heading-secondary {
		position: relative;

		font-family: $font-family-headings;
		font-size: 2.4vmax;
		font-weight: 600;
		color: $color-white;
		letter-spacing: 1px;
		text-shadow: $text-shadow-grey;

		transform: translate(30%, -60%);

		@include respond(tab-port) {
			font-size: 2.4rem;

			transform: translate(20%, -60%);
		}

		@include respond(phablet) {
			font-size: 2rem;

			transform: translate(0, -60%);
		}

		@include respond(phone) {
			margin-top: 2.4rem;

			font-size: 2rem;
		}
	}

	&__heading-tertiary {
		position: relative;

		font-family: $font-family-headings;
		font-size: 1.9vmax;
		font-weight: 600;
		color: $color-white;
		letter-spacing: 1px;
		text-shadow: $text-shadow-grey;

		transform: translate(250%, -90%);

		@include respond(tab-port) {
			font-size: 2.4rem;

			transform: translate(20%, -60%);
		}

		@include respond(phablet) {
			font-size: 2rem;

			transform: translate(0, -60%);
		}

		@include respond(phone) {
			margin-top: 2.4rem;

			font-size: 2rem;
		}
	}

	&__btn {
		position: absolute;
		left: 50%;
		bottom: 18rem;

		transform: translateX(-50%);
	}
}

.about {
	@include flex(3rem, center, initial);

	background-color: $color-grey-regular;

	&__content {
		@include flex(1.6rem, initial, initial, column);

		flex: 1 0;

		padding: 4rem;
	}

	&__traits {
		@include flex(1.4rem, initial, initial, column);

		margin: 3rem 0;
	}

	&__trait {
		@include flex(2rem, initial, center);

		& > * {
			cursor: default;
			user-select: none;
		}
	}

	&__trait-icon-container {
		@include flex(0, center, center);

		height: 4rem;
		width: 4rem;

		padding: 1rem;

		background-color: $color-primary-light;
	}

	&__trait-icon {
		font-size: 2.3rem;
	}

	&__heading-container {
		position: relative;

		width: 100%;
	}

	&__heading {
		display: inline-block;

		position: relative;
		z-index: 1;
		transform: translateX(14px);

		padding: 0 2rem;

		font-family: $font-family-headings;
		font-size: 2.9rem;
		text-transform: uppercase;

		background-color: $color-grey-regular;
	}

	&__heading-line {
		position: absolute;
		top: 50%;
		left: 0;
		transform: translateY(-50%);
		z-index: 0;

		height: 2px;
		width: 100%;

		content: '';
		background-image: $color-gradient-regular;
	}

	&__image {
		position: relative;

		flex: 0 1 32%;

		background-position: top;
		background-size: cover;
		background-repeat: no-repeat;
	}

	&__shape {
		position: absolute;
		bottom: 0;
		left: 0;

		height: 34%;
		width: 100%;

		background-color: $color-primary-regular;
		clip-path: polygon(50% 0, 50% 0, 100% 50%, 100% 100%, 0 100%, 0% 50%);
	}

	&__logo {
		width: 12rem;
		aspect-ratio: 1;
	}
}

#section-classes {
	position: relative;

	padding-left: 0;
	padding-right: 0;

	@include respond(phablet) {
		margin-top: 0;
	}
}

.classes-background {
	position: absolute;
	inset: 0;
	z-index: -1;

	background-repeat: no-repeat;
	background-size: 125%;

	animation: classesBackground 8s infinite alternate;

	&::before {
		position: absolute;
		inset: 0;

		width: 100%;
		height: 100%;

		background-color: rgba(0, 0, 0, 0.5);

		content: '';
	}
}

.classes {
	@include flex(3.2rem, initial, center);

	max-width: 100vw;

	padding: 5rem;
	margin-top: 16rem;

	@include respond(tab-land) {
		flex-direction: column;

		padding: 0 5rem;
		margin-top: 3rem;
	}

	@include respond(phablet) {
		min-height: auto;
	}

	@include respond(phone) {
		padding: 2rem;
	}

	&__nav {
		@include flex(0, center, initial);

		flex: 1;

		height: max-content;

		@include respond(tab-land) {
			width: 100%;
		}

		@include respond(phone) {
			flex: 0;
		}
	}

	&__body {
		@include flex(0, center, center);

		width: 100%;

		flex: 2;

		@include respond(phone) {
			flex: 0;
		}
	}

	&__body-content {
		position: relative;

		width: 100%;

		padding: 4.2rem;

		background-color: rgba(255, 255, 255, 0.15);
		backdrop-filter: blur(5px);
		transition: all 0.2s ease-out;

		@include respond(tab-port) {
			padding: 3rem;
			margin-top: 3rem;
		}

		@include respond(phone) {
			padding: 1rem;
		}
	}

	&__placeholder {
		position: absolute;

		font-weight: light;
		font-size: 2.8rem;
		text-transform: uppercase;
		font-family: $font-family-headings;
		text-shadow: $text-shadow-grey;

		cursor: pointer;
		user-select: none;
		animation: blinking 0.8s infinite alternate;
		transition: all 0.2s ease-out;
	}

	&__heading {
		@include flex(1rem, center, center);

		margin-bottom: 2.4rem;

		font-size: 4.6rem;
		text-align: center;

		@include respond(tab-port) {
			display: none;
		}
	}

	&__video {
		width: 100%;
	}

	&__slide {
		@include flex(0, center, center);
	}

	&__badge {
		@include flex(2rem, center, center);

		width: 100%;

		padding: 2.3rem map-get($spacings, 3);

		background-color: rgba(255, 255, 255, 0.15);
		backdrop-filter: blur(5px);

		box-shadow: $shadow-grey;
		transition: $transition-regular;

		@include respond(tab-land) {
			width: 34rem;
		}

		@include respond(tab-port) {
			width: 90vw;
		}

		&--active {
			background: $color-gradient-regular;

			box-shadow: $shadow-color;
		}
	}

	&__badge-icon {
		font-size: 3.8rem;

		filter: $shadow-grey;
	}

	&__badge-text {
		font-size: 2.2rem;
		text-transform: uppercase;
		font-weight: bold;
	}

	&__pagination {
		transform: translateX(4rem);
	}

	&__arrow {
		&--up {
			transform: translateY(8rem) !important;
		}

		&--down {
			transform: translateY(-8rem) !important;
		}
	}
}

.why {
	@include flex(0, initial, center, column);
}

.spirit {
	&__text {
		line-height: 180%;
		font-size: $font-size-larger;

		&--lead {
			padding: 2.6rem;

			color: $color-white;
			font-size: 2rem;
			text-align: center;

			background-image: $color-gradient-regular;

			box-shadow: $shadow-grey;
		}
	}

	&__img {
		filter: drop-shadow($shadow-grey);
	}
}

.recruitment-bg {
	position: absolute;
	inset: 0;
	z-index: -1;

	width: 100%;
	height: 100%;

	background-image: url('/assets/img/recruitment.jpg?as=webp');
	background-position: 50% 65%;
	background-repeat: no-repeat;
	background-size: 140%;

	opacity: 0.5;

	@include respond(tab-port) {
		background-size: cover;
	}
}

.recruitment {
	@include flex(4rem, initial, initial, column);

	position: relative;

	padding: 6rem;

	background-color: $color-grey-dark;

	&__stage {
		@include flex(3rem);

		font-family: $font-family-headings;

		@include respond(phone) {
			flex-direction: column;
			align-items: center;
		}
	}

	&__box {
		@include flex(0, center, center);

		flex-shrink: 0;

		width: 7rem;
		height: 7rem;

		background-image: $color-gradient-regular;
		box-shadow: $shadow-color;

		@include respond(phone) {
			margin-bottom: 3.4rem;
		}
	}

	&__box-number {
		font-size: 7rem;
		font-family: 'Arial', sans-serif;
	}

	&__stage-content {
		@include flex(1.8rem, initial, initial, column);

		@include respond(phone) {
			align-items: center;

			margin-bottom: 3.4rem;

			text-align: center;
		}
	}
}

.contact-bg {
	position: absolute;
	inset: 0;

	width: 100%;
	height: 100%;
	z-index: -1;

	background: url('/assets/img/contact.jpg?as=webp') center left/cover no-repeat;
	opacity: 0.3;

	&::after {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		content: '';
		background-image: radial-gradient(circle, #e95056, #e72e45);
		opacity: 0.25;
	}
}

.contact {
	@include flex(0, initial, initial, column);

	position: relative;

	padding: 3rem 6rem;

	@include respond(phone) {
		padding: 1rem;
	}

	@include respond(tab-land) {
		flex-direction: column;
	}

	&__map {
		width: 100%;
		height: 100%;

		box-shadow: $shadow-grey;

		@include respond(tab-land) {
			min-height: 36rem;
		}

		@include respond(tab-port) {
			margin-top: 3rem;
		}
	}
}

#section-promo {
	background-color: $color-white;
}

.promo {
	position: relative;

	width: 100%;
	height: 100%;

	padding: 0 8rem;

	@include respond(tab-port) {
		padding: 0;
	}

	&__video {
		width: 100%;
		aspect-ratio: 16/9;

		box-shadow: $shadow-grey;
	}
}
