/* ============================================ */
/* HERO 3D ELEMENTS - SYSTÈME OPTIMISÉ         */
/* Multiples formes sans perte de performance  */
/* ============================================ */

/* ============================= */
/* CONTAINER PRINCIPAL            */
/* ============================= */

.hero-3d-element {
	width: 500px;
	height: 500px;
	margin: 0 auto;
	position: relative;
	perspective: 1000px;
	transform-style: preserve-3d;
}

/* ============================= */
/* SYSTÈME D'ORBITES MULTIPLES   */
/* ============================= */

/* Orbite principale - Plus grande */
.orbit {
	position: absolute;
	inset: 0;
	border-radius: 50%;
	animation: spin-clockwise 30s linear infinite;
	transform-style: preserve-3d;
}

/* Orbite secondaire - Moyenne */
.orbit-secondary {
	position: absolute;
	inset: 60px;
	border-radius: 50%;
	animation: spin-counter 25s linear infinite;
	transform-style: preserve-3d;
}

/* Orbite tertiaire - Petite */
.orbit-tertiary {
	position: absolute;
	inset: 120px;
	border-radius: 50%;
	animation: spin-clockwise 20s linear infinite;
	transform-style: preserve-3d;
}

/* ============================= */
/* FORMES 3D VARIÉES             */
/* ============================= */

/* Cubes - Orbite principale */
.orbit-item.cube {
	width: 60px;
	height: 60px;
	background: linear-gradient(135deg, #7da8f5, #c4b5fd);
	border-radius: 8px;
	box-shadow: 
		0 0 20px rgba(125, 168, 245, 0.4),
		inset 0 1px 0 rgba(255, 255, 255, 0.2);
	animation: float-rotate 6s ease-in-out infinite;
	transform-style: preserve-3d;
}

/* Sphères - Orbite secondaire */
.orbit-item.sphere {
	width: 40px;
	height: 40px;
	background: radial-gradient(circle at 30% 30%, #86efac, #6ee7b7);
	border-radius: 50%;
	box-shadow: 
		0 0 15px rgba(134, 239, 172, 0.4),
		inset -5px -5px 10px rgba(0, 0, 0, 0.3),
		inset 5px 5px 10px rgba(255, 255, 255, 0.3);
	animation: float-bounce 4s ease-in-out infinite;
}

/* Triangles - Orbite tertiaire */
.orbit-item.triangle {
	width: 30px;
	height: 30px;
	background: linear-gradient(135deg, #fde047, #facc15);
	clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
	box-shadow: 0 0 12px rgba(253, 224, 71, 0.4);
	animation: float-spin 5s ease-in-out infinite;
}

/* Diamants - Flottants libres */
.orbit-item.diamond {
	width: 35px;
	height: 35px;
	background: linear-gradient(135deg, #7dd3fc, #0ea5e9);
	transform: rotate(45deg);
	border-radius: 4px;
	box-shadow: 0 0 18px rgba(125, 211, 252, 0.4);
	animation: float-pulse 7s ease-in-out infinite;
}

/* Hexagones - Éléments décoratifs */
.orbit-item.hexagon {
	width: 25px;
	height: 25px;
	background: linear-gradient(135deg, #ddd6fe, #c4b5fd);
	clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
	box-shadow: 0 0 10px rgba(221, 214, 254, 0.3);
	animation: float-wobble 8s ease-in-out infinite;
}

/* ============================= */
/* POSITIONNEMENT DES ÉLÉMENTS   */
/* ============================= */

/* Orbite principale - Cubes */
.orbit .orbit-item:nth-child(1) {
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	animation-delay: -0s;
}

.orbit .orbit-item:nth-child(2) {
	position: absolute;
	top: 50%;
	right: 0;
	transform: translateY(-50%);
	animation-delay: -1s;
}

.orbit .orbit-item:nth-child(3) {
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	animation-delay: -2s;
}

.orbit .orbit-item:nth-child(4) {
	position: absolute;
	top: 50%;
	left: 0;
	transform: translateY(-50%);
	animation-delay: -3s;
}

/* Orbite secondaire - Sphères */
.orbit-secondary .orbit-item:nth-child(1) {
	position: absolute;
	top: 20%;
	right: 20%;
	animation-delay: -0.5s;
}

.orbit-secondary .orbit-item:nth-child(2) {
	position: absolute;
	bottom: 20%;
	right: 20%;
	animation-delay: -1.5s;
}

.orbit-secondary .orbit-item:nth-child(3) {
	position: absolute;
	bottom: 20%;
	left: 20%;
	animation-delay: -2.5s;
}

.orbit-secondary .orbit-item:nth-child(4) {
	position: absolute;
	top: 20%;
	left: 20%;
	animation-delay: -3.5s;
}

/* Orbite tertiaire - Triangles */
.orbit-tertiary .orbit-item:nth-child(1) {
	position: absolute;
	top: 10%;
	left: 50%;
	transform: translateX(-50%);
	animation-delay: -0.3s;
}

.orbit-tertiary .orbit-item:nth-child(2) {
	position: absolute;
	bottom: 10%;
	left: 50%;
	transform: translateX(-50%);
	animation-delay: -1.3s;
}

.orbit-tertiary .orbit-item:nth-child(3) {
	position: absolute;
	top: 50%;
	right: 10%;
	transform: translateY(-50%);
	animation-delay: -2.3s;
}

.orbit-tertiary .orbit-item:nth-child(4) {
	position: absolute;
	top: 50%;
	left: 10%;
	transform: translateY(-50%);
	animation-delay: -3.3s;
}

/* ============================= */
/* ÉLÉMENTS FLOTTANTS LIBRES     */
/* ============================= */

.floating-elements {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

/* Diamants flottants */
.floating-diamond {
	position: absolute;
	animation: free-float 12s ease-in-out infinite;
}

.floating-diamond:nth-child(1) {
	top: 15%;
	left: 10%;
	animation-delay: -1s;
}

.floating-diamond:nth-child(2) {
	top: 70%;
	right: 15%;
	animation-delay: -4s;
}

.floating-diamond:nth-child(3) {
	top: 40%;
	left: 5%;
	animation-delay: -7s;
}

/* Hexagones décoratifs */
.floating-hexagon {
	position: absolute;
	animation: drift 15s ease-in-out infinite;
}

.floating-hexagon:nth-child(1) {
	top: 25%;
	right: 10%;
	animation-delay: -2s;
}

.floating-hexagon:nth-child(2) {
	bottom: 30%;
	left: 8%;
	animation-delay: -6s;
}

.floating-hexagon:nth-child(3) {
	top: 60%;
	right: 5%;
	animation-delay: -10s;
}

/* ============================= */
/* ANIMATIONS OPTIMISÉES         */
/* ============================= */

/* Rotation des orbites */
@keyframes spin-clockwise {
	from { transform: rotate(0deg); }
	to { transform: rotate(360deg); }
}

@keyframes spin-counter {
	from { transform: rotate(360deg); }
	to { transform: rotate(0deg); }
}

/* Animations des formes */
@keyframes float-rotate {
	0%, 100% { 
		transform: translateZ(0) rotateX(0deg) rotateY(0deg);
	}
	25% { 
		transform: translateZ(20px) rotateX(90deg) rotateY(90deg);
	}
	50% { 
		transform: translateZ(0) rotateX(180deg) rotateY(180deg);
	}
	75% { 
		transform: translateZ(-20px) rotateX(270deg) rotateY(270deg);
	}
}

@keyframes float-bounce {
	0%, 100% { 
		transform: translateY(0) scale(1);
	}
	50% { 
		transform: translateY(-15px) scale(1.1);
	}
}

@keyframes float-spin {
	0%, 100% { 
		transform: rotate(0deg) translateZ(0);
	}
	50% { 
		transform: rotate(180deg) translateZ(10px);
	}
}

@keyframes float-pulse {
	0%, 100% { 
		transform: rotate(45deg) scale(1);
		opacity: 0.8;
	}
	50% { 
		transform: rotate(225deg) scale(1.2);
		opacity: 1;
	}
}

@keyframes float-wobble {
	0%, 100% { 
		transform: rotate(0deg) translateX(0);
	}
	25% { 
		transform: rotate(5deg) translateX(2px);
	}
	75% { 
		transform: rotate(-5deg) translateX(-2px);
	}
}

/* Animations flottants libres */
@keyframes free-float {
	0%, 100% { 
		transform: rotate(45deg) translate(0, 0) scale(1);
	}
	25% { 
		transform: rotate(135deg) translate(10px, -10px) scale(1.1);
	}
	50% { 
		transform: rotate(225deg) translate(0, -20px) scale(0.9);
	}
	75% { 
		transform: rotate(315deg) translate(-10px, -10px) scale(1.05);
	}
}

@keyframes drift {
	0%, 100% { 
		transform: translate(0, 0) rotate(0deg);
	}
	25% { 
		transform: translate(8px, -5px) rotate(90deg);
	}
	50% { 
		transform: translate(-5px, -10px) rotate(180deg);
	}
	75% { 
		transform: translate(-8px, 5px) rotate(270deg);
	}
}

/* ============================= */
/* RESPONSIVE & PERFORMANCE       */
/* ============================= */

/* Réduction sur tablettes */
@media (max-width: 1024px) {
	.hero-3d-element {
		width: 400px;
		height: 400px;
	}
	
	.orbit-item.cube { width: 50px; height: 50px; }
	.orbit-item.sphere { width: 35px; height: 35px; }
	.orbit-item.triangle { width: 25px; height: 25px; }
}

/* Simplification mobile */
@media (max-width: 768px) {
	.hero-3d-element {
		width: 300px;
		height: 300px;
	}
	
	/* Cache les éléments les moins importants */
	.orbit-tertiary,
	.floating-elements .floating-hexagon {
		display: none;
	}
	
	/* Réduit les animations */
	.orbit { animation-duration: 40s; }
	.orbit-secondary { animation-duration: 35s; }
}

/* Mobile très petit - Minimal */
@media (max-width: 480px) {
	.hero-3d-element {
		width: 250px;
		height: 250px;
	}
	
	/* Garde seulement l'essentiel */
	.floating-elements {
		display: none;
	}
	
	.orbit-item.cube { width: 40px; height: 40px; }
	.orbit-item.sphere { width: 30px; height: 30px; }
}

/* ============================= */
/* OPTIMISATION PERFORMANCE      */
/* ============================= */

/* GPU Acceleration pour toutes les animations */
.hero-3d-element,
.orbit,
.orbit-secondary,
.orbit-tertiary,
.orbit-item,
.floating-diamond,
.floating-hexagon {
	will-change: transform;
	backface-visibility: hidden;
	-webkit-transform-style: preserve-3d;
	transform-style: preserve-3d;
}

/* Réduction motion si préférence utilisateur */
@media (prefers-reduced-motion: reduce) {
	.orbit,
	.orbit-secondary, 
	.orbit-tertiary {
		animation-duration: 120s;
	}
	
	.orbit-item,
	.floating-diamond,
	.floating-hexagon {
		animation: none;
	}
}

/* Cache sur connexion lente */
@media (prefers-reduced-data: reduce) {
	.orbit-tertiary,
	.floating-elements {
		display: none;
	}
}