<div class="section-steps__content">
	<svg class="section-steps__arrow" width="14" height="14" fill="#7b8794" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 13" id="slider-arrow">
		<path d="M0.333252 12.0417L9.04159 6.50004L0.333252 0.958374V12.0417Z"></path>
	</svg>
	<ol class="section-steps__list">
		<li class="section-steps__item">
			<div class="section-steps__number">
				1
				<svg class="section-steps__circle circle-1" width="48" height="48" fill="none">
					<circle cx="24" cy="24" r="22" stroke="#32B978" stroke-width="2" />
				</svg>
			</div>
			<p class="section-steps__text">Заявка на необходимую Вам услугу Digital Express.</p>
		</li>
		<li class="section-steps__item">
			<div class="section-steps__number">
				2
				<svg class="section-steps__circle circle-2" width="48" height="48" fill="none">
					<circle cx="24" cy="24" r="22" stroke="#32B978" stroke-width="2" />
				</svg>
			</div>
			<p class="section-steps__text">Звонок/сообщение Вам от нас. Обсуждение проекта.</p>
		</li>
		<li class="section-steps__item">
			<div class="section-steps__number">
				3
				<svg class="section-steps__circle circle-3" width="48" height="48" fill="none">
					<circle cx="24" cy="24" r="22" stroke="#32B978" stroke-width="2" />
				</svg>
			</div>
			<p class="section-steps__text">Ваша оплата – наша работа.</p>
		</li>
		<li class="section-steps__item">
			<div class="section-steps__number">
				4
				<svg class="section-steps__circle circle-4" width="48" height="48" fill="none">
					<circle cx="24" cy="24" r="22" stroke="#32B978" stroke-width="2" />
				</svg>
			</div>
			<p class="section-steps__text">Информирование о промежуточных результатах.</p>
		</li>
		<li class="section-steps__item">
			<div class="section-steps__number">
				5
				<svg class="section-steps__circle circle-5" width="48" height="48" fill="none">
					<circle cx="24" cy="24" r="22" stroke="#32B978" stroke-width="2" />
				</svg>
			</div>
			<p class="section-steps__text">Выполнение проекта и сдача его строго в срок. ГОТОВО!</p>
		</li>
	</ol>
</div>

body {
	background-color: #1f2933;
}

.section-steps {
	&__content {
		position: relative;
	}

	&__list {
		list-style: none;
		padding: 0;
		margin: 56px 0 40px;
		display: flex;
		position: relative;
		&::before {
			content: "";
			position: absolute;
			width: 80%;
			height: 1px;
			top: 24px;
			left: 50%;
			transform: translateX(-50%);
			z-index: -1;
			background-image: linear-gradient(
				90deg,
				#52606d,
				#52606d 50%,
				transparent 50%,
				transparent 100%
			);
			background-size: 30px 1px;
		}
	}

	&__item {
		display: flex;
		flex-direction: column;
		align-items: center;
		flex: 1;
		text-align: center;
		line-height: 1.24;
		color: #cbd2d9;
		margin: 0 12px;
	}

	$total: 5;
	$play: 1s;
	$stay: 2s;
	$frame-len: 100% / ($total);
	$play-part: $play / ($play + $stay);
	@for $n from 1 through $total {
		$i: $n - 1;
		&__item:nth-child(#{$n}) circle {
			animation-name: line-anim-#{$n};

			$frame-wait: $i * $frame-len;
			$frame-play: $n * $frame-len;
			@keyframes line-anim-#{$n} {
				0%,
				#{$frame-wait} {
					stroke-dashoffset: 138;
				}

				#{$frame-play - $frame-len * $play-part} {
					stroke-dashoffset: 138 - $n * 138 / $total;
				}

				#{$frame-play + $frame-len},
				100% {
					stroke-dashoffset: 138 - $n * 138 / $total;
				}
			}
		}
	}

	&__arrow {
		display: block;
		position: absolute;
		left: 10%;
		top: 24px;
		margin-top: -7px;
		animation: arrowMove ease infinite;
		animation-duration: ($play + $stay) * $total;
	}

	$from: 10%;
	$to: 90%;
	$offset: -38px;

	@keyframes arrowMove {
		0% {
			left: calc(#{$from} + #{$offset});
		}
		@for $n from 1 through $total {
			$i: $n - 1;
			$left: #{$from + $i * ($to - $from) / ($total - 1)};
			$frame-play: $n * $frame-len;
			#{$frame-play - $frame-len * $play-part},
			#{$frame-play - $frame-len} {
				left: calc(#{$left} + #{$offset});
			}
		}
		100% {
			left: calc(#{$to} + #{$offset});
		}
	}

	&__circle {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		width: 100%;
		height: 100%;
		transform: rotate(90deg);

		& circle {
			stroke-dasharray: 138;
			stroke-dasharray: 138;
			animation: ease infinite;
			animation-duration: ($play + $stay) * $total;
		}
	}

	&__number {
		flex: none;
		margin-bottom: 24px;
		width: 48px;
		height: 48px;
		position: relative;
		background-color: #323f4b;
		border-radius: 50%;
		color: #f5f7fa;
		font-size: 28px;
		line-height: 48px;
		font-weight: 500;
		text-align: center;
	}
}