/**
 * Home hero.
 *
 * One screen tall, dark, over a slowly moving violet mesh (CSS only). Measured from the design at
 * 390 / 768 / 1440: the layout is the same at every width, only the headline image
 * (min(580px, 82vw)) and the search box (min(520px, 90vw)) scale. The decorative layers (glow,
 * background art) are drawn physically, left to right, exactly as the design draws them — they
 * are not mirrored for RTL.
 */

.acini-home-hero {
	--acini-hero-fill: color-mix(in srgb, var(--acini-text-inverse) 8%, transparent);
	--acini-hero-line: color-mix(in srgb, var(--acini-text-inverse) 16%, transparent);
	--acini-hero-soft: color-mix(in srgb, var(--acini-text-inverse) 72%, transparent);
	--acini-hero-faint: color-mix(in srgb, var(--acini-text-inverse) 50%, transparent);
	position: relative;
	display: flex;
	flex-direction: column;
	min-block-size: 100vh;
	min-block-size: 100svh;
	padding-block-start: var(--acini-header-clearance);
	overflow: hidden;
	color: var(--acini-text-inverse);
	background-color: var(--acini-bg-hero);
}

/* ---- Moving background: the design's canvas, rebuilt in CSS --------------
 *
 * The design paints a violet field and eight huge radial blobs (violet, lilac, black,
 * black, twice over) that drift in straight lines and bounce off the edges; the black
 * ones, painted last, keep most of it dark. Here each blob is painted once and only
 * moved: the span slides along x and its ::before (which draws the gradient) along y,
 * each running 0 -> 1 -> 0 at its own speed — the same straight-line bounce, with no
 * script. A centre travels from half a radius outside one edge to half a radius outside
 * the other, as in the design. The first frame (and the reduced-motion frame) is the
 * design's start: four blobs near the corners, four elsewhere.
 *
 * Only transform is animated, so the compositor moves the painted layers and nothing is
 * repainted per frame. (Animating the gradient itself repainted eight screen-sized layers
 * on every frame, and Chrome on a retina Mac could not keep up: the top fold flickered.)
 *
 * A canvas gradient to rgba(0,0,0,0) darkens towards black as it fades (it mixes the
 * colour unpremultiplied); a CSS one only fades. The extra stops darken each blob the
 * canvas way, which is what keeps the field as dark as the design.
 */

.acini-home-hero__glow {
	position: absolute;
	inset: 0;
	overflow: hidden;
	pointer-events: none;
	background: var(--acini-mesh-violet);
	container-type: size; /* cqw / cqh below: the distance a blob travels. */
}

/* A box one diameter square whose centre starts half a radius above and before the top
   corner; it moves (100cqw + r) along x and its ::before (100cqh + r) along y. */
.acini-home-hero__blob,
.acini-home-hero__blob::before {
	position: absolute;
	top: 0;
	left: 0;
	width: calc(var(--r) * 2);
	height: calc(var(--r) * 2);
}

.acini-home-hero__blob {
	--r: calc(var(--k) * 100vmax);
	margin: calc(var(--r) * -1.5) 0 0 calc(var(--r) * -1.5);
	transform: translateX(calc(var(--px) * (100cqw + var(--r))));
	animation: acini-mesh-x var(--dx) linear calc(var(--px) * var(--dx) * -1) infinite alternate;
}

.acini-home-hero__blob::before {
	content: "";
	background: radial-gradient(
		closest-side,
		var(--c),
		color-mix(in srgb, color-mix(in srgb, var(--c) 75%, var(--acini-bg-inverse)) 75%, transparent) 25%,
		color-mix(in srgb, color-mix(in srgb, var(--c) 50%, var(--acini-bg-inverse)) 50%, transparent) 50%,
		color-mix(in srgb, color-mix(in srgb, var(--c) 25%, var(--acini-bg-inverse)) 25%, transparent) 75%,
		transparent
	);
	transform: translateY(calc(var(--py) * (100cqh + var(--r))));
	animation: acini-mesh-y var(--dy) linear calc(var(--py) * var(--dy) * -1) infinite alternate;
}

/* k: radius as a share of the longer side. p: starting point (0-1). d: one crossing. */
.acini-home-hero__blob:nth-child(1) { --c: var(--acini-mesh-violet); --k: 0.95; --px: 0.26; --py: 0.32; --dx: 26s; --dy: 19s; }
.acini-home-hero__blob:nth-child(2) { --c: var(--acini-mesh-lilac); --k: 0.7; --px: 0.74; --py: 0.32; --dx: 31s; --dy: 23s; }
.acini-home-hero__blob:nth-child(3) { --c: var(--acini-bg-inverse); --k: 0.85; --px: 0.26; --py: 0.68; --dx: 22s; --dy: 28s; }
.acini-home-hero__blob:nth-child(4) { --c: var(--acini-bg-inverse); --k: 0.65; --px: 0.74; --py: 0.68; --dx: 35s; --dy: 17s; }
.acini-home-hero__blob:nth-child(5) { --c: var(--acini-mesh-violet); --k: 0.9; --px: 0.41; --py: 0.12; --dx: 29s; --dy: 33s; }
.acini-home-hero__blob:nth-child(6) { --c: var(--acini-mesh-lilac); --k: 0.75; --px: 0.5; --py: 0.8; --dx: 18s; --dy: 25s; }
.acini-home-hero__blob:nth-child(7) { --c: var(--acini-bg-inverse); --k: 0.8; --px: 0.12; --py: 0.71; --dx: 24s; --dy: 21s; }
.acini-home-hero__blob:nth-child(8) { --c: var(--acini-bg-inverse); --k: 0.6; --px: 0.82; --py: 0.3; --dx: 33s; --dy: 27s; }

@keyframes acini-mesh-x {
	from {
		transform: translateX(0);
	}

	to {
		transform: translateX(calc(100cqw + var(--r)));
	}
}

@keyframes acini-mesh-y {
	from {
		transform: translateY(0);
	}

	to {
		transform: translateY(calc(100cqh + var(--r)));
	}
}

/* The swooping lines and circles: the design's art at 35% opacity, full width. */
.acini-home-hero__bg {
	position: absolute;
	inset-block-start: 0;
	inset-inline: 0;
	inline-size: 100%;
	block-size: auto;
	max-inline-size: none;
	opacity: 0.35;
	pointer-events: none;
}

/* ---- Content ----------------------------------------------------------- */

.acini-home-hero__main {
	position: relative;
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: calc(var(--acini-space-xl) + var(--acini-space-xs)) var(--acini-space-lg);
	text-align: center;
}

.acini-home-hero__title {
	margin: 0;
	line-height: 0;
}

.acini-home-hero__title img {
	display: block;
	inline-size: min(58rem, 82vw);
	block-size: auto;
	max-inline-size: none;
}

.acini-home-hero__tagline {
	margin: calc(var(--acini-space-2lg) + 0.2rem) 0 0;
	font-family: var(--acini-font-heading);
	font-size: var(--acini-text-3xl);
	font-weight: var(--acini-weight-bold);
	line-height: var(--acini-leading-normal);
}

.acini-home-hero__text {
	margin: var(--acini-space-sm) 0 0;
	font-size: var(--acini-text-sm);
	line-height: var(--acini-leading-normal);
	color: var(--acini-hero-soft);
}

/* ---- Quick-jump search -------------------------------------------------- */

.acini-home-hero__search {
	position: relative;
	inline-size: min(52rem, 90vw);
	margin-block-start: calc(var(--acini-space-xl) - 0.4rem);
	text-align: start;
}

.acini-home-hero__box {
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: 1rem var(--acini-space-sm);
	background: var(--acini-hero-fill);
	border: 1px solid var(--acini-hero-line);
	border-radius: calc(var(--acini-radius-xl) - 0.2rem);
}

.acini-home-hero__box:focus-within {
	outline: 2px solid var(--acini-accent-soft);
	outline-offset: 2px;
}

.acini-home-hero__field {
	flex: 1 1 auto;
	min-inline-size: 0;
	padding: var(--acini-space-xs) var(--acini-space-sm);
}

.acini-home-hero__label {
	display: block;
	margin-block-end: 0.2rem;
	font-size: var(--acini-text-xs);
	line-height: var(--acini-leading-normal);
	color: var(--acini-hero-faint);
}

.acini-home-hero__input {
	display: block;
	inline-size: 100%;
	block-size: 2.2rem;
	padding: 0;
	margin: 0;
	font: inherit;
	font-size: var(--acini-text-sm);
	line-height: var(--acini-leading-normal);
	color: var(--acini-text-inverse);
	background: none;
	border: 0;
	border-radius: 0;
	outline: 0;
	box-shadow: none;
	appearance: none;
}

.acini-home-hero__input::placeholder {
	color: var(--acini-hero-faint);
	opacity: 1;
}

.acini-home-hero__input::-webkit-search-cancel-button {
	appearance: none;
}

.acini-home-hero__go {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	inline-size: 4.8rem;
	block-size: 4.8rem;
	padding: 0;
	color: var(--acini-accent-contrast);
	background: var(--acini-accent);
	border: 1px solid var(--acini-accent);
	border-radius: var(--acini-radius-lg);
	cursor: pointer;
	transition:
		background-color var(--acini-transition),
		border-color var(--acini-transition);
}

.acini-home-hero__panel {
	position: absolute;
	inset-block-start: calc(100% + var(--acini-space-xs));
	inset-inline: 0;
	z-index: 5;
	max-block-size: 32rem;
	padding: var(--acini-space-xs);
	overflow-y: auto;
	background: var(--acini-bg-inverse-raised);
	border: 1px solid var(--acini-hero-line);
	border-radius: calc(var(--acini-radius-xl) - 0.2rem);
	box-shadow: var(--acini-shadow-card);
	--acini-scrollbar: var(--acini-scrollbar-thumb-inverse);
}

.acini-home-hero__panel[hidden] {
	display: none;
}

.acini-home-hero__results {
	margin: 0;
	padding: 0;
	list-style: none;
}

.acini-home-hero__results a {
	display: block;
	padding: 1rem var(--acini-space-sm);
	font-size: var(--acini-text-sm);
	line-height: var(--acini-leading-normal);
	color: var(--acini-text-inverse);
	text-decoration: none;
	border-radius: var(--acini-radius-lg);
}

.acini-home-hero__results [aria-selected="true"] a {
	background: var(--acini-hero-fill);
	outline: 2px solid var(--acini-accent-soft);
	outline-offset: -2px;
}

.acini-home-hero__empty {
	margin: 0;
	padding: var(--acini-space-sm);
	font-size: var(--acini-text-sm);
	line-height: var(--acini-leading-normal);
	color: var(--acini-text-inverse-muted);
}

.acini-home-hero__empty:empty {
	display: none;
}

/* ---- Buttons ------------------------------------------------------------ */

.acini-home-hero__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--acini-space-md);
	margin-block-start: var(--acini-space-lg);
}

.acini-home-hero__btn {
	--acini-btn-py: 1.1rem;
	--acini-btn-px: var(--acini-space-lg);
	font-family: var(--acini-font-body);
	font-size: var(--acini-text-sm);
	font-weight: var(--acini-weight-regular);
	line-height: var(--acini-leading-normal);
}

.acini-home-hero__btn--outline {
	color: var(--acini-text-inverse);
	background: none;
	border-color: var(--acini-text-inverse);
}

.acini-home-hero__go:focus-visible,
.acini-home-hero__btn:focus-visible {
	outline: 2px solid var(--acini-text-inverse);
	outline-offset: 2px;
}

/* ---- Marquee slot ------------------------------------------------------- */

.acini-home-hero__marquee {
	position: relative;
}

.acini-home-hero__marquee > * {
	margin-block-start: var(--acini-space-lg);
}

@media (hover: hover) {
	.acini-home-hero__go:hover {
		background: var(--acini-accent-hover);
		border-color: var(--acini-accent-hover);
	}

	.acini-home-hero__btn--outline:hover {
		color: var(--acini-text);
		background: var(--acini-text-inverse);
	}

	.acini-home-hero__results a:hover {
		background: var(--acini-hero-fill);
	}
}

@media (prefers-reduced-motion: reduce) {
	.acini-home-hero__blob,
	.acini-home-hero__blob::before {
		animation: none;
	}
}