<div class="pl">
	<div class="pl__sphere"></div>
	<span class="pl__sphere-shadow"></span>
	<div class="pl__sphere"></div>
	<span class="pl__sphere-shadow"></span>
	<div class="pl__sphere"></div>
	<span class="pl__sphere-shadow"></span>
	<div class="pl__sphere"></div>
	<span class="pl__sphere-shadow"></span>
</div>

// Mixins
@mixin moveFilter($brightness,$blur)
	filter: brightness($brightness) blur($blur)
	-webkit-filter: brightness($brightness) blur($blur)
@mixin sphere($color)
	background: lighten($color,15%)
	box-shadow: 0 -0.75em 0.5em $color inset, 0 0 0.5em fade-out(lighten($color,10%),0.3)
// Normal styles
$sphereDiam: 2em
$spaceBetween: 1em
$sphereCount: 4
$xGridOffset: 0.5em
$animDur: 2s
*
	border: 0
	box-sizing: border-box
	margin: 0
	padding: 0
\:root
	font-size: calc(16px + (32 - 16) * (100vw - 320px) / (1280 - 320))
body
	font: 1em/1.5 sans-serif
	height: 100vh
.pl
	background: linear-gradient(rgb(4,23,73) calc(50% + 1.5em),rgb(6,39,121) calc(50% + 2.5em) calc(50% + 10.5em), rgb(4,23,73))
	position: relative
	overflow: hidden
	perspective: 800px
	transform-style: preserve-3d
	&, &:before
		width: 100%
		height: 100%
	&:before, &__sphere, &__sphere-shadow
		position: absolute
	&:before, &__sphere-shadow
		display: block
	&:before
		background: linear-gradient(rgb(6,39,121),rgba(6,39,121,0)), radial-gradient(100% 100% at 50% 50%,rgba(6,39,121,0) 37.5%,rgb(6,39,121) 50%), repeating-linear-gradient(0deg,rgba(8,55,170,0) 0 0.95em,rgb(8,55,170) 0.95em 1em), repeating-linear-gradient(90deg,rgba(8,55,170,0) 0 0.9em,rgb(8,55,170) 0.9em 1em) $xGridOffset 0
		content: ""
		top: 50%
		left: 50%
		transform: translate(-50%,-50%) rotateX(90deg) translateZ(-4em)
		width: 34em
		height: 34em
	&__sphere
		animation-name: moveSphere
		@include sphere(hsl(223,90%,55%))
		transform: translateZ(10em)
		&, &-shadow
			animation:
				duration: $animDur
				timing-function: ease-in-out
				iteration-count: infinite
			border-radius: 50%
			top: calc(50% - #{$sphereDiam / 2})
			left: calc(50% - #{$sphereDiam / 2})
			width: $sphereDiam
			height: $sphereDiam
			z-index: 1
		&-shadow
			animation-name: moveSphereShadow
			background-image: radial-gradient(100% 100% at center,rgba(0,0,0,0.2) 45%,rgba(0,0,0,0) 50%)
			transform: translateY(4em) translateZ(10em) rotateX(90deg)
		@for $s from 1 through $sphereCount
			&:nth-of-type(#{$s}), &-shadow:nth-of-type(#{$s})
				left: calc(50% - #{($sphereDiam + $spaceBetween) * (($sphereCount - ($s - 1)) - ($sphereCount / 2)) - ($spaceBetween / 2)})
				@if $s > 1
					animation-delay: ($animDur * 0.05) * ($s - 1)
// Animations
@keyframes moveSphere
	from, to
		@include moveFilter(100%,0)
		transform: translateZ(10em)
	25%, 75%
		@include moveFilter(100%,0)
		transform: translateZ(12em)
	50%
		@include moveFilter(80%,4px)
		transform: translateZ(-10em)
@keyframes moveSphereShadow
	from, to
		transform: translateY(4em) translateZ(10em) rotateX(90deg)
	25%, 75%
		transform: translateY(4em) translateZ(12em) rotateX(90deg)
	50%
		transform: translateY(4em) translateZ(-10em) rotateX(90deg)