/*!
 * TA How It Works — front-end styles.
 *
 * Deliberately unopinionated about background, width, and outer spacing: the page
 * builder owns those. Everything here is the icons, the arrows, and the hover
 * choreography.
 *
 * Every value resolves from a --tahiw-* custom property set per instance and per
 * step, so nothing needs a generated stylesheet.
 */

.tahiw {
	--tahiw-holder: 84px;
	--tahiw-icon: 34px;
	--tahiw-gap: 22px;
	--tahiw-step-w: 170px;
	--tahiw-dur: 320ms;
	--tahiw-ease: cubic-bezier(0.2, 0.7, 0.3, 1);
	--tahiw-arrow-w: 34px;
	--tahiw-arrow-idle: 0.4;
	--tahiw-arrow-glow: rgba(114, 127, 104, 0.85);
	--tahiw-arrow-blur: 6px;
	--tahiw-title-size: 16px;
	--tahiw-title-color: #1b2430;
	--tahiw-byline-size: 13px;
	--tahiw-byline-color: #5a6270;

	width: 100%;
}

.tahiw *,
.tahiw *::before,
.tahiw *::after {
	box-sizing: border-box;
}

.tahiw-track {
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	justify-content: center;
	gap: var(--tahiw-gap);
	/*
	 * Safety net, not the layout plan. Stacking is driven by the per-instance media
	 * query at the operator's chosen breakpoint; this only guarantees that if that
	 * style is ever stripped, or the breakpoint is set too low for the number of
	 * steps, the row wraps instead of forcing a horizontal scrollbar onto the page.
	 */
	flex-wrap: wrap;
}

.tahiw--left .tahiw-track {
	justify-content: flex-start;
}

/* ---- step ------------------------------------------------------------- */

.tahiw-step {
	flex: 0 1 var(--tahiw-step-w);
	max-width: var(--tahiw-step-w);
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	cursor: default;
	outline: none;
}

.tahiw-holder {
	position: relative;
	width: var(--tahiw-holder);
	height: var(--tahiw-holder);
	display: grid;
	place-items: center;
	margin-bottom: 14px;
}

/*
 * The background is its own layer rather than a background on .tahiw-holder.
 * The glow is a box-shadow, and putting both on one element means the shadow
 * animates against a changing fill; separating them keeps each transition clean
 * and lets the layer scale slightly without dragging the icon with it.
 */
.tahiw-holder-bg {
	position: absolute;
	inset: 0;
	background: var(--tahiw-bg, #f0efea);
	border-radius: var(--tahiw-radius, 50%);
	transition:
		background var(--tahiw-dur) var(--tahiw-ease),
		box-shadow var(--tahiw-dur) var(--tahiw-ease);
}

.tahiw-icon {
	position: relative;
	display: block;
	width: var(--tahiw-icon);
	height: var(--tahiw-icon);
	object-fit: contain;
	/* Scaling is composited; animating width/height would relayout every frame. */
	transition: transform var(--tahiw-dur) var(--tahiw-ease);
	transform: scale(1);
}

.tahiw-title {
	font-size: var(--tahiw-title-size);
	font-weight: 600;
	line-height: 1.25;
	color: var(--tahiw-title-color);
	margin-bottom: 6px;
}

.tahiw-byline {
	font-size: var(--tahiw-byline-size);
	line-height: 1.45;
	color: var(--tahiw-byline-color);
}

/* ---- active state (this step and every step before it) ---------------- */

.tahiw-step.is-active .tahiw-holder-bg {
	background: var(--tahiw-bg-hover, #ddddcf);
	box-shadow: 0 0 0 var(--tahiw-glow-spread, 6px) var(--tahiw-glow, transparent);
}

.tahiw-step.is-active .tahiw-icon {
	transform: scale(var(--tahiw-scale, 1));
}

/* Keyboard parity — the row is reachable by Tab. */
.tahiw-step:focus-visible .tahiw-holder-bg {
	outline: 2px solid var(--tahiw-arrow-glow);
	outline-offset: 4px;
}

/* ---- arrow ------------------------------------------------------------ */

.tahiw-arrow {
	flex: 0 0 auto;
	width: var(--tahiw-arrow-w);
	display: flex;
	align-items: center;
	justify-content: center;
	/*
	 * Match the icon holder's height and centre inside it, rather than nudging the
	 * arrow down by a computed margin. An offset would have to assume the arrow's
	 * aspect ratio, and a wide, short arrow — which is the usual shape — is far
	 * shorter than it is wide, so any width-derived offset lands it too high.
	 * Equal heights plus centring is correct for artwork of any proportion.
	 */
	height: var(--tahiw-holder);
	color: var(--tahiw-byline-color);
	transition: transform var(--tahiw-dur) var(--tahiw-ease);
}

.tahiw-arrow img,
.tahiw-arrow svg {
	display: block;
	width: 100%;
	height: auto;
	opacity: var(--tahiw-arrow-idle);
	transition:
		opacity var(--tahiw-dur) var(--tahiw-ease),
		filter var(--tahiw-dur) var(--tahiw-ease);
}

/*
 * drop-shadow rather than box-shadow: it follows the artwork's alpha, so an
 * uploaded arrow glows around its actual shape instead of its bounding box.
 */
.tahiw-arrow.is-active img,
.tahiw-arrow.is-active svg {
	opacity: 1;
	filter: drop-shadow(0 0 var(--tahiw-arrow-blur) var(--tahiw-arrow-glow));
}

/* ---- motion preferences ----------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.tahiw-holder-bg,
	.tahiw-icon,
	.tahiw-arrow,
	.tahiw-arrow img,
	.tahiw-arrow svg {
		transition-duration: 1ms;
	}

	.tahiw-step.is-active .tahiw-icon {
		transform: none;
	}
}