/**
 * Section: get started in three steps (Figma "install" 10513:24795).
 *
 * The track is 2361px wide. Where scroll-driven animations are supported
 * (and motion is welcome) the section pins, the track slides sideways as the
 * page scrolls; elsewhere the track simply scrolls horizontally. Either way
 * its dashes appear one by one, left to right, as they reach the screen,
 * showing the path from step to step (install.js; motion welcome only).
 */

.hb-section.hb-section--install {
	--hb-install-start: max(var(--hb-gutter), calc(50% - 34.0625rem));
	position: relative;
	margin-top: var(--wp--preset--spacing--90);
	padding: 0;
}

.hb-section.hb-section--install > *,
.hb-install__pin.hb-install__pin > * {
	margin-block: 0;
}

.hb-install__pin.hb-install__pin {
	overflow-x: auto;
	overflow-y: hidden;
	scrollbar-width: thin;
}

.hb-install__track.hb-install__track {
	position: relative;
	width: 147.5625rem;
	height: 48.3125rem;
	margin-left: var(--hb-install-start);
	background: url("../../images/shapes/install-bg-dark-ticket.svg") 298.5px 0.28px / 1869.754px 773.651px no-repeat;
}

/* The dashes, cut out of the ticket: one path each, in the page colour, so
 * they can appear in turn. Steps and badges paint above them. */
.hb-install__dashes.hb-install__dashes {
	top: 0.28px;
	left: 298.5px;
	width: 1869.754px;
	height: 773.651px;
	fill: var(--wp--preset--color--surface);
	pointer-events: none;
}

.hb-install__track.hb-install__track > * {
	position: absolute;
	margin: 0;
}

.hb-install__title.hb-install__title {
	top: 20.65rem;
	left: 0;
	width: 24.4375rem;
	letter-spacing: -0.0625em;
	line-height: 0.875;
}

.hb-install__steps.hb-install__steps {
	top: 7.8925rem;
	left: 39.53rem;
	display: flex;
	gap: 8.25rem;
}

.hb-install__steps.hb-install__steps > * {
	margin: 0;
}

.hb-step.hb-step {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 3.4375rem;
	width: 19.5rem;
}

.hb-step.hb-step > * {
	margin-block: 0;
}

.hb-step__thumb.hb-step__thumb {
	overflow: hidden;
	border-radius: var(--wp--custom--radius--sm);
}

.hb-step__thumb img {
	display: block;
	width: 19.5rem;
	height: auto;
	aspect-ratio: 312 / 197;
}

.hb-step__num.hb-step__num {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 4.625rem;
	height: 5rem;
	padding-right: 0.35rem;
	background: url("../../images/shapes/install-number-badge.svg") center / 100% 100% no-repeat;
	color: var(--wp--preset--color--contrast);
	font-family: var(--wp--preset--font-family--sans);
	font-size: 3rem;
	font-weight: 400;
	letter-spacing: -0.042em;
	line-height: 1;
}

.hb-step > .hb-step__title + .hb-step__text {
	margin-top: calc(var(--wp--preset--spacing--20) - 3.4375rem);
}

.hb-step__title.hb-step__title {
	font-weight: 600;
	letter-spacing: -0.04em;
	line-height: 1;
}

.hb-step__text {
	letter-spacing: -0.04em;
	line-height: 1.3;
}

.hb-install__cta.hb-install__cta {
	top: calc(50% + 0.21px);
	left: 131.0625rem;
	gap: var(--wp--preset--spacing--40);
	width: 16.5rem;
	transform: translateY(-50%);
}

.hb-install__cta.hb-install__cta > * {
	margin-block: 0;
}

@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) and (min-width: 1024px) {
		/* The pin sticks centred in the space left below the sticky header,
		 * and the timeline insets match that position, so the pan starts
		 * when the pin sticks and ends when it lets go. */
		.hb-section.hb-section--install {
			--hb-pin-top: max(var(--wp--custom--header--offset), calc(50vh + var(--wp--custom--header--offset) / 2 - 24.15625rem));
			height: calc(48.3125rem + 79.4375rem);
			view-timeline-name: --hb-install;
			view-timeline-inset: var(--hb-pin-top) max(0px, calc(100vh - var(--hb-pin-top) - 48.3125rem));
		}

		.hb-install__pin.hb-install__pin {
			position: sticky;
			top: var(--hb-pin-top);
			overflow: hidden;
		}

		.hb-install__track.hb-install__track {
			animation: hb-install-pan linear both;
			animation-timeline: --hb-install;
			animation-range: contain 0% contain 100%;
		}

		@keyframes hb-install-pan {
			to {
				transform: translateX(-79.4375rem);
			}
		}

	}
}


/* Dashes, once install.js has marked the section: each one stretches in
 * from its left end when it reaches the screen, after the ones before it. */
@media (prefers-reduced-motion: no-preference) {
	/* Clipped rather than scaled: the dash keeps its size, so the observer
	 * still sees it coming into view. */
	.hb-install--dashes .hb-install__dashes path {
		clip-path: inset(0 100% 0 0);
		transition: clip-path 0.55s cubic-bezier(0.2, 0.8, 0.2, 1);
		transition-delay: var(--hb-dash-delay, 0s);
	}

	.hb-install--dashes .hb-install__dashes path.is-in {
		clip-path: inset(0 0 0 0);
	}
}

/* Tablets and phones: a vertical story instead of the track. */
@media (max-width: 1023.98px) {
	.hb-install__pin.hb-install__pin {
		overflow: visible;
	}

	.hb-install__track.hb-install__track {
		display: flex;
		flex-direction: column;
		gap: var(--wp--preset--spacing--70);
		width: auto;
		height: auto;
		margin-inline: var(--hb-gutter);
		background: none;
	}

	.hb-install__track.hb-install__track > * {
		position: static;
		transform: none;
	}

	.hb-install__dashes.hb-install__dashes {
		display: none;
	}

	.hb-install__title.hb-install__title {
		width: auto;
	}

	.hb-install__steps.hb-install__steps {
		flex-direction: column;
		gap: var(--wp--preset--spacing--80);
		padding: var(--wp--preset--spacing--70) var(--wp--preset--spacing--50);
		border-radius: 1.5rem;
		background-color: var(--wp--preset--color--contrast);
	}

	.hb-step.hb-step {
		gap: var(--wp--preset--spacing--50);
		width: 100%;
	}

	.hb-step > .hb-step__title + .hb-step__text {
		margin-top: calc(var(--wp--preset--spacing--20) - var(--wp--preset--spacing--50));
	}

	.hb-step__thumb.hb-step__thumb,
	.hb-step__thumb img {
		width: 100%;
	}

	.hb-step__text.hb-step__text {
		font-size: var(--wp--preset--font-size--medium);
		line-height: 1.25;
	}

	.hb-install__cta.hb-install__cta {
		width: auto;
	}
}