/*
 * Homepage hero intro.
 *
 * The markup lives in an Elementor HTML widget whose wrapper carries id="hero-animation".
 *
 * .hero-animation__inner must stay the positioning context. style.css sets body to
 * position:relative, so anything absolute that escapes this container resolves its
 * percentages against the whole document instead of the viewport-height hero.
 *
 * Desktop starts at 1200px to match .show-desktop / .hide-desktop in style.css.
 */

.hero-animation__inner {
	position: relative;
	min-height: 100vh;
}

.hero-animation__logo {
	margin: 0;

	& img {
		display: block;
		width: 100%;
		height: auto;
	}
}

.hero-animation__heading {
	margin: 0;
	color: #fff;
	font-family: "Montserrat", sans-serif;
	font-size: 29px;
	font-weight: 300;
	letter-spacing: -0.29px;
}

.hero-animation__text {
	margin: 0;
	color: #fff;
	font-family: "Montserrat", sans-serif;
	font-size: 18px;
	font-weight: 300;
	line-height: 27px;
	letter-spacing: 0.31px;
}

@media (min-width: 1200px) {
	/* Top edge of the settled logo, so the copy beside it can share that line.
	   The SVG is 594.236 x 69.38, so its height is 11.675% of its width; halve that
	   and apply the 0.6 settled scale to get the distance from its centre line. */
	.hero-animation__inner {
		/* vw, not %, because this width feeds `top` as well as `width`, and a percentage
		   resolves against the container's height in one and its width in the other. */
		--hero-logo-w: min(594px, 46vw);
		--hero-top: calc(36.5% - var(--hero-logo-w) * 0.035);
		/* Heading line box (29px at 1.2) plus the gap the copy block had before. */
		--hero-text-top: calc(var(--hero-top) + 77px);
	}

	.hero-animation__logo,
	.hero-animation__heading,
	.hero-animation__text {
		position: absolute;
		opacity: 0;
	}

	.hero-animation__logo {
		top: 36.5%;
		/* Centres the logo without an X translate: half the container less half the scaled logo.
		   Keeping translateX out of the transition stops the logo swinging off-screen when
		   `left` and `transform` interpolate a frame apart. transform-origin pins the left edge,
		   so scale never shifts it either. */
		left: calc(50% - var(--hero-logo-w) * 0.575);
		width: var(--hero-logo-w);
		/* The SVG is 594px wide, so 1.15 and 0.6 are the 110% and 60% of the original. */
		transform: translateY(-50%) scale(1.15);
		transform-origin: left center;
		transition: all 1s ease !important;
	}

	.hero-animation__heading {
		top: calc(var(--hero-top) + 29%);
		left: 55%;
		width: 38%;
		max-width: 550px;
		line-height: 1.2;
		transition: all 1s ease !important;
	}

	.hero-animation__text {
		top: calc(var(--hero-text-top) + 25%);
		left: 55%;
		width: 38%;
		max-width: 550px;
		transition: all 1s ease !important;
	}

	.js-hero-ready {
		& .hero-animation__logo {
			opacity: 1;
		}
	}

	.js-hero-step-1 {
		& .hero-animation__logo {
			left: 18%;
			transform: translateY(-50%) scale(0.6);
		}
	}

	.js-hero-step-2 {
		& .hero-animation__heading {
			top: var(--hero-top);
			opacity: 1;
		}
	}

	.js-hero-step-3 {
		& .hero-animation__text {
			top: var(--hero-text-top);
			opacity: 1;
		}
	}
}

/* Below the desktop breakpoint the three parts stack and centre, with no staging. */
@media (max-width: 1199px) {
	.hero-animation__inner {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 120px 20px;
		text-align: center;
	}

	.hero-animation__logo {
		width: 100%;
		max-width: 400px;
		margin-bottom: 35px;
	}

	.hero-animation__heading {
		margin-bottom: 20px;
	}

	.hero-animation__text {
		max-width: 550px;
	}
}

/* Without JavaScript nothing ever adds the state classes, so show the finished layout. */
@media (scripting: none) {
	.hero-animation__logo,
	.hero-animation__heading,
	.hero-animation__text {
		opacity: 1;
	}

	@media (min-width: 1200px) {
		.hero-animation__logo {
			left: 18%;
			transform: translateY(-50%) scale(0.6);
		}

		.hero-animation__heading {
			top: var(--hero-top);
		}

		.hero-animation__text {
			top: var(--hero-text-top);
		}
	}
}

@media (prefers-reduced-motion: reduce) {
	.hero-animation__logo,
	.hero-animation__heading,
	.hero-animation__text {
		transition: none !important;
	}
}