// ============================================================================
// :: Process
// ============================================================================
/*
* Page class for process.
*/

// ============================================================================
// :: Root
// ============================================================================
.p-process {
	position: relative;
}

// ============================================================================
// :: Elements
// ============================================================================
.p-process__hero {
	position: relative;
	z-index: $z-index-base;

	display: flex;
	width: 100%;
	height: 45rem;
	overflow: hidden;

	@include respond-at($screen-medium-base) {
		height: 71.2rem;
	}

	&.is-animated {

		.p-process__hero-background {
			transform: scaleX(0);
		}

		.p-process__hero-content-container {
			opacity: 1;

			transform: translateX(0);
		}

		.p-process__hero-visual {
			transform: translateX(0) scale(1.5);

			@include respond-at($screen-small-base) {
				transform: translateX(0) scale(1);
			}
		}
	}
}

.p-process__hero-background {
	content: "";

	position: absolute;
	top: 0;
	left: 0;
	z-index: $z-index-highest;

	display: block;
	width: 100%;
	height: 100%;

	background-color: $background-color-white;

	transform: scaleX(1);
	transform-origin: right center;

	transition: transform 1.8s cubic-bezier(0.23, 1, 0.32, 1);
}

.p-process__hero-visual-container {
	position: absolute;
	top: 0;
	left: 0;
	z-index: $z-index-lowest;

	display: block;
	width: 100%;
	height: 100%;

	will-change: transform;

	&::after {
		content: "";

		position: absolute;
		top: 0;
		left: 0;

		display: block;
		width: 100%;
		height: 100%;

		background: linear-gradient(0deg, #FFFFFF 9%, rgba(255,255,255,0.91) 18%, rgba(255,255,255,0.76) 28%, rgba(255,255,255,0) 60%);
	}
}

.p-process__hero-visual {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;

	transform: translateX(-10rem) scale(1.1);

	transition: transform 1.4s cubic-bezier(0.23, 1, 0.32, 1);
}

.p-process__hero-content-container {
	z-index: $z-index-high;

	align-self: flex-end;

	max-width: 48rem;

	opacity: 0;

	transform: translateX(-10rem);

	transition: opacity 0.6s ease-in-out, transform 0.6s ease-in-out;
}

.p-process__hero-title {
	font-family: $font-family-beausans;
	font-weight: $font-weight-ultrathin;
	font-size: $font-size-4x-large;
	line-height: $line-height-5x-large;

	color: $text-color;

	@include respond-to($screen-small-base) {
		font-size: $font-size-3x-large;
		line-height: $line-height-4x-large;
	}
}

.p-process__hero-text {
	margin-top: 1.5rem;

	font-family: $font-family-roboto;
	font-weight: $font-weight-lite;
	font-size: $font-size;
	line-height: $line-height-2x-large;

	color: $text-color;

	@include respond-to($screen-small-base) {
		font-size: $font-size-1x-small;
		line-height: $line-height-1x-large;
	}

	@include respond-at($screen-medium-base) {
		margin-top: 2.5rem;
		margin-bottom: 3rem;
	}

	p + p {
		margin-top: 1rem;
	}
}

.p-process__hero-container {
	display: flex;
}

.p-process__empty {

	.m-section__meta {
		display: flex;
		flex-direction: column;
		justify-content: flex-end;
		align-items: center;
		width: calc(100% + 0.1rem);
		height: 12.2rem;
		margin-top: 2rem;

		background-image:
			linear-gradient($border-color-grey-light 0.1rem, transparent 0.1rem),
			linear-gradient(90deg, $border-color-grey-light 0.1rem, transparent 0.1rem);
		background-size: 4rem 4rem, 4rem 4rem;

		@include respond-at($screen-small-base) {
			height: 28.2rem;
		}

		.p-process__empty-battery {
			display: block;
			width: 80%;
			height: auto;
		}
	}
}