/*
 * Stone Cliff Digital — Process / Timeline Foundation
 * Reusable horizontal desktop timeline. Sequential activation is driven
 * by the .is-animated class (added once via IntersectionObserver) plus a
 * per-step --step-index custom property for staggered delay. Loaded only
 * on pages that use template-parts/process-timeline.php.
 */

.process-timeline {
	position: relative;
	/* Shared animation envelope — tuned so total playback lands at ~1.85s
	   regardless of step count. --total-steps is set inline per instance
	   (template-parts/process-timeline.php) so the stagger below spreads
	   evenly across however many steps that instance has, rather than
	   using one fixed per-step delay that would run long on longer
	   timelines or feel abrupt on shorter ones. */
	--process-line-duration: 1.75s;
	--process-line-delay: 0.1s;
	--process-line-easing: cubic-bezier(.4, 0, .2, 1);
	--process-node-transition: 500ms ease;
	--process-stagger-span: 1350ms;
}

.process-timeline__track {
	position: absolute;
	top: 20px;
	left: 20px;
	right: 20px;
	height: 1px;
	background: var(--sc-slate-200);
}

.section--dark .process-timeline__track,
.section--dark-deep .process-timeline__track {
	background: var(--sc-ink-4);
}

.process-timeline__progress {
	height: 100%;
	width: 0%;
	background: var(--sc-blue);
	transition: width var(--process-line-duration) var(--process-line-easing) var(--process-line-delay);
}

.process-timeline.is-animated .process-timeline__progress {
	width: 100%;
}

.process-timeline__list {
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: var(--sc-space-200);
}

.process-timeline__step {
	flex: 1 1 0;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--sc-space-100);
}

.process-timeline__node {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--sc-paper);
	border: 1px solid var(--sc-slate-200);
	transition: background var(--process-node-transition), border-color var(--process-node-transition), transform var(--process-node-transition);
	transition-delay: calc((var(--step-index) / max(var(--total-steps) - 1, 1)) * var(--process-stagger-span));
}

.section--dark .process-timeline__node,
.section--dark-deep .process-timeline__node {
	background: var(--sc-ink-2);
	border-color: var(--sc-ink-4);
}

.process-timeline__number {
	font-family: var(--sc-font-mono);
	font-size: var(--sc-text-mono-label);
	font-weight: 500;
	color: var(--sc-text-onlight-mute);
	transition: color var(--process-node-transition);
	transition-delay: calc((var(--step-index) / max(var(--total-steps) - 1, 1)) * var(--process-stagger-span));
}

.section--dark .process-timeline__number,
.section--dark-deep .process-timeline__number {
	color: var(--sc-text-ondark-mute);
}

.process-timeline.is-animated .process-timeline__step .process-timeline__node {
	background: var(--sc-blue);
	border-color: var(--sc-blue);
}

.process-timeline.is-animated .process-timeline__step .process-timeline__number {
	color: #fff;
}

.process-timeline__title {
	font-size: var(--sc-text-h3);
	font-weight: 700;
}

.process-timeline__description {
	color: var(--sc-text-onlight-mute);
}

.section--dark .process-timeline__description,
.section--dark-deep .process-timeline__description {
	color: var(--sc-text-ondark-mute);
}

@media (prefers-reduced-motion: reduce) {
	.process-timeline__progress,
	.process-timeline__node,
	.process-timeline__number {
		transition-delay: 0s;
	}
}

/* -------------------------------------------------------------------- */
/* Responsive — vertical layout on phone widths                        */
/* -------------------------------------------------------------------- */

@media (max-width: 600px) {
	.process-timeline__track {
		top: 0;
		bottom: 0;
		left: 20px;
		right: auto;
		width: 1px;
		height: auto;
	}

	.process-timeline__progress {
		width: 100%;
		height: 0%;
		transition-property: height;
	}

	.process-timeline.is-animated .process-timeline__progress {
		height: 100%;
	}

	.process-timeline__list {
		flex-direction: column;
		gap: var(--sc-space-300);
	}

	.process-timeline__step {
		flex-direction: row;
		align-items: flex-start;
	}
}