.animation {
	--size: 500px;
	position: absolute;
	top: 20vh;
	font-size: calc(var(--size)/100);
	width: var(--size);
	height: var(--size);
	isolation: isolate;
	opacity:0;
	transition: opacity 2.4s;
	pointer-events: none;
}
.animation .earth {
	position: absolute;
	top: -15%;
	left:-15%;
	width: 130%;
	height:130%;
}
.halo, .edge {
	width: 100em;
	height: 100em;
	position: absolute;
	left: 0;
	top: 0;
	transform: rotate(-52deg);
	border-radius: 50%;
	box-shadow: #1e85db52 -0.8em 0 5.8em -1.5em inset;
	pointer-events: all;
}
.halo {
	font-size: 106%;
	margin: -3em;
	box-shadow: #2172ffe0 -2.2em 0 3.1em -0.5em inset, #001426d9 -2.9em 0 3.8em -0.9em inset, #0084ff30 -59em 0 18em -41em inset;
	mix-blend-mode: color-dodge;
	color: #5291ff9e;
	filter: drop-shadow(0.4em 0 4.6em) blur(0.25em);
	touch-action: none;
}
.halo::before, .halo::after{
	content: '';
	display: block;
	height: 100%;
	border-radius: 50%;
	box-shadow: #309bff -1.3em 0 0.9em -0.8em inset;
	mix-blend-mode: color-dodge;
}
.halo::after{
	margin-top: -100%;
}
@media (max-width: 1024px) {
	.animation{
		--size: 250px;
		top: 15vh;
	}
	.hero-items {
		padding-top: 260px;
	}
}