/* The hero exists on this page only, so all of it lives here rather than in the site-wide sheet. */

/* It rests at 18°, not the previous 35° — past roughly 20° the UI text inside the shot stops being readable and the screenshot becomes decoration instead of evidence. */
/* The start pose is past that limit on purpose, because it exists only while the panel is turning, and 8 degrees of travel is what makes the turn readable as a turn at all. */
@keyframes revealScreenshot {
	from {
		opacity: 0;
		transform: rotateY(-26deg) rotateX(5deg) translate3d(0, 40px, 0);
	}

	to {
		opacity: 1;
		transform: rotateY(-18deg) rotateX(5deg) translateZ(0);
	}
}

.hero {
	position: relative;
	padding: var(--space-section) 0;

	/* Both layers below sit behind the copy and are clipped by the overflow:hidden on `section`. Neither has an outline, because an outline here would be set by the window width rather than by a decision. */

	/* The ground under the screenshot. It reaches past the hero on three sides so its falloff finishes off-screen instead of at a border. */
	&::before {
		content: '';
		position: absolute;
		inset: -18% -14% -18% 26%;
		z-index: -1;
		background: radial-gradient(44% 46% at 56% 50%, var(--surface-sunken), transparent 70%);
	}

	/* A 44px lattice, masked to nothing on every side, so the screenshot sits on measured ground. */
	&::after {
		content: '';
		position: absolute;
		inset: 0 0 0 32%;
		z-index: -1;
		background-image: linear-gradient(to right, var(--border-color) 1px, transparent 1px), linear-gradient(to bottom, var(--border-color) 1px, transparent 1px);
		background-size: 44px 44px;
		-webkit-mask-image: radial-gradient(48% 54% at 54% 46%, #000 15%, transparent 76%);
		mask-image: radial-gradient(48% 54% at 54% 46%, #000 15%, transparent 76%);
	}

	h1 {
		line-height: 1.15;
		letter-spacing: -.02em;
		text-wrap: balance;
		margin-bottom: 1.25rem;
	}

	.lead {
		text-wrap: pretty;
		margin: 0 0 .75rem;
	}

	.hero-note {
		color: var(--text-secondary);
		text-wrap: pretty;
		margin: 0 0 2rem;
	}

	.hero-actions {
		display: flex;
		flex-wrap: wrap;
		gap: .5rem;
	}

	.hero-trust {
		color: var(--text-secondary);
		font-size: .9375rem;
		margin: 1.5rem 0 0;
	}

	.button {
		padding: .9375rem 1.75rem;
	}

	/* flex:1 against the copy column, not 1.2 — the headline needs the width more
	   than the screenshot does, and at 1.2 it was hand-broken with <br> to fit. */
	.screenshot {
		flex: 1;
		perspective-origin: 0;
		perspective: 1500px;
		transform-style: preserve-3d;

		img {
			box-shadow: var(--elevation-3);
			max-width: 124%;

			/* `both` rather than `forwards`, so the hidden start pose lives in the keyframe and not on the element: should the animation ever not run, the screenshot renders flat and visible instead of not at all. */
			/* The curve decelerates, which is what an entrance wants — it leaves at once and settles. */
			animation: revealScreenshot .55s cubic-bezier(.16, 1, .3, 1) both;
		}
	}
}

/* The end pose is repeated here rather than only switching the animation off, because the first keyframe is invisible and `animation: none` on its own would leave the screenshot hidden for anyone who asks for less motion. */
@media (prefers-reduced-motion: reduce) {
	.hero .screenshot img {
		animation: none;
		opacity: 1;
		transform: rotateY(-18deg) rotateX(5deg);
	}
}

/* The width at which style.css stacks every .row into one column. */
@media (max-width: 992px) {
	.hero {
		padding-top: calc(var(--padd) * 2);
		padding-bottom: calc(var(--padd) * 4);

		/* The ground follows the screenshot below the copy, rather than switching off, because the hero should be one design at every width. */
		&::before {
			inset: 42% -25% -12% -25%;
		}

		/* The lattice is measured against a two-column hero, so it does not survive the stack. */
		&::after {
			display: none;
		}

		.screenshot img {
			transform: unset;
			animation: none;
			opacity: 1;
			max-width: 100%;
			box-shadow: none;
		}

		.row {
			gap: calc(var(--padd) * 6);
		}
	}
}

@media (max-width: 991.98px) {
	.hero {
		h1 {
			font-size: 2.25rem;
		}
	}
}