.lightrope {
	position: absolute;
	inset: 100% 1em auto;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	margin-top: 4px;
	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(-44%);
}
.lightrope B:first-child {
	transform-origin: right bottom;
	transform: translateY(-44%) rotate(18deg);
}
.lightrope B.last,
.lightrope B:last-of-type {
	transform-origin: left bottom;
	transform: translateY(-44%) rotate(-18deg);
}
.lightrope B.last ~ * {
	display: none;
}

.lightrope I {
	--halo-color: rgba(100, 250, 150, .6);
	--back-color: rgba(0, 200, 50, .8);
	--half-color: rgba(0, 200, 50, .5);
	--anim-durat: 2s;
	position: relative;
	top: -2px;
	width: 20px;
	height: 20px;
	flex-shrink: 0;
	filter: drop-shadow( 0px 0px 12px var(--halo-color) );
	animation-name: drop;
	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(255, 100, 100, .6);
	--back-color: rgba(255, 0, 0, .8);
	--half-color: rgba(255, 0, 0, .5);
	--anim-durat: 2.1s;
}
.lightrope I:nth-of-type(4n+2) {
	--halo-color: rgba(50, 220, 255, .6);
	--back-color: rgba(0, 170, 255, .8);
	--half-color: rgba(0, 170, 255, .5);
	--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;
	inset: 0;
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M 11.03 22.33 C 11.77 23.25 12.38 23.18 12.99 22.33 L 21.14 13.22 C 23.63 10.43 23.63 5.88 21.14 3.09 C 18.62 0.3 14.58 0.3 12 3 L 12 3 C 9.44 0.3 5.37 0.3 2.88 3.09 C 0.38 5.88 0.38 10.43 2.88 13.22 L 11.03 22.33 Z'/%3E%3C/svg%3E");
	animation-duration: var(--anim-durat);
	animation-fill-mode: both;
	animation-timing-function: ease-out;
	animation-iteration-count: infinite;
}
.lightrope I::after {
	background: var(--back-color);
	animation-name: flash;
}
.lightrope I::before {
	background: #fff;
	animation-name: back;
}

@keyframes flash {
	0%, 100% {
		background: var(--back-color);
	}
	66% {
		background: var(--half-color);
	}
}

@keyframes back {
	0%, 100% {
		background: #fff;
	}
	66% {
		background: #777;
	}
}

@keyframes drop {
	0%, 100% {
		filter: drop-shadow( 0px 0px 12px var(--halo-color) );
	}
	66% {
		filter: drop-shadow( 0px 0px 0px var(--halo-color) );
	}
}