/**
 * IMAGE ORBIT
 *
 * Genera dos órbitas circulares animadas alrededor de una imagen de Elementor, incorporando un punto exterior independiente con efecto luminoso mediante box-shadow, rotaciones a distintas velocidades, flotación suave de las órbitas y la imagen central, y adaptación responsive mediante variables CSS.
 */

.unikal-image-orbit {
	--orbit-size: 100%;
	--orbit-inner-size: 95%;
	--orbit-color: var(--ca-secondary);

	--orbit-duration: 12s;
	--orbit-inner-duration: 20s;

	--orbit-dot-size: 10px;
	--orbit-inner-dot-size: 15px;

	--orbit-float-distance: 12px;
	--orbit-float-duration: 5s;

	--orbit-image-float-distance: 5px;
	--orbit-image-float-duration: 6s;

	position: relative;
	width: 100%;
	aspect-ratio: 1;

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

	isolation: isolate;
	overflow: visible !important;
}

/* ------------------------------------------- IMAGEN CENTRAL */

.unikal-image-orbit .elementor-widget-image {
	position: relative;
	z-index: 2;

	width: 100%;

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

.unikal-image-orbit .elementor-widget-image .elementor-widget-container {
	width: 100%;

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

.unikal-image-orbit img {
	display: block;

	width: 85%;
	height: auto;
	aspect-ratio: 1;
	object-fit: contain;

	margin-inline: auto;

	animation: unikal-orbit-image-float var(--orbit-image-float-duration)
		ease-in-out infinite;
}

/* ------------------------------------------- ANILLO EXTERIOR */

.unikal-image-orbit .elementor-widget-image::before {
	content: '';

	position: absolute;
	top: 50%;
	left: 50%;

	width: var(--orbit-size);
	aspect-ratio: 1;

	border-radius: 50%;
	box-sizing: border-box;

	outline: 1px solid var(--ca-secondary-40);
	outline-offset: calc(var(--orbit-dot-size) / -2);

	pointer-events: none;
	z-index: -1;

	transform: translate(-50%, -50%);

	animation: unikal-orbit-float var(--orbit-float-duration) ease-in-out infinite;
}

/* ------------------------------------------- PUNTO EXTERIOR */

.unikal-image-orbit::before {
	content: '';

	position: absolute;
	top: 0;
	left: 0;

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

	border-radius: 50%;

	background: var(--ca-secondary);

	box-shadow: 0px 0px 41px 0px rgba(53, 213, 223, 0.33);

	pointer-events: none;
	z-index: 3;

	/* Recorrido circular alrededor del centro */
	offset-path: circle(42.5% at 50% 50%);
	offset-rotate: 0deg;

	animation:
		unikal-orbit-dot-travel var(--orbit-duration) linear infinite,
		unikal-orbit-float var(--orbit-float-duration) ease-in-out infinite;
}

/* ------------------------------------------- ANILLO INTERIOR */

.unikal-image-orbit::after {
	content: '';

	position: absolute;
	top: 50%;
	left: 50%;

	width: var(--orbit-inner-size);
	aspect-ratio: 1;

	border-radius: 50%;
	box-sizing: border-box;

	outline: 1px solid var(--ca-secondary-40);
	outline-offset: calc(var(--orbit-inner-dot-size) / -2);

	background-image: radial-gradient(
		circle,
		var(--orbit-color) 0 49%,
		transparent 50%
	);

	background-size: var(--orbit-inner-dot-size) var(--orbit-inner-dot-size);

	background-position: center top;
	background-repeat: no-repeat;

	pointer-events: none;
	z-index: 1;

	animation:
		unikal-orbit-rotate var(--orbit-inner-duration) linear infinite,
		unikal-orbit-float var(--orbit-float-duration) ease-in-out infinite;
}

/* ------------------------------------------- ANIMACIONES */

/* Recorrido circular del punto exterior */
@keyframes unikal-orbit-dot-travel {
	from {
		offset-distance: 0%;
	}

	to {
		offset-distance: 100%;
	}
}

/* Rotación de la órbita interior */
@keyframes unikal-orbit-rotate {
	from {
		transform: translate(-50%, -50%) rotate(0deg);
	}

	to {
		transform: translate(-50%, -50%) rotate(360deg);
	}
}

/* Flotación de las órbitas */
@keyframes unikal-orbit-float {
	0%,
	100% {
		translate: 0 0;
	}

	50% {
		translate: 0 calc(var(--orbit-float-distance) * -1);
	}
}

/* Flotación de la imagen central */
@keyframes unikal-orbit-image-float {
	0%,
	100% {
		transform: translateY(0);
	}

	50% {
		transform: translateY(calc(var(--orbit-image-float-distance) * -1));
	}
}

/* ------------------------------------------- RESPONSIVE */

@media (max-width: 767px) {
	.unikal-image-orbit {
		--orbit-duration: 16s;
		overflow: clip !important;
	}
}

/* ------------------------------------------- ACCESIBILIDAD */

@media (prefers-reduced-motion: reduce) {
	.unikal-image-orbit::before,
	.unikal-image-orbit::after,
	.unikal-image-orbit .elementor-widget-image::before,
	.unikal-image-orbit img {
		animation: none;
	}

	.unikal-image-orbit::after,
	.unikal-image-orbit .elementor-widget-image::before {
		transform: translate(-50%, -50%);
	}

	.unikal-image-orbit::before {
		offset-distance: 0%;
	}
}