.lightrope {
	position: absolute;
	inset: 100% 1ex auto;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	margin-top: 7px;
	overflow-x: clip;
	pointer-events: none;
	z-index: -1;
}

.lightrope B {
	flex: 1;
	height: 14px;
	border-bottom: solid #777 2px;
	border-radius: 50%;
	margin: 0 -2px;
	transform: translateY(-66%);
}
.lightrope B:first-child {
	transform-origin: right bottom;
	transform: translateY(-66%) rotate(20deg);
}
.lightrope B.last,
.lightrope B:last-of-type {
	transform-origin: left bottom;
	transform: translateY(-66%) rotate(-20deg);
}
.lightrope B.last ~ * {
	display: none;
}

.lightrope I {
	--halo-color: rgba(0, 247, 127,  1);
	--back-color: rgba(0, 247, 127, .8);
	--half-color: rgba(0, 247, 127, .4);
	--anim-durat: 2s;
	position: relative;
	width: 12px;
	height: 20px;
	border-radius: 100%;
	flex-shrink: 0;
	background: #fff;
	box-shadow: 0px 4px 24px 4px rgba(255, 255, 255, 1);
	animation-name: back;
	animation-duration: var(--anim-durat);
	animation-fill-mode: both;
	animation-timing-function: ease-out;
	animation-iteration-count: infinite;
}
.lightrope I:nth-of-type(2n+1) {
	--halo-color: rgba(0, 192, 255,  1);
	--back-color: rgba(0, 192, 255, .8);
	--half-color: rgba(0, 192, 255, .4);
	--anim-durat: 2.1s;
}
.lightrope I:nth-of-type(4n+2) {
	--halo-color: rgba(255, 158, 73,  1);
	--back-color: rgba(255, 158, 73, .8);
	--half-color: rgba(255, 158, 73, .4);
	--anim-durat: 1.9s;
}
.lightrope I:nth-of-type(odd) {
	--anim-durat: 2.2s;
	rotate: 10deg;
}
.lightrope I:nth-of-type(3n+1) {
	--anim-durat: 1.8s;
	rotate: -10deg;
}
.lightrope I:last-of-type {
	display: none;
}
.lightrope I::after,
.lightrope I::before {
	content: '';
	position: absolute;
}
.lightrope I::after {
	top: -4px;
	left: 1px;
	width: 10px;
	height: 10px;
	border-radius: 4px 4px 0 0;
	background: #555;
	box-shadow: inset 0 0 0 1px #777;
}
.lightrope I::before {
	inset: 0;
	border-radius: 100%;
	background: var(--half-color);
	box-shadow: 0px 4px 32px 4px var(--halo-color), inset 0 1px 3px 1px var(--halo-color);
	animation-name: flash;
	animation-duration: var(--anim-durat);
	animation-fill-mode: both;
	animation-timing-function: ease-out;
	animation-iteration-count: infinite;
}

@keyframes flash {
	0%, 100% {
		background: var(--half-color);
		box-shadow: 0px 4px 32px 4px var(--halo-color), inset 0 1px 3px 1px var(--halo-color);
	}
	66% {
		background: var(--back-color);
		box-shadow: 0px 4px 16px -1px var(--half-color), inset 0 1px 3px 1px var(--back-color);
	}
}

@keyframes back {
	0%, 100% {
		background: #fff;
		box-shadow: 0px 4px 24px 4px rgba(255, 255, 255, 1);
	}
	66% {
		background: #333;
		box-shadow: 0px 4px 24px 4px rgba(255, 255, 255, 0);
	}
}