/**
 * Emergence hero.
 *
 * Everything is scoped under .efh-hero so it cannot reach Salient's rows, columns
 * reach Salient's rows, columns or containers.
 */

.efh-hero {
	--ef-display: "Bitcount Prop Single", "Courier New", monospace;
	--ef-ui: "Google Sans", -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
	--ef-ground: #fcf3ee;
	--ef-wash-hi: 255, 232, 216;
	--ef-wash-mid: 252, 190, 158;
	--ef-wash-lo: 247, 166, 128;
	--ef-slate: #343a40;
	--ef-crimson: #cb003e;
	--ef-paper: #f5f4f2;
	--ef-ease: cubic-bezier(0.16, 0.84, 0.28, 1);

	position: relative;
	/* break out of Salient's container to full viewport width */
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}

/* the scrub needs room; without motion the hero is a single screen */
.efh-hero--motion { height: 240vh; }

.efh-hero__stage {
	position: relative;
	height: 100vh;
	height: 100svh;
	min-height: 560px;
	overflow: hidden;
	background: var(--ef-ground);
}
.efh-hero--motion .efh-hero__stage { position: sticky; top: 0; }

/* light sits under the canvas so the particles keep the logo red */
.efh-hero__wash {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background: linear-gradient(to bottom,
		rgba(var(--ef-wash-hi), 0) 0%,
		rgba(var(--ef-wash-hi), 0) 38%,
		rgba(var(--ef-wash-hi), 0.30) 56%,
		rgba(var(--ef-wash-mid), 0.50) 72%,
		rgba(var(--ef-wash-lo), 0.62) 86%,
		rgba(var(--ef-wash-lo), 0.68) 100%);
}
.efh-hero__glow {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background: radial-gradient(104% 80% at 50% 46%, rgba(52, 58, 64, 0) 46%, rgba(52, 58, 64, 0.07) 100%);
}
.efh-hero__field {
	position: absolute;
	inset: 0;
	z-index: 1;
	width: 100%;
	height: 100%;
}
/* a fine tooth so the ground reads as stock rather than screen */
.efh-hero__grain {
	position: absolute;
	inset: 0;
	z-index: 2;
	pointer-events: none;
	opacity: 0.2;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.13 0 0 0 0 0.14 0 0 0 0 0.16 0.9 0.9 0.9 0 -1.45'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
	background-size: 140px 140px;
}

.efh-hero__content {
	position: absolute;
	left: 50%;
	bottom: clamp(2.5rem, 7vh, 5rem);
	transform: translateX(-50%);
	z-index: 4;
	width: min(92vw, 46rem);
	text-align: center;
}

/* the two messages stack and cross as the ground changes colour */
.efh-hero__title {
	font-family: var(--ef-display);
	display: grid;
	justify-items: center;
	align-items: end;
	margin: 0;
	font-weight: 400;
	font-size: clamp(2.375rem, 5.4vw, 4.25rem);
	line-height: 1.08;
	color: var(--ef-fg-main, var(--ef-slate));
	text-wrap: balance;
}
.efh-hero__title .efh-hero__msg-a,
.efh-hero__title .efh-hero__msg-b { grid-area: 1 / 1; }
.efh-hero__msg-b { opacity: 0; }
.efh-hero:not(.efh-hero--motion) .efh-hero__msg-b { display: none; }

.efh-hero__sub {
	font-family: var(--ef-ui);
	margin: 0.9rem 0 0;
	font-size: 1.0625rem;
	line-height: 1.6;
	color: var(--ef-fg-main, var(--ef-slate));
	opacity: 0.74;
}
.efh-hero__cta-row { margin: 1.9rem 0 0; }
.efh-hero__cta {
	font-family: var(--ef-ui);
	display: inline-block;
	font-size: 1rem;
	font-weight: 500;
	line-height: 1.4;
	text-decoration: none;
	color: var(--ef-fg-main, var(--ef-slate));
	background: none;
	border: 1.5px solid currentColor;
	border-radius: 999px;
	padding: 0.8rem 1.9rem;
	min-height: 44px;
	transition: background-color 0.25s var(--ef-ease), color 0.25s var(--ef-ease), transform 0.16s var(--ef-ease);
}
@media (hover: hover) and (pointer: fine) {
	.efh-hero__cta:hover {
		background: var(--ef-fg-main, var(--ef-slate));
		color: var(--ef-bg-main, var(--ef-ground));
	}
}
.efh-hero__cta:active { transform: scale(0.97); }
.efh-hero__cta:focus-visible { outline: 2px solid var(--ef-crimson); outline-offset: 3px; }
.efh-hero__stage.is-dark .efh-hero__cta:focus-visible { outline-color: var(--ef-paper); }

/* The scroll prompt sits between the orb and the headline, where the eye already
   is. The arrow points down the page, so it reads as an instruction rather than
   as a label on the heading below it. */
.efh-hero__cue {
	margin: 0 0 clamp(1rem, 2.5vh, 1.75rem);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.6rem;
	color: var(--ef-fg-main, var(--ef-slate));
	opacity: 0.95;
}
.efh-hero__cue-label {
	font-family: var(--ef-ui);
	font-size: clamp(1rem, 1.35vw, 1.1875rem);
	font-weight: 500;
	white-space: nowrap;
}
.efh-hero__cue-arrow { display: block; }

/* one authored entrance, then the scroll takes over */
.efh-hero--motion .efh-hero__title,
.efh-hero--motion .efh-hero__sub,
.efh-hero--motion .efh-hero__cta-row {
	opacity: 0;
	transform: translateY(0.5em);
	animation: efh-hero-rise 0.85s var(--ef-ease) forwards;
}
.efh-hero--motion .efh-hero__title { animation-delay: 0.2s; }
.efh-hero--motion .efh-hero__sub { animation-delay: 0.32s; }
.efh-hero--motion .efh-hero__cta-row { animation-delay: 0.46s; }
.efh-hero--motion .efh-hero__cue-arrow { animation: efh-hero-travel 1.9s cubic-bezier(0.4, 0, 0.3, 1) infinite; }
@keyframes efh-hero-rise { to { opacity: 1; transform: translateY(0); } }
@keyframes efh-hero-travel {
	0% { transform: translateY(-7px); opacity: 0.15; }
	35% { opacity: 1; }
	70% { transform: translateY(12px); opacity: 0; }
	71%, 100% { transform: translateY(-7px); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
	.efh-hero--motion .efh-hero__title,
	.efh-hero--motion .efh-hero__sub,
	.efh-hero--motion .efh-hero__cta-row { opacity: 1; transform: none; animation: none; }
	.efh-hero--motion .efh-hero__cue-arrow { animation: none; }
}

@media (max-width: 720px) {
	.efh-hero--motion { height: 200vh; }
	.efh-hero__stage { min-height: 500px; }
	.efh-hero__content { bottom: clamp(2rem, 6vh, 4rem); }
}

/* ---------------------------------------------------------------------------
   Salient rows carry a light or dark text scheme and the theme colours headings
   from it. The hero sets its own colour at every scroll position, so it has to
   win whichever row it is dropped into.
   --------------------------------------------------------------------------- */
.efh-hero .efh-hero__title,
.efh-hero .efh-hero__sub,
.efh-hero .efh-hero__cta,
.efh-hero .efh-hero__cue {
	color: var(--ef-fg-main, var(--ef-slate)) !important;
}
.efh-hero .efh-hero__title { max-width: none; }

/* ---------------------------------------------------------------------------
   Salient's stylesheet sets `body { overflow: hidden }`. That makes the body a
   scroll container, and a sticky element's nearest scroll container is what it
   sticks to, so the hero never pins. `overflow-x: clip` cuts the same
   horizontal overflow without creating a scroll container, which is what the
   theme actually wants there.
   --------------------------------------------------------------------------- */
body.efh-has-hero {
	overflow-x: clip;
	overflow-y: visible;
}