.lightrope {
	position: absolute;
	inset: 100% 1ex auto;
	display: flex;
	padding: 16px 0 24px;
	margin-top: -12px;
	justify-content: center;
	overflow: hidden;
	pointer-events: none;
	z-index: -1;
}

.lightrope I {
	position: relative;
	width: 12px;
	height: 16px;
	border-radius: 50%;
	flex-shrink: 0;
	background: #fcbf0c;
	box-shadow: 0px 4px 24px 3px #fcbf0c;
	animation-name: flash-1;
	animation-duration: 2s;
	animation-fill-mode: both;
	animation-iteration-count: infinite;
}

.lightrope B { 
	flex: 1;
	min-width: 40px;
	border-bottom: solid #777 2px;
	border-radius: 50%;
	margin: 0 -1px;
	transform: translateY(-66%);
}

.lightrope B.last ~ * {
	display: none;
}

.lightrope B:first-child {
	transform-origin: right bottom;
	transform: translateY(-66%) rotate(16deg);
}

.lightrope B.last {
	transform-origin: left bottom;
	transform: translateY(-66%) rotate(-16deg);
}

.lightrope I:nth-of-type(2n+1) {
	background: #fcbf0c;
	box-shadow: 0px 4px 24px 3px #fcbf0c;
	-webkit-animation-name: flash-2;
	animation-name: flash-2;
	-webkit-animation-duration: 0.4s;
	animation-duration: 0.4s;
}

.lightrope I:nth-of-type(4n+2) {
	background: #dd0130;
	box-shadow: 0px 4px 24px 3px #dd0130;
	animation-name: flash-3;
	animation-duration: 1.1s;
}

.lightrope I:nth-of-type(odd) {
	animation-duration: 1.8s;
}

.lightrope I:nth-of-type(3n+1) {
	animation-duration: 1.4s;
}

.lightrope I::before {
	content: '';
	position: absolute;
	background: #555;
	width: 10px;
	height: 10px;
	border-radius: 4px 4px 0 0;
	top: -4px;
	left: 1px;
	box-shadow: inset 0 0 0 1px #777;
}

/* .lightrope I::after {
	content: '';
	position: absolute;
	top: -14px;
	left: 10px;
	width: 44px;
	height: 20px;
	border-bottom: solid #777 2px;
	border-radius: 50%;
} */

.lightrope I:last-child::after {
	content: none;
}

.lightrope I:first-child {
	/* margin-left: -6px; */
}

@keyframes flash-1 {
	0%, 100% {
		background: #fcbf0c;
		box-shadow: 0px 4px 24px 3px #fcbf0c;
	}
	50% {
		background: #dd0130;
		box-shadow: 0px 4px 24px 3px #dd0130;
	}
}

@keyframes flash-2 {
	0%, 100% {
		background: #fcbf0c;
		box-shadow: 0px 4px 24px 3px #fcbf0c;
	}
	50% {
		background: #fef549;
		box-shadow: 0px 4px 24px 3px #fef549;
	}
}

@keyframes flash-3 {
	0%, 100% {
		background: #f70094;
		box-shadow: 0px 4px 24px 3px #f70094;
	}
	50% {
		background: rgba(247, 0, 148, 0.4);
		box-shadow: 0px 4px 24px 3px rgba(247, 0, 148, 0.2);
	}
}