/*
 * Glowence Hero Ring.
 *
 * The circle is centred at the top of a fixed-height window, so only its upper
 * arc shows. Each card sits at the circle centre, turns to its angle and moves
 * out to the rim, which keeps it tangent to the ring.
 */

.elementor-widget-glowence-hero-ring {
	width: 100%;
}

.glowence-hero-ring {
	--glw-ring-size: 1571.75px;
	--glw-ring-card: 160px;
	--glw-ring-card-radius: 16px;
	--glw-ring-card-border-width: 0px;
	--glw-ring-card-border-color: var(--e-global-color-glw_warm_white, #fffcfb);
	--glw-ring-height: 704px;
	--glw-ring-offset: 0px;
	--glw-ring-duration: 40s;
	--glw-ring-direction: normal;

	position: relative;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	width: 100%;
	height: var(--glw-ring-height);
	overflow: hidden;
}

.glowence-hero-ring__circle {
	position: relative;
	flex: none;
	width: var(--glw-ring-size);
	height: var(--glw-ring-size);
	margin-top: var(--glw-ring-offset);
	border-radius: 50%;
}

.glowence-hero-ring.is-spinning .glowence-hero-ring__circle {
	animation: glowence-ring-spin var(--glw-ring-duration) linear infinite;
	animation-direction: var(--glw-ring-direction);
	will-change: transform;
}

.glowence-hero-ring.is-paused .glowence-hero-ring__circle,
.glowence-hero-ring.is-hover-pause:hover .glowence-hero-ring__circle {
	animation-play-state: paused;
}

.glowence-hero-ring__card {
	position: absolute;
	top: 50%;
	left: 50%;
	width: var(--glw-ring-card);
	height: var(--glw-ring-card);
	margin: calc(var(--glw-ring-card) / -2) 0 0 calc(var(--glw-ring-card) / -2);
	overflow: hidden;
	border: var(--glw-ring-card-border-width) solid var(--glw-ring-card-border-color);
	border-radius: var(--glw-ring-card-radius);
	transform: rotate(var(--glw-angle, 0deg)) translateY(calc((var(--glw-ring-size) - var(--glw-ring-card)) / -2));
}

.glowence-hero-ring__card img {
	display: block;
	width: 100%;
	max-width: 100%;
	height: 100%;
	object-fit: cover;
}

@keyframes glowence-ring-spin {
	to {
		transform: rotate(360deg);
	}
}

@media (max-width: 479px) {
	.glowence-hero-ring {
		--glw-ring-height: 560px;
		--glw-ring-card-radius: 12px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.glowence-hero-ring.is-spinning .glowence-hero-ring__circle {
		animation: none;
	}
}