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

	&::before {
		content: '';
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		background: color(typography, 1);
		z-index: -2;
	}

	&::after {
		content: '';
		position: absolute;
		top: 0;
		left: calc(50% - 320px);
		width: 640px;
		height: 136px;
		background-image: url('../images/hero-illustration.svg');
		background-size: 640px 136px;
		background-repeat: no-repeat;
		z-index: -1;
	}
}

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

@include media( '>medium' ) {

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

		&::after {
			left: calc(50% - 720px);
			width: 1440px;
			height: 307px;
			background-size: 1440px 307px;
		}
    }

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

.has-animations {

	.hero::before,
	.hero::after,
	.site-header,
	.hero-title,
	.hero-paragraph,
	.hero-cta {
		opacity: 0;
	}

	&.is-loaded {

		.hero {

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

			&::after {
				animation: heroFadeIn .6s ease forwards .3s;
			}
		}

		.site-header {
			animation: heroFadeIn .6s ease forwards .3s;
		}

		.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;
		}
	}
}

@keyframes heroBg {
	from {
		transform: translateY(-100%);
		opacity: 0;
	}
	to {
		transform: translateY(0);
		opacity: 1;
	}
}

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

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