// Component settings: Hero
// ------------------------------------------

$c-hero-bp1: 900;
$c-hero-animation-speed: 900ms;
$c-hero-animation-ease: cubic-bezier(0.4, 0.01, 0.18, 1.01);
$c-hero-animation-delay: $c-hero-animation-speed / 2.7;
$c-hero-box-size: 39.44;
$c-hero-overlap: 8%;
// ------------------------------------------


.c-hero {
	position: relative;
	z-index: 1;
	width: 100%;
	overflow: hidden;
	background-color: palette(primary, 300);
}


.c-hero__main {
	z-index: 1;
	position: relative;
	display: grid;
	grid-template-rows: auto auto;
	grid-template-columns: auto;
	max-width: 1440px;
	margin: 0 auto;

	@include mq($c-hero-bp1) {
		grid-template-rows: auto;

		&::before {
			content: '';
			position: absolute;
			z-index: 1;
			display: block;
			bottom: 0;
			right: -50vw;
			left: -50vw;
			height: $c-hero-overlap;
			background-color: palette(primary, 600);
		}
	}
}


.c-hero__slider {
	position: relative;
	min-height: 400px;
	padding-bottom: 57.5%; // Ratio used for image

	@include mq($c-hero-bp1) {
		//pointer-events: none; // disable swipe
		padding-bottom: 57.5%; // Ratio used for image
		grid-row: 1 / -1;
		grid-column: 1 / -1;
	}
}


.c-hero__tray {
	position: absolute;
	z-index: 0;
	overflow: hidden;
	width: 100%;
	height: 100%;
}


.c-hero__picture {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	z-index: 0;
	opacity: 0;

	&.is-previous,
	&.is-active {
		transition-property: transform;
		transition-duration: $c-hero-animation-speed;
		transition-timing-function: $c-hero-animation-ease;
		opacity: 1;
	}

	&.is-next {
		transform: translateX(100%);
	}

	&.is-previous {
		transition-delay: $c-hero-animation-speed;
	}

	&.is-active {
		z-index: 1;
	}
}


.c-hero__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
}


.c-hero__looking-glass {
	display: none;

	@include mq($c-hero-bp1) {
		display: grid; // needed for showing it
		pointer-events: none;
		position: absolute;
		z-index: 2; // on top of bottom bar
		bottom: 0;
		left: calc(50% - (#{$c-hero-box-size * 1%} / 2));
		width: $c-hero-box-size * 1%;
		height: 0;
		padding-bottom: $c-hero-box-size * 1%;
		box-shadow: 0 16px 20px rgba(palette(primary, 600), .32);
		border-radius: 50%;
		background-repeat: no-repeat;
		background-size: 100% auto;
		background-attachment: fixed;
		grid-template-columns: auto;
		grid-template-rows: auto;
		overflow: hidden;

		&::after,
		&::before {
			content: '';
			position: absolute;
			z-index: 3;
			display: block;
			border-radius: 50%;
		}
		&::before {
		    top: 0;
		    bottom: 0;
		    right: 0;
		    left: 0;
			border: 32px solid rgba(#B6D7F0, 0.24);
		}
		&::after {
			top: space(4);
			bottom: space(4);
			right: space(4);
			left: space(4);
			box-shadow: 0 16px 20px rgba(palette(primary, 600), .32);
		}
	}
}


.c-hero__looking-glass-slide {
	grid-row: 1;
	grid-column: 1;
	width: 100%;
	padding-bottom: 100%;
	background-size: calc((100 / #{$c-hero-box-size}) * 100%) auto;
	background-position: center bottom;
	z-index: 0;
	opacity: 0;

	&.is-previous,
	&.is-active {
		transition-property: transform;
		transition-duration: $c-hero-animation-speed - $c-hero-animation-delay;
		transition-timing-function: $c-hero-animation-ease;
		transition-delay: $c-hero-animation-delay;
		opacity: 1;
	}

	&.is-next {
		transform: translateX(100%);
	}

	&.is-previous {
		transition-delay: $c-hero-animation-speed;
	}

	&.is-active {
		z-index: 2;
	}
}


.c-hero__headline-box {
	position: relative;
	z-index: 20;
	color: palette(neutral, 0);
	background-color: palette(primary, 600);

	@include mq($c-hero-bp1) {
		grid-row: 1 / -1;
		grid-column: 1 / -1;
		justify-self: center;
		width: $c-hero-box-size * 1%;
		margin-bottom: 8.5vw;
		background-color: transparent;
		align-self: end;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
}


.c-hero__headline {
	@include interpolate(font-size, 900px, 1366px, 28px, 40px);
	@include interpolate(line-height, 900px, 1366px, 36px, 48px);
	padding: space(6) space(4) 0;
	text-align: center;
	display: flex;
	flex-direction: column;
	text-transform: uppercase;

	@include mq($c-hero-bp1) {
		text-shadow: 0 0 10px rgba(0,0,0,0.6);
	}
}


.c-hero__caption-top {
	@include font-weight('black');
}


.c-hero__caption-bottom {
	@include font-weight(light);
}


// Button with arrow that scrolls down
.c-hero__scroll {
	display: none;

	@include mq($c-hero-bp1) {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 40px;
		height: 40px;
		padding: 10px;
		margin-top: 14%;
		color: palette(neutral, 0);
		border-radius: 100%;
		border: 2px solid currentColor;
		transition: all 200ms;

		& > svg {
			transition: transform 200ms;
		}

		&:hover {
			cursor: pointer;
			color: palette(primary, 100);
			background-color: rgba(palette(neutral, 0), 0.3);
			transform: scale(1.2);

			& > svg {
				transform: translateY(3px);
			}
		}
	}
}


.c-hero__controls {
	pointer-events: none; // switch off controls
	position: absolute;
	bottom: 0;
	right: 0;
	width: 100%;
	padding: space(1);

	@include mq($c-hero-bp1) {
		bottom: $c-hero-overlap;
	}
}



// description

.c-hero__description {
	@include font-weight(light);
	@include interpolate(font-size, 320px, 1366px, 16px, 24px);
	@include interpolate(line-height, 320px, 1366px, 32px, 40px);
	position: relative;
	margin: 0 auto;
	padding-top: space(3);
	color: palette(neutral, 0);
	background-color: palette(primary, 600);
	text-align: center;

	&::before {
		content: '';
		display: block;
		top: 0;
		margin: 0 auto space(4);
		width: 1px;
		height: space(6);
		background-color: palette(primary, 500);
	}
}

.c-hero__description-text {
	@include contain;
	max-width: 856px;
}