.bg-3d {
	position: fixed;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	overflow: hidden;
	perspective: 900px;
}
.orb {
	position: absolute;
	border-radius: 50%;
	filter: blur(4px);
	opacity: .35;
	animation: drift 16s ease-in-out infinite alternate;
}
.orb.one {
	width: 260px;
	height: 260px;
	left: -60px;
	top: 120px;
	background: radial-gradient(circle at 30% 30%, #59c2ff, #325bff 68%);
}
.orb.two {
	width: 320px;
	height: 320px;
	right: -70px;
	top: 260px;
	background: radial-gradient(circle at 70% 30%, #7bf2ff, #4d77ff 70%);
	animation-duration: 20s;
}
.orb.three {
	width: 220px;
	height: 220px;
	left: 48%;
	bottom: 40px;
	background: radial-gradient(circle at 50% 50%, #74d5ff, #254fd1 70%);
	animation-duration: 14s;
}
.cube {
	position: absolute;
	width: 90px;
	height: 90px;
	transform-style: preserve-3d;
	animation: spin3d 18s linear infinite;
}
.cube::before,
.cube::after {
	content: "";
	position: absolute;
	inset: 0;
	border: 1px solid rgba(125, 203, 255, .35);
	background: linear-gradient(150deg, rgba(91,140,255,.14), rgba(73,215,255,.06));
	box-shadow: inset 0 0 16px rgba(73,215,255,.25), 0 0 30px rgba(73,215,255,.15);
	border-radius: 8px;
}
.cube::before {
	transform: rotateY(90deg) translateZ(45px);
}
.cube::after {
	transform: rotateX(90deg) translateZ(45px);
}
.cube.one {
	left: 14%;
	top: 58%;
	transform: rotateX(24deg) rotateY(15deg);
}
.cube.two {
	right: 18%;
	top: 22%;
	width: 120px;
	height: 120px;
	animation-duration: 24s;
	transform: rotateX(42deg) rotateY(-22deg);
}
.grid-floor {
	position: absolute;
	left: -10%;
	right: -10%;
	bottom: -120px;
	height: 340px;
	background-image:
		linear-gradient(rgba(91,140,255,.15) 1px, transparent 1px),
		linear-gradient(90deg, rgba(91,140,255,.15) 1px, transparent 1px);
	background-size: 42px 42px;
	transform: rotateX(74deg);
	transform-origin: bottom;
	opacity: .32;
	animation: pulseGrid 6s ease-in-out infinite;
}

@keyframes spin3d {
	0% { transform: rotateX(10deg) rotateY(0deg) translateY(0); }
	50% { transform: rotateX(30deg) rotateY(180deg) translateY(-16px); }
	100% { transform: rotateX(10deg) rotateY(360deg) translateY(0); }
}
@keyframes drift {
	0% { transform: translate3d(0, 0, 0); }
	100% { transform: translate3d(36px, -26px, 0); }
}
@keyframes pulseGrid {
	0%,100% { opacity: .2; }
	50% { opacity: .42; }
}

@media (max-width: 700px) {
	.cube { display: none; }
}