.aero-logo-final {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 10px 20px;
	perspective: 1000px;
}

.aero-sphere {
	position: relative;
	width: 280px;
	height: 280px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.15);
	backdrop-filter: blur(5px) saturate(200%);
	border: 2px solid rgba(255, 255, 255, 0.8);
	box-shadow:
		0 30px 60px rgba(0, 129, 255, 0.3),
		inset 0 0 30px rgba(255, 255, 255, 0.5),
		inset 0 40px 60px rgba(255, 255, 255, 0.8);
	display: flex;
	justify-content: center;
	align-items: center;
	overflow: hidden;
	transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
	cursor: pointer;
}

.sphere-gloss {
	position: absolute;
	top: -50%;
	left: -10%;
	width: 120%;
	height: 100%;
	background: linear-gradient(
		to bottom,
		rgba(255, 255, 255, 0.85) 0%,
		rgba(255, 255, 255, 0.2) 40%,
		transparent 70%
	);
	border-radius: 50%;
	z-index: 5;
	border-bottom: 2px solid rgba(255, 255, 255, 0.5);
}

.floating-container {
	position: absolute;
	width: 100%;
	height: 100%;
	z-index: 2;
}

.icon-aero {
	position: absolute;
	z-index: 3;
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	filter: brightness(1.2) drop-shadow(0 10px 15px rgba(0, 0, 0, 0.4));
	transition: all 0.5s ease;
	animation: float 4s ease-in-out infinite alternate;
}

.justice {
	font-size: 110px;
	top: 15%;
	left: 30%;
	background-image: linear-gradient(
		to bottom,
		#fff 0%,
		#ffd700 40%,
		#ff8c00 100%
	);
	animation-delay: 0s;
}
.tool-ruler {
	font-size: 65px;
	bottom: 10%;
	left: 30%;
	background-image: linear-gradient(
		to bottom,
		#fff 0%,
		#00ff88 40%,
		#00a152 100%
	);
	animation-delay: -1s;
}
.tool-pen {
	font-size: 65px;
	bottom: 18%;
	right: 15%;
	background-image: linear-gradient(
		to bottom,
		#fff 0%,
		#ff4b2b 40%,
		#ff416c 100%
	);
	animation-delay: -2s;
}
.tool-book {
	font-size: 65px;
	top: 40%;
	right: 70%;
	background-image: linear-gradient(
		to bottom,
		#fff 0%,
		#4facfe 40%,
		#00f2fe 100%
	);
	animation-delay: -3s;
}

@keyframes float {
	from {
		transform: translateY(0) rotate(0deg);
	}
	to {
		transform: translateY(-15px) rotate(5deg);
	}
}

.logo-text-wrapper {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.text-reflection {
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%) scaleY(-0.8) skewX(5deg);

	font-family: "Segoe UI", sans-serif;
	font-weight: 900;
	font-size: 72px;
	letter-spacing: -3px;
	margin-top: -35px;
	background: linear-gradient(to bottom, rgba(0, 114, 255, 0.3), transparent);
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	transform: scaleY(-0.8) skewX(5deg);
	opacity: 0.5;
	filter: blur(2px);
	user-select: none;
}

.aero-logo-final:hover .aero-sphere {
	transform: scale(1.05) rotateX(10deg);
	box-shadow: 0 40px 80px rgba(0, 129, 255, 0.5);
}

.aero-logo-final:hover .icon-aero {
	filter: brightness(1.4) drop-shadow(0 15px 25px rgba(0, 0, 0, 0.5));
}

.aero-logo-final:hover .dok-title {
	transform: translateZ(50px);
	transition: transform 0.3s ease;
	filter: brightness(1.2) drop-shadow(0 10px 20px rgba(0, 114, 255, 0.6));
}