/*
 * Scroll stepper for "How It Works" sections.
 *
 * Suggested block structure:
 * - Outer Group: gaussian-how-it-works
 * - Each step Group: gaussian-how-it-works__step
 */
.gaussian-how-it-works {
	--how-it-works-bg: transparent;
	--how-it-works-marker-bg: var(--wp--preset--color--primary, #191b46);
	--how-it-works-marker-text: var(--wp--preset--color--base, #ffffff);
	--how-it-works-border: rgba(255, 255, 255, 0.16);
	--how-it-works-step-border: transparent;
	--how-it-works-active-border: rgba(255, 255, 255, 0.9);
	--how-it-works-line: rgba(255, 255, 255, 0.18);
	--how-it-works-line-active: rgba(255, 255, 255, 0.88);
	--how-it-works-step-size: 2.25rem;
	--how-it-works-line-gap: 0;
	--how-it-works-rail-gap: clamp(1rem, 3vw, 2rem);
	--how-it-works-rail-height: 0px;
	--how-it-works-rail-progress: 0px;
	--how-it-works-rail-top: 0px;
	background: var(--how-it-works-bg);
	counter-reset: how-it-works-step;
	position: relative;
}

.gaussian-how-it-works::before,
.gaussian-how-it-works::after {
	content: "";
	left: calc(var(--how-it-works-step-size) / 2);
	position: absolute;
	top: var(--how-it-works-rail-top);
	width: 2px;
	z-index: 1;
}

.gaussian-how-it-works::before {
	background: var(--how-it-works-line);
	height: var(--how-it-works-rail-height);
}

.gaussian-how-it-works::after {
	background: var(--how-it-works-line-active);
	height: var(--how-it-works-rail-progress);
}

.gaussian-how-it-works__step {
	--how-it-works-progress: 0%;
	border-color: var(--how-it-works-step-border) !important;
	counter-increment: how-it-works-step;
	cursor: pointer;
	margin-left: calc(var(--how-it-works-step-size) + var(--how-it-works-rail-gap));
	position: relative;
	transition: border-color 1s ease;
	z-index: 2;
}

.gaussian-how-it-works__step > * {
	opacity: 0.22;
	transition: opacity 1s ease;
}

.gaussian-how-it-works__step:not(:last-child) {
	margin-bottom: var(--wp--preset--spacing--large, 3rem);
}

.gaussian-how-it-works__step::before {
	align-items: center;
	background: var(--how-it-works-marker-bg);
	border: 2px solid var(--how-it-works-border);
	border-radius: 999px;
	box-sizing: border-box;
	color: var(--how-it-works-marker-text);
	content: counter(how-it-works-step);
	display: flex;
	font-size: 0.95rem;
	font-weight: 600;
	height: var(--how-it-works-step-size);
	justify-content: center;
	left: calc(-1 * (var(--how-it-works-step-size) + var(--how-it-works-rail-gap)));
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: var(--how-it-works-step-size);
	z-index: 3;
}

.gaussian-how-it-works__step.is-active {
	border-color: var(--how-it-works-active-border) !important;
}

.gaussian-how-it-works__step.is-active > * {
	opacity: 1;
}

.gaussian-how-it-works__step.is-active::before {
	border-color: var(--how-it-works-active-border);
	box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.08);
}

.editor-styles-wrapper .gaussian-how-it-works__step > * {
	opacity: 1;
}

.editor-styles-wrapper .gaussian-how-it-works__step::before {
	border-color: var(--how-it-works-active-border);
}

@media (max-width: 781px) {
	.gaussian-how-it-works {
		--how-it-works-rail-gap: 1rem;
		--how-it-works-step-size: 2rem;
	}

	.gaussian-how-it-works__step {
		margin-left: calc(var(--how-it-works-step-size) + var(--how-it-works-rail-gap));
	}

	.gaussian-how-it-works__step::before {
		left: calc(-1 * (var(--how-it-works-step-size) + var(--how-it-works-rail-gap)));
	}
}

@media (prefers-reduced-motion: reduce) {
	.gaussian-how-it-works__step {
		transition: none;
	}
}