/*
 * Orbit Animation — parameterized stylesheet.
 * This file is loaded INSIDE each <orbitfx-orbit> shadow root (injected as a
 * <style> tag by orbitfx-orbit-element.js), so all selectors here are scoped
 * to that shadow root automatically — no manual namespacing needed beyond
 * the .orbitfx- prefix used for readability/consistency with the light-DOM
 * no-JS fallback, which reuses these same class names against this same
 * file (also enqueued normally so the fallback renders correctly).
 *
 * Defaults for every custom property match the original Avetis hero graphic
 * (200px/90s inner, 325px/120s outer, 700px container @ 0.85 scale, #d4a5a5 accent).
 */

:host {
	--orbitfx-container-size: 700px;
	--orbitfx-scale: 0.85;
	--orbitfx-accent: #d4a5a5;
	--orbitfx-accent-rgb: 212, 165, 165;
	--orbitfx-accent-glow-rgba: rgba(212, 165, 165, 0.5);
	--orbitfx-accent-line-rgba: rgba(212, 165, 165, 0.4);
	--orbitfx-accent-shadow-rgba: rgba(212, 165, 165, 0.4);

	display: block;
	font-family: 'Outfit', sans-serif;
}

.orbitfx-container {
	position: relative;
	width: var(--orbitfx-container-size);
	height: var(--orbitfx-container-size);
	display: flex;
	justify-content: center;
	align-items: center;
	transform: scale(var(--orbitfx-scale)) translateZ(0);
}

.orbitfx-glow-background {
	position: absolute;
	width: calc(var(--orbitfx-container-size) * 0.714);
	height: calc(var(--orbitfx-container-size) * 0.714);
	background: radial-gradient(circle, var(--orbitfx-accent-glow-rgba) 0%, rgba(255, 255, 255, 0) 70%);
	border-radius: 50%;
	z-index: 0;
	animation: orbitfx-pulse-glow 5s ease-in-out infinite alternate;
}

/* Center Logo */
.orbitfx-center-logo-container {
	width: 140px;
	height: 140px;
	background: #f4f4f4;
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 20;
	box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.05);

	opacity: 0;
	animation: orbitfx-fade-scale-in 1s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
	animation-delay: 0.1s;
}

.orbitfx-center-logo-inner {
	width: 90px;
	height: 90px;
	background: white;
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
	overflow: hidden;
}

.orbitfx-center-logo-inner img {
	max-width: 70%;
	max-height: 70%;
	object-fit: contain;
}

/*
 * Orbits — ring/item-wrap/line rules for each orbit instance (.orbitfx-ring-N,
 * .orbitfx-item-wrap-N, .orbitfx-line-N) are generated per-instance by
 * Orbitfx_Css_Builder::build() since the radius/speed/direction CSS
 * variables and the number of orbits both vary per widget instance and
 * can't be expressed as a fixed set of static selectors. This stylesheet
 * only carries the layout/visual rules shared by every orbit regardless
 * of index.
 */
.orbitfx-orbit-ring {
	position: absolute;
	border-radius: 50%;
	opacity: 0;
	transform: scale(0.6);
	will-change: transform;
}

/* Node wrappers */
.orbitfx-orbit-item {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 0;
	height: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	will-change: transform;
	z-index: 10;
}

.orbitfx-orbit-line {
	position: absolute;
	top: 50%;
	left: 50%;
	height: 2px;
	background: linear-gradient(90deg, rgba(var(--orbitfx-accent-rgb), 0) 0%, var(--orbitfx-accent-line-rgba) 100%);
	transform-origin: left center;
	transform: rotate(var(--angle)) scaleX(0);
	transition: transform 0.3s ease-out;
	pointer-events: none;
	z-index: 1;
}

.orbitfx-orbit-item:hover + .orbitfx-orbit-line {
	transform: rotate(var(--angle)) scaleX(1);
}

.orbitfx-inner-node-circle {
	width: 44px;
	height: 44px;
	background: #ffffff;
	border-radius: 50%;
	position: absolute;
	top: -6px;
	left: 0;
	transform: translate(-50%, -50%);
	box-shadow: 0 5px 15px var(--orbitfx-accent-shadow-rgba);
	z-index: 2;
	backface-visibility: hidden;
	transition: transform 0.3s;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

.orbitfx-inner-node-circle img {
	width: 60%;
	height: 60%;
	object-fit: contain;
}

.orbitfx-orbit-item:hover .orbitfx-inner-node-circle {
	transform: translate(-50%, -50%) scale(1.1);
}

.orbitfx-label-pill {
	background: white;
	padding: 8px 18px;
	border-radius: 30px;
	font-size: 0.95rem;
	font-weight: 600;
	color: #2D2D2D;
	box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
	white-space: nowrap;
	margin-top: 55px;
	transform: translateZ(0);
}

/* Outer-style (large circle+halo) nodes */
.orbitfx-big-circle-container {
	position: absolute;
	top: 0;
	left: 0;
	width: 0;
	height: 0;
}

.orbitfx-circle-halo {
	width: 90px;
	height: 90px;
	background-color: #f2f2f2;
	border-radius: 50%;
	position: absolute;
	top: -15px;
	left: 0;
	transform: translate(-50%, -50%);
	box-shadow: 0 5px 20px rgba(0, 0, 0, 0.03);
	z-index: 1;
	backface-visibility: hidden;
}

.orbitfx-circle-pink {
	width: 58px;
	height: 58px;
	background-color: var(--orbitfx-accent);
	border-radius: 50%;
	position: absolute;
	top: -15px;
	left: 0;
	transform: translate(-50%, -50%);
	z-index: 2;
	box-shadow: 0 5px 15px var(--orbitfx-accent-shadow-rgba);
	transition: transform 0.3s ease;
	backface-visibility: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

.orbitfx-circle-pink img {
	width: 65%;
	height: 65%;
	object-fit: contain;
}

.orbitfx-orbit-item:hover .orbitfx-circle-pink {
	transform: translate(-50%, -50%) scale(1.1);
}

.orbitfx-outer-label {
	margin-top: 80px;
	background: white;
	padding: 8px 18px;
	border-radius: 30px;
	font-size: 1rem;
	font-weight: 600;
	color: #2D2D2D;
	box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
	white-space: nowrap;
	z-index: 3;
	transform: translateZ(0);
}

/* Small dot nodes */
.orbitfx-small-dot {
	width: 8px;
	height: 8px;
	background-color: var(--orbitfx-accent);
	border-radius: 50%;
	position: absolute;
	top: 0;
	left: 0;
	transform: translate(-50%, -50%);
	filter: brightness(0.8);
}

.orbitfx-small-dot::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 18px;
	height: 18px;
	border: 1px solid var(--orbitfx-accent);
	border-radius: 50%;
	opacity: 0.4;
}

/* No-JS fallback: shown only before the custom element upgrades */
.orbitfx-fallback {
	display: none;
}

:host(:not(:defined)) .orbitfx-fallback,
orbitfx-orbit:not(:defined) .orbitfx-fallback {
	display: block;
}

/* Keyframes */
@keyframes orbitfx-fade-scale-in {
	0% {
		opacity: 0;
		transform: scale(0.6);
	}
	100% {
		opacity: 1;
		transform: scale(1);
	}
}

@keyframes orbitfx-rotate-orbit {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(360deg);
	}
}

/*
 * Generalized counter-rotation keyframe. Reduces algebraically to the
 * original source keyframes:
 *   --orbitfx-dir-sign: -1 -> ends at rotate(...- 360deg) == original counterRotate (inner)
 *   --orbitfx-dir-sign:  1 -> ends at rotate(...+ 360deg) == original counterRotateReverse (outer)
 */
@keyframes orbitfx-counter-rotate {
	0% {
		transform: rotate(var(--angle)) translate(var(--orbitfx-radius)) rotate(calc(-1 * var(--angle)));
	}
	100% {
		transform: rotate(var(--angle)) translate(var(--orbitfx-radius)) rotate(calc(-1 * var(--angle) + (var(--orbitfx-dir-sign) * 360deg)));
	}
}

@keyframes orbitfx-pulse-glow {
	0% {
		opacity: 0.4;
		transform: scale(1);
	}
	100% {
		opacity: 0.7;
		transform: scale(1.05);
	}
}

@media (max-width: 1300px) {
	.orbitfx-container {
		transform: scale(calc(var(--orbitfx-scale) * 0.82)) translateZ(0);
	}
}