.hero {
	position: relative;
    padding-top: 128px;
	padding-bottom: 88px;
	z-index: 0;

	.hero-bg {
		position: absolute;
		top: 0;
		bottom: 42%;
		left: 0;
		right: 0;
		background: color(bg, 1i);
		z-index: -2;
	}

	.hero-particles-container {
		position: absolute;
		top: 0;
		bottom: 42%;
		left: 0;
		right: 0;
	}

	&::before,
	&::after {
		content: '';
		position: absolute;
		left: calc(50% - 360px);
		width: 720px;
		background-repeat: no-repeat;
	}

	&::before {
		top: 0;
		height: 159px;
		background-image: url('../images/hero-bg-top.svg');
		background-size: 720px 159px;
	}

	&::after {
		bottom: 42%;
		height: 173px;
		background-image: url('../images/hero-bg-bottom.svg');
		background-size: 720px 173px;
	}
}

.hero-inner {
	position: relative;
	z-index: 1;
}

.hero-copy {
    position: relative; /* To display elements above hero illustrations */
	margin-bottom: 48px;
}

@include media( '>medium' ) {

    .hero {
        padding-top: 160px;
		padding-bottom: 128px;

		&::before,
		&::after {
			left: calc(50% - 720px);
			width: 1440px;
		}

		&::before {
			height: 318px;
			background-size: 1440px 318px;
		}

		&::after {
			height: 347px;
			background-size: 1440px 347px;
		}
    }

	.hero-copy {
		margin-bottom: 88px;
	}

	.hero-paragraph {
		padding-left: 72px;
		padding-right: 72px;
	}
}

.has-animations {

	.hero .hero-bg,
	.hero::before,
	.hero::after,
	.hero-particles-container,
	.site-header,
	.hero-title,
	.hero-paragraph,
	.hero-cta,
	.hero .mockup-bg,
	.hero .device-mockup {
		opacity: 0;
	}

	&.is-loaded {

		.hero {

			.hero-bg {
				animation: heroBg .6s cubic-bezier(0.215, 0.61, 0.355, 1) forwards;
			}

			&::before,
			&::after {
				animation: heroFadeIn .6s ease forwards .45s;
			}
		}

		.site-header,
		.hero-particles-container,
		.hero .mockup-bg {
			animation: heroFadeIn .6s ease forwards .45s;
		}

		.hero-title {
			animation: heroContent .6s cubic-bezier(0.215, 0.61, 0.355, 1) forwards .15s;
		}

		.hero-paragraph {
			animation: heroContent .6s cubic-bezier(0.215, 0.61, 0.355, 1) forwards .3s;
		}

		.hero-cta {
			animation: heroContent .6s cubic-bezier(0.215, 0.61, 0.355, 1) forwards .45s;
		}

		.hero .device-mockup {
			animation: heroMockup .6s ease forwards .6s;
		}
	}
}

@keyframes heroBg {
	from {
		transform: scaleY(0) scaleX(1.2) skewY(30deg);
		opacity: 1;
	}
	to {
		transform: scaleY(1) scaleX(1) skewY(0);
		opacity: 1;
	}
}

@keyframes heroContent {
	from {
		transform: translateY(40px) skewY(2deg);
		opacity: 0;
	}
	to {
		transform: translateY(0) skewY(0);
		opacity: 1;
	}
}

@keyframes heroMockup {
	from {
		transform: translateY(80px);
		opacity: 0;
	}
	to {
		transform: translateY(0);
		opacity: 1;
	}
}

@keyframes heroFadeIn {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}
