/* ==========================================================================
   Home hero — "Moving wall" (template-parts/home/hero.php)
   --------------------------------------------------------------------------
   Loaded on the home page only. Own copy of the Test page's HH5. Only the
   existing type sizes, weights, spacing, radii, shadows and colours.

   1. Layout, badge, headline, intro, buttons
   2. The moving wall of work
   3. Client ticker
   4. Entrance (behind the preloader, or straight away)
   5. Reduced motion
   ========================================================================== */


/* 1. Layout, badge, headline, intro, buttons
   ========================================================================== */

/* Starts below the fixed header; sized to fill the first screen. */
.home-hero {
	--hh-out: cubic-bezier(0.22, 1, 0.36, 1);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-l);
	width: 100%;
	max-width: 1920px;
	min-height: 100vh;
	min-height: 100svh;
	margin: 0 auto var(--space-xl);
	padding: calc(var(--space-xxl) + var(--space-m)) 0 0;
	font-family: var(--font-sans);
	color: var(--color-ink);
	text-align: center;
}

.home-hero__head,
.home-hero__foot {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-m);
	padding: 0 var(--gutter);
}

.home-hero__title {
	font-size: var(--size-display);
	font-weight: 500;
	letter-spacing: -0.5px;
	line-height: 1.1;
}

.home-hero__intro {
	max-width: 560px;
	font-size: 18px;
	font-weight: 300;
	letter-spacing: -0.5px;
	line-height: 1.2;
	opacity: 0.7;
}

.home-hero__buttons {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--space-s);
}

.home-hero__button {
	padding: 0 var(--space-m);
}


/* 2. The moving wall of work
   ========================================================================== */

.home-hero__wall {
	width: 100%;
	/* Room above and below so a picture lifting on hover (and its shadow)
	   isn't cut off by the edge; the negative margin keeps the layout. */
	margin: calc(var(--space-s) * -1) 0;
	padding: var(--space-s) 0;
	overflow: hidden;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.home-hero__track {
	display: flex;
	width: max-content;
	animation: home-hero-slide 50s linear infinite;
}

/* Pauses while you point at it (or tab into it). */
.home-hero__wall:hover .home-hero__track,
.home-hero__wall:focus-within .home-hero__track {
	animation-play-state: paused;
}

@keyframes home-hero-slide {
	to {
		transform: translateX(-50%);
	}
}

.home-hero__list {
	display: flex;
	gap: var(--space-s);
	margin: 0;
	padding: 0 var(--space-s) 0 0;
	list-style: none;
}

.home-hero__item {
	width: 340px;
}

/* Every second one sits a little lower. */
.home-hero__item:nth-child(even) {
	margin-top: var(--space-m);
}

.home-hero__work {
	display: flex;
	flex-direction: column;
	gap: var(--space-xs);
	color: var(--color-ink);
	text-align: left;
}

.home-hero__work img {
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 10;
	border-radius: var(--radius);
	object-fit: cover;
	box-shadow: var(--shadow-soft);
	transition: translate 0.4s var(--hh-out), box-shadow 0.4s;
}

.home-hero__work:hover img,
.home-hero__work:focus-visible img {
	box-shadow: var(--shadow-deep);
	translate: 0 -5px;
}

.home-hero__name {
	font-size: 15px;
	font-weight: 500;
	letter-spacing: -0.5px;
}

.home-hero__name span {
	color: var(--color-orange);
	font-size: 12px;
	text-transform: uppercase;
}


/* 3. Client ticker (logo + name, orange dots between)
   ========================================================================== */

.home-hero__ticker {
	--fade: 12%;
	--logo-h: 60px;
	width: 100%;
	padding: 18px 0;
	overflow: hidden;
	border-top: 1px solid var(--color-line);
	border-bottom: 1px solid var(--color-line);
	-webkit-mask-image: linear-gradient(to right, transparent 0%, #000 var(--fade), #000 calc(100% - var(--fade)), transparent 100%);
	mask-image: linear-gradient(to right, transparent 0%, #000 var(--fade), #000 calc(100% - var(--fade)), transparent 100%);
}

.home-hero__ticker-track {
	display: flex;
	width: max-content;
	animation: home-hero-slide 50s linear infinite;
}

.home-hero__ticker-list {
	display: flex;
	align-items: center;
	margin: 0;
	padding: 0;
	list-style: none;
}

.home-hero__ticker-item {
	display: flex;
	flex-shrink: 0;
	align-items: center;
	gap: 14px;
	padding: 0 34px;
}

.home-hero__ticker-item::after {
	content: "";
	width: 6px;
	height: 6px;
	margin-left: 34px;
	border-radius: 50%;
	background-color: var(--color-orange);
}

.home-hero__ticker-logo {
	width: var(--logo-h);
	height: var(--logo-h);
	object-fit: contain;
	filter: saturate(0%);
}

.home-hero__ticker-name {
	font-size: 22px;
	font-weight: 500;
	letter-spacing: -0.5px;
	white-space: nowrap;
}

@media (max-width: 1200px) {
	.home-hero {
		min-height: 0;
	}

	.home-hero__ticker {
		--logo-h: 44px;
	}
}

@media (max-width: 810px) {
	.home-hero {
		gap: var(--space-m);
		padding-top: calc(var(--space-xl) + var(--space-m));
	}

	.home-hero__intro {
		font-size: 15px;
	}

	.home-hero__item {
		width: 220px;
	}

	.home-hero__ticker {
		--logo-h: 52px; /* Was 34px: too small to read on phones. */
	}

	.home-hero__ticker-item {
		padding: 0 20px;
	}

	.home-hero__ticker-item::after {
		margin-left: 20px;
	}

	.home-hero__ticker-name {
		font-size: 16px;
	}
}

@media (max-width: 478px) {
	.home-hero__buttons {
		flex-direction: column;
		width: 100%;
	}

	.home-hero__button {
		width: 100%;
		height: 45px;
	}
}


/* 4. Entrance — behind the preloader, or straight away
   ==========================================================================
   The hero rises in (E5: text from the left, the work from the right, the
   client ticker from below):
     - html.has-loader: right behind the lifting curtain of the preloader
       (assets/css/preloader.css), which starts lifting at 3.05s;
     - html.intro-quick: later in the visit (no preloader) — straight away.
   With reduced motion neither class is set: the hero just shows. */

/* Behind the curtain.
   "backwards": the start state holds during each delay, then the normal
   styles return (so hover still works afterwards). */
.has-loader .home-hero {
	--hl-start: 2.9s;
	--hl-out: cubic-bezier(0.22, 1, 0.36, 1);
}

.has-loader .home-hero__badge {
	animation: hl-from-left 0.9s var(--hl-out) calc(var(--hl-start) + 0.6s) backwards;
}

.has-loader .home-hero__title {
	animation: hl-from-left 1s var(--hl-out) calc(var(--hl-start) + 0.68s) backwards;
}

.has-loader .home-hero__wall {
	animation: hl-from-right 1.1s var(--hl-out) calc(var(--hl-start) + 0.75s) backwards;
}

.has-loader .home-hero__intro {
	animation: hl-from-left 1s var(--hl-out) calc(var(--hl-start) + 0.9s) backwards;
}

.has-loader .home-hero__buttons {
	animation: hl-from-left 1s var(--hl-out) calc(var(--hl-start) + 1s) backwards;
}

.has-loader .home-hero__ticker {
	animation: hl-rise-in 1s var(--hl-out) calc(var(--hl-start) + 1.1s) backwards;
}

/* Straight away (no preloader this time). */
.intro-quick .home-hero {
	--hl-out: cubic-bezier(0.22, 1, 0.36, 1);
}

.intro-quick .home-hero__badge {
	animation: hl-from-left 0.9s var(--hl-out) 0.05s backwards;
}

.intro-quick .home-hero__title {
	animation: hl-from-left 1s var(--hl-out) 0.13s backwards;
}

.intro-quick .home-hero__wall {
	animation: hl-from-right 1.1s var(--hl-out) 0.2s backwards;
}

.intro-quick .home-hero__intro {
	animation: hl-from-left 1s var(--hl-out) 0.35s backwards;
}

.intro-quick .home-hero__buttons {
	animation: hl-from-left 1s var(--hl-out) 0.45s backwards;
}

.intro-quick .home-hero__ticker {
	animation: hl-rise-in 1s var(--hl-out) 0.55s backwards;
}

@keyframes hl-from-left {
	from {
		opacity: 0;
		translate: -70px 0;
	}
}

@keyframes hl-from-right {
	from {
		opacity: 0;
		translate: 110px 0;
	}
}

@keyframes hl-rise-in {
	from {
		opacity: 0;
		translate: 0 28px;
	}
}


/* 5. Reduced motion: still strips you can swipe through instead
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	.home-hero__track,
	.home-hero__ticker-track {
		animation: none;
	}

	.home-hero__wall,
	.home-hero__ticker {
		overflow-x: auto;
	}

	.home-hero__work img {
		transition: none;
	}
}