/* /* Copyright (c) 2025 by Mickaël Lherminez (https://codepen.io/mickaellherminez/pen/vEBrvqW) */ */
/* Réglages de base */
body {
	margin: 0;
	min-height: 100vh;
	display: flex;
	justify-content: center;
	align-items: center;
	background: #0a0a2a;
	overflow: hidden;
	perspective: 1000px;
}

/* Fond de l'espace */
.space-background {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: radial-gradient(
			circle at 30% 30%,
			rgba(45, 85, 255, 0.15) 0%,
			transparent 60%
		),
		radial-gradient(
			circle at 70% 70%,
			rgba(255, 85, 85, 0.15) 0%,
			transparent 60%
		);
	overflow: hidden;
	animation: backgroundPulse 10s ease-in-out infinite;
	mix-blend-mode: screen;
}

/* Nébuleuse (effet flou) */
.nebula {
	position: absolute;
	width: 100%;
	height: 100%;
	background: radial-gradient(
			circle at 20% 20%,
			rgba(255, 0, 255, 0.1) 0%,
			transparent 40%
		),
		radial-gradient(circle at 80% 80%, rgba(0, 255, 255, 0.1) 0%, transparent 40%),
		radial-gradient(
			circle at 50% 50%,
			rgba(255, 255, 0, 0.05) 0%,
			transparent 60%
		);
	filter: blur(30px);
	animation: nebulaMove 20s ease-in-out infinite;
}

/* Conteneur principal de l'animation */
.spinner-container {
	position: relative;
	width: min(600px, 90vw);
	height: min(600px, 90vw);
	z-index: 1;
	transform-style: preserve-3d;
	animation: containerFloat 8s ease-in-out infinite;
	filter: drop-shadow(0 0 20px rgba(102, 102, 255, 0.2));
}

/* Effet "portail" */
.portal-effect {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 100%;
	height: 100%;
	border-radius: 50%;
	background: conic-gradient(
		from 0deg,
		transparent 0%,
		rgba(102, 204, 255, 0.1) 25%,
		rgba(102, 204, 255, 0.2) 50%,
		rgba(102, 204, 255, 0.1) 75%,
		transparent 100%
	);
	animation: portalSpin 10s linear infinite;
	pointer-events: none;
}

/* Champ d'énergie au centre */
.energy-field {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 120%;
	height: 120%;
	background: radial-gradient(
		circle,
		rgba(102, 204, 255, 0.1) 0%,
		transparent 70%
	);
	filter: blur(20px);
	animation: energyPulse 4s ease-in-out infinite;
}

/* Anneaux colorés */
.ring {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%) rotateX(45deg);
	border-radius: 50%;
	border: 2px solid transparent;
	pointer-events: none;
	transform-style: preserve-3d;
}

.ring::after {
	content: "";
	position: absolute;
	inset: -2px;
	border-radius: 50%;
	border: 2px solid;
	opacity: 0.7;
	animation: rotateRing linear infinite;
	box-shadow: 0 0 15px currentColor;
}

/* Différentes tailles et couleurs d'anneaux */
.ring-1 {
	width: min(120px, 20vw);
	height: min(120px, 20vw);
	border-color: #ff3366;
}
.ring-1::after {
	border-color: #ff3366;
	animation-duration: 6s;
}
.ring-2 {
	width: min(200px, 33vw);
	height: min(200px, 33vw);
	border-color: #00ffcc;
}
.ring-2::after {
	border-color: #00ffcc;
	animation-duration: 8s;
}
.ring-3 {
	width: min(280px, 46vw);
	height: min(280px, 46vw);
	border-color: #ffcc33;
}
.ring-3::after {
	border-color: #ffcc33;
	animation-duration: 10s;
}
.ring-4 {
	width: min(360px, 60vw);
	height: min(360px, 60vw);
	border-color: #ff66aa;
}
.ring-4::after {
	border-color: #ff66aa;
	animation-duration: 12s;
}
.ring-5 {
	width: min(440px, 73vw);
	height: min(440px, 73vw);
	border-color: #66ffff;
}
.ring-5::after {
	border-color: #66ffff;
	animation-duration: 14s;
}

/* Cercle central */
.center-circle {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 40px;
	height: 40px;
	background: radial-gradient(
		circle at 30% 30%,
		#ffffff 0%,
		#6666ff 40%,
		#3333cc 100%
	);
	border-radius: 50%;
	box-shadow: inset -3px -3px 8px rgba(0, 0, 0, 0.6),
		inset 3px 3px 8px rgba(255, 255, 255, 0.3), 0 0 25px rgba(255, 255, 255, 0.9),
		0 0 50px rgba(102, 102, 255, 0.5);
	animation: centerPulse 4s ease-in-out infinite;
}

.center-circle::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 200%;
	height: 200%;
	background: radial-gradient(
		circle,
		rgba(102, 102, 255, 0.3) 0%,
		transparent 70%
	);
	animation: centerGlow 2s ease-in-out infinite;
}

/* Étoiles */
.star {
	position: absolute;
	background: white;
	border-radius: 50%;
	animation: twinkle var(--duration) ease-in-out infinite;
	box-shadow: 0 0 3px rgba(255, 255, 255, 0.8);
}

/* Comètes */
.comet {
	position: absolute;
	width: 3px;
	height: 3px;
	background: white;
	border-radius: 50%;
	filter: blur(0.5px);
	animation: cometMove 2.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.comet::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 0;
	width: 40px;
	height: 2px;
	background: linear-gradient(to left, white, transparent);
	transform: translateY(-50%);
	filter: blur(0.5px);
}

/* Animations clés */

/* Nébuleuse */
@keyframes nebulaMove {
	0%,
	100% {
		transform: scale(1) rotate(0deg);
	}
	50% {
		transform: scale(1.2) rotate(180deg);
	}
}

/* Conteneur flottant */
@keyframes containerFloat {
	0%,
	100% {
		transform: translateY(0) rotateX(0);
	}
	50% {
		transform: translateY(-20px) rotateX(10deg);
	}
}

/* Pulsation du fond */
@keyframes backgroundPulse {
	0%,
	100% {
		opacity: 0.8;
	}
	50% {
		opacity: 1;
	}
}

/* Portail en rotation */
@keyframes portalSpin {
	from {
		transform: translate(-50%, -50%) rotate(0deg);
	}
	to {
		transform: translate(-50%, -50%) rotate(360deg);
	}
}

/* Énergie au centre */
@keyframes energyPulse {
	0%,
	100% {
		transform: translate(-50%, -50%) scale(1);
		opacity: 0.5;
	}
	50% {
		transform: translate(-50%, -50%) scale(1.2);
		opacity: 0.8;
	}
}

/* Anneaux en rotation */
@keyframes rotateRing {
	from {
		transform: rotate3d(1, 1, 1, 0deg);
	}
	to {
		transform: rotate3d(1, 1, 1, 360deg);
	}
}

/* Cercle central pulsing */
@keyframes centerPulse {
	0%,
	100% {
		transform: translate(-50%, -50%) scale(1);
		filter: brightness(1);
	}
	50% {
		transform: translate(-50%, -50%) scale(1);
		filter: brightness(1.3);
	}
}
@keyframes centerGlow {
	0%,
	100% {
		transform: translate(-50%, -50%) scale(1);
		opacity: 0.3;
	}
	50% {
		transform: translate(-50%, -50%) scale(1.5);
		opacity: 0.6;
	}
}

/* Étoiles scintillantes */
@keyframes twinkle {
	0%,
	100% {
		opacity: 0.3;
		transform: scale(1);
	}
	50% {
		opacity: 1;
		transform: scale(1.2);
		filter: blur(1px);
	}
}

/* Comète */
@keyframes cometMove {
	0% {
		opacity: 0;
		transform: translate(-100%, -100%) rotate(45deg) scale(0.5);
	}
	10% {
		opacity: 1;
	}
	90% {
		opacity: 1;
	}
	100% {
		opacity: 0;
		transform: translate(100vw, 100vh) rotate(45deg) scale(1.5);
	}
}

/* Média Queries */
@media (max-width: 900px) {
	body {
		padding: 1rem;
	}
	.spinner-container {
		width: min(500px, 85vw);
		height: min(500px, 85vw);
	}
}

@media (max-width: 600px) {
	body {
		padding: 0.5rem;
	}
	.spinner-container {
		width: min(400px, 90vw);
		height: min(400px, 90vw);
	}
}

@media (max-height: 800px) {
	.spinner-container {
		width: min(500px, 80vh);
		height: min(500px, 80vh);
	}
}

@media (max-height: 600px) {
	.spinner-container {
		width: min(400px, 85vh);
		height: min(400px, 85vh);
	}
}