/* AXONE SPHERE HERO */

.axone-sphere-luxe{

	--size:120px;

	display:flex;
	justify-content:center;
	align-items:center;

	position:relative;

	width:100%;

	margin:40px auto;

	animation:
		axl-float 6s ease-in-out infinite;
}

.axone-sphere-inner{

	position:relative;

	width:var(--size);
	height:var(--size);

	min-width:var(--size);
	min-height:var(--size);

	flex:0 0 var(--size);

	transform-style:preserve-3d;
	perspective:900px;

	filter:
		drop-shadow(0 0 8px rgba(212,113,26,.55))
		drop-shadow(0 0 18px rgba(0,240,255,.12))
		drop-shadow(0 0 24px rgba(212,113,26,.18));

	animation:
		axl-tiltX 10s ease-in-out infinite;
}

.axone-sphere-inner svg{

	display:block;

	width:100%;
	height:100%;
}

/* NORMALISATION SVG */

.axone-sphere-inner circle,
.axone-sphere-inner ellipse,
.axone-sphere-inner g{

	transform-box:fill-box;
	transform-origin:center;
}

.main-ring,
.vert-ring,
.hori-ring,
.front-orbit{

	transform-origin:24px 24px;
}

/* ANIMATIONS */

@keyframes axl-tiltX{

	0%{

		transform:
			rotateX(0deg)
			rotateZ(0deg);
	}

	50%{

		transform:
			rotateX(28deg)
			rotateZ(180deg);
	}

	100%{

		transform:
			rotateX(0deg)
			rotateZ(360deg);
	}
}

@keyframes axl-float{

	0%,100%{

		transform:
			translateY(0);
	}

	50%{

		transform:
			translateY(-4px);
	}
}

@keyframes axl-rotateMain{

	from{

		transform:
			rotate(0deg);
	}

	to{

		transform:
			rotate(360deg);
	}
}

@keyframes axl-rotateInverse{

	from{

		transform:
			rotate(360deg);
	}

	to{

		transform:
			rotate(0deg);
	}
}

/* ORBITE FRONTALE */

.front-orbit{

	animation:
		axl-rotateMain 14s linear infinite;
}

/* ELLIPSE VERTICALE */

.axone-sphere-inner ellipse.vert-ring{

	transform:
		rotateX(65deg);

	animation:
		axl-rotateInverse 11s linear infinite;
}

/* ELLIPSE HORIZONTALE */

.axone-sphere-inner ellipse.hori-ring{

	transform:
		rotateY(65deg);

	animation:
		axl-rotateMain 7s linear infinite;
}

/* PARTICULE */

.axone-sphere-inner .orbital-ball{

	filter:
		drop-shadow(0 0 5px rgba(255,220,180,.30))
		drop-shadow(0 0 10px rgba(0,240,255,.20));
}

/* REFLET OR */

.axone-sphere-luxe::after{

	content:"";

	position:absolute;

	width:var(--size);
	height:var(--size);

	border-radius:50%;

	background:

		radial-gradient(
			circle at 32% 28%,
			rgba(255,215,120,.30),
			rgba(255,180,70,.12) 22%,
			transparent 62%
		),

		radial-gradient(
			circle at 68% 72%,
			rgba(0,240,255,.0),
			rgba(0,240,255,.0) 42%,
			transparent 60%
		);

	mix-blend-mode:screen;

	pointer-events:none;

	animation:
		axl-gloss 5s ease-in-out infinite;
}

/* MICRO REFLET CYAN */

.axone-sphere-luxe::before{

	content:"";

	position:absolute;

	width:calc(var(--size) * .22);
	height:calc(var(--size) * .22);

	border-radius:50%;

	top:22%;
	left:66%;

	background:
		radial-gradient(
			circle,
			rgba(0,240,255,.55),
			rgba(0,240,255,.14) 40%,
			transparent 75%
		);

	filter:
		blur(4px);

	opacity:.08;

	mix-blend-mode:screen;

	pointer-events:none;

	animation:
		axl-cyanFlash 7.5s ease-in-out infinite;
}

@keyframes axl-gloss{

	0%,100%{

		opacity:.35;
	}

	50%{

		opacity:.72;
	}
}

@keyframes axl-cyanFlash{

	0%,100%{

		opacity:.04;

		transform:
			scale(.8);
	}

	12%{

		opacity:.08;
	}

	18%{

		opacity:.45;

		transform:
			scale(1.18);
	}

	22%{

		opacity:.10;
	}

	48%{

		opacity:.05;
	}

	71%{

		opacity:.34;

		transform:
			scale(1.05);
	}

	78%{

		opacity:.06;
	}

	100%{

		opacity:.04;

		transform:
			scale(.8);
	}
}

/* ACCESSIBILITE */

@media (prefers-reduced-motion:reduce){

	.axone-sphere-luxe,
	.axone-sphere-inner,
	.front-orbit,
	.axone-sphere-inner ellipse.vert-ring,
	.axone-sphere-inner ellipse.hori-ring,
	.axone-sphere-luxe::before,
	.axone-sphere-luxe::after{

		animation:none;
	}
}

/* RESPONSIVE */

@media (max-width:768px){

	.axone-sphere-luxe{

		--size:105px;
	}
}