/* Revolution Orbit – COMMAR */

.rho {
	/* layout – overschreven per breakpoint door de weergave-instelling */
	--rho-pos: absolute;
	--rho-display: block;
	--rho-h: var(--rho-canvas-h, 900px);
	--rho-nw: var(--rho-node-w, 230px);
	--rho-tx: -50%;
	--rho-ty: -50%;
	--rho-links: block;
	--rho-spine: none;
	--rho-center-mb: 0px;
	--rho-mirror-dir: row-reverse;
	--rho-mirror-align: right;

	/* baan */
	--rho-canvas-h: 900px;
	--rho-rx: 62%;
	--rho-ry: 62%;
	--rho-node-w: 230px;
	--rho-gap: 18px;
	--rho-featured-scale: 1.28;

	/* kaart */
	--rho-card-bg: #ffffff;
	--rho-card-border: rgba(26, 26, 26, 0.1);
	--rho-card-radius: 18px;
	--rho-title-color: #1a1a1a;
	--rho-text-color: rgba(26, 26, 26, 0.66);

	/* uitgelicht */
	--rho-featured-bg: #f5f3ef;
	--rho-featured-border: rgba(166, 138, 109, 0.45);
	--rho-featured-title: #8a6c4b;
	--rho-featured-icon-bg: rgba(166, 138, 109, 0.16);
	--rho-featured-icon: #8a6c4b;

	/* icoon */
	--rho-icon-box: 42px;
	--rho-icon-size: 18px;
	--rho-icon-color: #2f3e34;
	--rho-icon-bg: rgba(47, 62, 52, 0.08);
	--rho-icon-radius: 50%;

	/* lijnen */
	--rho-line: rgba(26, 26, 26, 0.18);
	--rho-line-active: #a68a6d;
	--rho-line-w: 1.5;
	--rho-ring: rgba(166, 138, 109, 0.35);
	--rho-ring-spin: 120s;

	/* centrum */
	--rho-center-size: 250px;
	--rho-center-bg: #ffffff;
	--rho-center-border: rgba(166, 138, 109, 0.3);
	--rho-center-glow: rgba(166, 138, 109, 0.22);
	--rho-center-title: #1a1a1a;
	--rho-center-sub: #a68a6d;
}

/* ---------------------------------------------------------------- canvas */

.rho-canvas {
	position: relative;
	display: var(--rho-display);
	flex-direction: column;
	align-items: stretch;
	gap: var(--rho-gap);
	height: var(--rho-h);
	width: 100%;
}

.rho-links {
	position: absolute;
	inset: 0;
	display: var(--rho-links);
	width: 100%;
	height: 100%;
	overflow: visible;
	pointer-events: none;
	z-index: 1;
}

.rho-line,
.rho-line-glow {
	fill: none;
	stroke-linecap: round;
}

.rho-line {
	stroke: var(--rho-line);
	stroke-width: var(--rho-line-w);
}

.rho-line-glow {
	stroke: var(--rho-line-active);
	stroke-width: calc(var(--rho-line-w) * 1.6);
	opacity: 0;
	transition: opacity 0.35s ease;
}

.rho-g.is-active .rho-line-glow {
	opacity: 1;
}

.rho-pulse {
	fill: var(--rho-line-active);
	opacity: 0;
}

.rho-g.is-active .rho-pulse {
	opacity: 1;
	animation: rho-travel 1.5s cubic-bezier(0.45, 0, 0.3, 1) infinite;
}

.rho-ring {
	fill: none;
	stroke: var(--rho-ring);
	stroke-width: 1;
	stroke-dasharray: 2 9;
	transform-box: fill-box;
	transform-origin: center;
	animation: rho-spin var(--rho-ring-spin) linear infinite;
}

/* ---------------------------------------------------------------- centrum */

.rho-center {
	position: var(--rho-pos);
	left: 50%;
	top: 50%;
	transform: translate(var(--rho-tx), var(--rho-ty));
	z-index: 3;
	flex: 0 0 auto;
	align-self: center;
	margin-bottom: var(--rho-center-mb);
	width: calc(var(--rho-center-size) * var(--rho-fit, 1));
	height: calc(var(--rho-center-size) * var(--rho-fit, 1));
	border-radius: 50%;
	background: var(--rho-center-bg);
	border: 1px solid var(--rho-center-border);
	box-shadow: 0 0 0 12px var(--rho-center-glow), 0 24px 60px -24px rgba(26, 26, 26, 0.35);
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
}

.rho-center-inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	padding: 12px;
	max-width: 82%;
}

.rho-center-title {
	color: var(--rho-center-title);
	font-size: 26px;
	font-weight: 500;
	letter-spacing: 1px;
	line-height: 1.1;
}

.rho-center-sub {
	color: var(--rho-center-sub);
	font-size: 10px;
	letter-spacing: 2.5px;
	text-transform: uppercase;
	line-height: 1.2;
}

.rho-center-media img {
	display: block;
	height: auto;
	max-width: 100%;
}

.rho-center-icon svg {
	width: 42px;
	height: 42px;
	fill: var(--rho-center-title);
}

.rho-center-icon i {
	font-size: 42px;
	color: var(--rho-center-title);
}

/* ------------------------------------------------------------------ nodes */

.rho-node {
	position: var(--rho-pos);
	left: calc(50% + var(--rho-rx) * var(--rho-cos, 0) * var(--rho-m, 1) / 2);
	top: calc(50% + var(--rho-ry) * var(--rho-sin, 0) * var(--rho-m, 1) / 2);
	width: calc(var(--rho-nw) * var(--rho-fit, 1));
	max-width: 100%;
	flex: 0 0 auto;
	transform: translate(var(--rho-tx), var(--rho-ty)) scale(var(--rho-scale, 1));
	transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.35s ease, filter 0.35s ease;
	z-index: 2;
}

.rho-node.is-featured {
	width: calc(var(--rho-nw) * var(--rho-featured-scale) * var(--rho-fit, 1));
	max-width: 100%;
	z-index: 4;
}

.rho-node:hover,
.rho-node:focus-within {
	--rho-scale: 1.04;
	z-index: 5;
}

.rho-node-inner {
	position: relative;
}

.rho-node-inner::before {
	content: "";
	display: var(--rho-spine);
	position: absolute;
	left: calc(18px + var(--rho-icon-box) / 2);
	top: calc(var(--rho-gap) * -1);
	width: 1px;
	height: var(--rho-gap);
	background: linear-gradient(to bottom, transparent, var(--rho-line));
}

.rho-node.is-first .rho-node-inner::before {
	display: none;
}

.rho-card {
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	gap: 12px;
	padding: 16px 18px;
	background: var(--rho-card-bg);
	border: 1px solid var(--rho-card-border);
	border-radius: var(--rho-card-radius);
	text-align: left;
	text-decoration: none;
	color: inherit;
	transition: border-color 0.35s ease, background-color 0.35s ease, box-shadow 0.35s ease;
}

a.rho-card:hover,
a.rho-card:focus-visible {
	border-color: var(--rho-line-active);
}

.rho-card:focus-visible {
	outline: 2px solid var(--rho-line-active);
	outline-offset: 3px;
}

.rho--mirror .rho-node.is-left .rho-card {
	flex-direction: var(--rho-mirror-dir);
	text-align: var(--rho-mirror-align);
}

.rho-icon {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--rho-icon-box);
	height: var(--rho-icon-box);
	border-radius: var(--rho-icon-radius);
	background: var(--rho-icon-bg);
	color: var(--rho-icon-color);
	transition: background-color 0.35s ease, color 0.35s ease;
}

.rho-icon i {
	font-size: var(--rho-icon-size);
	line-height: 1;
}

.rho-icon svg {
	width: var(--rho-icon-size);
	height: var(--rho-icon-size);
	fill: currentColor;
}

.rho-card-body {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}

.rho-card-title {
	color: var(--rho-title-color);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.3;
}

.rho-card-text {
	color: var(--rho-text-color);
	font-size: 13px;
	line-height: 1.5;
}

/* uitgelicht */

.rho-node.is-featured .rho-card {
	background: var(--rho-featured-bg);
	border-color: var(--rho-featured-border);
}

.rho-node.is-featured .rho-card-title {
	color: var(--rho-featured-title);
}

.rho-node.is-featured .rho-icon {
	background: var(--rho-featured-icon-bg);
	color: var(--rho-featured-icon);
}

/* meetmodus – layout meten zonder animatie-offsets */
.rho.is-measuring .rho-node-inner,
.rho.is-measuring .rho-card {
	animation: none !important;
	transition: none !important;
	transform: none !important;
	opacity: 1 !important;
}

/* --------------------------------------------------------------- beweging */

.rho--dim.is-hovering .rho-node:not(.is-active) {
	opacity: 0.42;
	filter: saturate(0.55);
}

.rho--float .rho-card {
	animation: rho-float 7s ease-in-out infinite;
	animation-delay: calc(var(--rho-i, 0) * -0.9s);
}

.rho--reveal.rho--js .rho-node-inner {
	opacity: 0;
	transform: translateY(18px);
}

.rho--reveal.rho--js.is-in .rho-node-inner {
	opacity: 1;
	transform: none;
	transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1);
	transition-delay: calc(var(--rho-i, 0) * 70ms);
}

.rho--reveal.rho--js .rho-center {
	opacity: 0;
	transform: translate(var(--rho-tx), var(--rho-ty)) scale(0.94);
}

.rho--reveal.rho--js.is-in .rho-center {
	opacity: 1;
	transform: translate(var(--rho-tx), var(--rho-ty)) scale(1);
	transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.rho-g.is-drawing .rho-line {
	stroke-dasharray: var(--rho-len);
	stroke-dashoffset: var(--rho-len);
	animation: rho-draw 1.1s cubic-bezier(0.3, 0.7, 0.2, 1) forwards;
	animation-delay: calc(var(--rho-i, 0) * 80ms);
}

.rho-g.is-fading .rho-line {
	opacity: 0;
	animation: rho-fade 0.9s ease forwards;
	animation-delay: calc(var(--rho-i, 0) * 80ms);
}

@keyframes rho-draw {
	to {
		stroke-dashoffset: 0;
	}
}

@keyframes rho-fade {
	to {
		opacity: 1;
	}
}

@keyframes rho-float {
	0%,
	100% {
		transform: translateY(0);
	}
	50% {
		transform: translateY(-6px);
	}
}

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

@keyframes rho-travel {
	0% {
		offset-distance: 0%;
		opacity: 0;
	}
	12% {
		opacity: 1;
	}
	88% {
		opacity: 1;
	}
	100% {
		offset-distance: 100%;
		opacity: 0;
	}
}

/* ----------------------------------------------------------- toegankelijk */

@media (prefers-reduced-motion: reduce) {
	.rho *,
	.rho *::before {
		animation: none !important;
		transition-duration: 0.01ms !important;
	}

	.rho--reveal .rho-node-inner,
	.rho--reveal.rho--js .rho-center {
		opacity: 1;
		transform: none;
	}

	.rho-g.is-drawing .rho-line {
		stroke-dasharray: none;
		stroke-dashoffset: 0;
	}
}