/* SX-Plugin — FX sections ported from the old React PageBuilder. */

.sxs--special-text {
	display: flex;
	align-items: center;
	position: relative;
}

.sxs--special-text .sxs__inner { width: 100%; }

.sxfx-eyebrow { margin-bottom: 16px; }

.sxfx-text {
	margin: 0;
	letter-spacing: -0.02em;
	color: var(--sxs-ink-900);
}

/* Deliberately a single class (0,1,0): Elementor's Typography group writes to
   {{WRAPPER}} .sxfx-decode (0,2,0), so a Family picked there always wins and the
   monospace default only fills in when none is chosen. */
.sxfx-decode {
	display: inline-flex;
	font-family: var(--sxfx-family, inherit);
	/* pre keeps the leading spaces the first phase writes; without it the line
	   collapses and the text jumps as glyphs land. */
	white-space: pre;
}

.sxs--mono {
	--sxfx-family: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.sxfx-sub {
	margin: 16px 0 0;
	font-size: 17px;
	line-height: 1.6;
	color: var(--sxs-ink-600);
}

/* Read by assistive tech in place of the scrambling glyphs. */
.sxfx-sr {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

@media (max-width: 640px) {
	.sxfx-sub { font-size: 14px; }
}

/* ═══════════════════════════════════════════════════════ world map ═══ */

.sxmap {
	--sxmap-line: #0EA5E9;
	--sxmap-label: #111827;
	--sxmap-cycle: 6s;
	--sxmap-draw: 2s;

	position: relative;
	width: 100%;
	/* Matches the generated map exactly (198 x 100). Any other ratio would crop
	   or letterbox the base image and slide it out of register with the pins. */
	aspect-ratio: 198 / 100;
	overflow: hidden;
	/* The arc gradient picks this up through stop-color: currentColor. */
	color: var(--sxmap-line);
}

.sxs .sxmap__base {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: fill;
	pointer-events: none;
	user-select: none;
}

.sxmap--faded .sxmap__base {
	-webkit-mask-image: linear-gradient(to bottom, transparent, #000 10%, #000 90%, transparent);
	mask-image: linear-gradient(to bottom, transparent, #000 10%, #000 90%, transparent);
}

.sxmap__svg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	user-select: none;
}

.sxmap__svg circle { fill: var(--sxmap-line); }

/* Sized in map units, then unscaled so the label stays legible at any width. */
.sxmap__label {
	font-size: 3px;
	font-weight: 600;
	fill: var(--sxmap-label);
	paint-order: stroke;
	stroke: rgba(255, 255, 255, 0.75);
	stroke-width: 0.6px;
	stroke-linejoin: round;
}

/* Drawn state when looping is off: the arc simply stays on screen. */
.sxmap__path {
	stroke-dasharray: 1;
	stroke-dashoffset: 1;
	animation: sxmap-draw-once var(--sxmap-draw) ease-in-out forwards;
}

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

/* Looping: the keyframes themselves are emitted per widget, since their
   percentages depend on the route count and the chosen duration. */
.sxmap--loop .sxmap__path {
	animation-duration: var(--sxmap-cycle);
	animation-timing-function: ease-in-out;
	animation-iteration-count: infinite;
	animation-fill-mode: none;
}

.sxmap__travel {
	offset-rotate: 0deg;
	opacity: 0;
	animation-duration: var(--sxmap-cycle);
	animation-timing-function: ease-in-out;
	animation-iteration-count: infinite;
}

@media (prefers-reduced-motion: reduce) {
	.sxmap__path {
		stroke-dashoffset: 0;
		animation: none;
	}

	.sxmap__travel,
	.sxmap__svg animate { display: none; }
}

/* ═════════════════════════════════════════════════════ stack orbit ═══ */

.sxorb {
	--sxorb-h: 30rem;
	--sxorb-bg: #fff;
	--sxorb-border: rgba(15, 23, 42, 0.1);
	--sxorb-ring: rgba(15, 23, 42, 0.2);
	--sxorb-tile: #fff;
	--sxorb-center: #f8fafc;
	--sxorb-center-icon: #60a5fa;
	--sxorb-heading: #0a0a0a;
	--sxorb-body: #737373;

	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: var(--sxorb-h);
	padding-inline-start: 40px;
	overflow: hidden;
	background: var(--sxorb-bg);
	border: 1px solid var(--sxorb-border);
	border-radius: 24px;
}

.sxorb__text {
	position: relative;
	z-index: 10;
	width: 50%;
}

.sxorb__eyebrow { margin-bottom: 12px; color: var(--sxorb-body); }

.sxorb__h {
	margin: 0 0 16px;
	font-size: clamp(32px, 5vw, 60px);
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.05;
	color: var(--sxorb-heading);
}

.sxorb__b {
	margin: 0 0 24px;
	max-width: 32em;
	font-size: 16px;
	line-height: 1.6;
	color: var(--sxorb-body);
}

.sxorb__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }

.sxs .sxs-btn--ghost {
	background: transparent;
	color: var(--sxs-brand-700);
	border: 1px solid var(--sxs-hairline);
}

.sxs a.sxs-btn--ghost:hover { background: var(--sxs-brand-50); color: var(--sxs-brand-700); }

/* The field is deliberately wider than the panel and pushed right, so the
   outer rings run off the edge exactly as in the original. */
.sxorb__stage {
	position: relative;
	width: 50%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	overflow: hidden;
}

.sxorb__field {
	position: relative;
	width: 50rem;
	height: 50rem;
	transform: translateX(50%);
	display: flex;
	align-items: center;
	justify-content: center;
}

.sxorb__center {
	position: relative;
	z-index: 5;
	width: 6rem;
	height: 6rem;
	border-radius: 50%;
	background: var(--sxorb-center);
	box-shadow: 0 10px 30px -10px rgba(15, 23, 42, 0.25), 0 4px 8px -2px rgba(15, 23, 42, 0.08);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 3rem;
	color: var(--sxorb-center-icon);
}

.sxorb__center svg { width: 1em; height: 1em; fill: currentColor; }

.sxs .sxorb__center img {
	width: 3rem;
	height: 3rem;
	max-width: none;
	object-fit: contain;
}

.sxorb__ring {
	position: absolute;
	border-radius: 50%;
	border: 2px dotted var(--sxorb-ring);
	animation: sxorb-spin linear infinite;
	animation-duration: 12s;
}

.sxorb__ring--rev { animation-name: sxorb-spin-rev; }

@keyframes sxorb-spin {
	from { transform: rotate(0deg); }
	to   { transform: rotate(360deg); }
}

@keyframes sxorb-spin-rev {
	from { transform: rotate(360deg); }
	to   { transform: rotate(0deg); }
}

.sxorb__sat { position: absolute; transform: translate(-50%, -50%); }

.sxorb__tile {
	width: 40px;
	height: 40px;
	padding: 4px;
	border-radius: 50%;
	background: var(--sxorb-tile);
	box-shadow: 0 4px 10px -4px rgba(15, 23, 42, 0.15), 0 1px 2px rgba(15, 23, 42, 0.06);
	display: flex;
	align-items: center;
	justify-content: center;
}

.sxs .sxorb__tile img {
	width: 28px;
	height: 28px;
	max-width: none;
	object-fit: contain;
}

.sxorb__mono {
	font-family: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: #475569;
}

@media (max-width: 1024px) {
	.sxorb {
		flex-direction: column;
		height: auto;
		padding: 32px 24px;
	}

	.sxorb__text { width: 100%; text-align: center; }
	.sxorb__b { margin-inline: auto; }
	.sxorb__cta { justify-content: center; }
	.sxorb__stage { width: 100%; height: 28rem; justify-content: center; }
	.sxorb__field { transform: scale(0.55); }
}

@media (max-width: 640px) {
	.sxorb { padding: 24px 16px; }
	.sxorb__stage { height: 22rem; }
	.sxorb__field { transform: scale(0.4); }
}

@media (prefers-reduced-motion: reduce) {
	.sxorb__ring { animation: none; }
}

/* ═══════════════════════════════════════════════════════════ radar ═══ */

.sxrad {
	--sxrad-stage: 384px;
	--sxrad-sweep: 10s;
	--sxrad-scan: #0284c7;
	--sxrad-base: rgba(15, 23, 42, 0.18);
	--sxrad-tile: #fff;
	--sxrad-tile-border: rgba(15, 23, 42, 0.12);
	--sxrad-icon: #475569;
	--sxrad-label: #475569;
	--sxrad-chip: #fff;
	--sxrad-logo: 48px;
	--sxrad-logo-pad: 0px;
	--sxrad-logo-bg: transparent;

	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 16px;
	width: 100%;
	height: var(--sxrad-stage);
	overflow: hidden;
}

.sxrad__head {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 60;
	text-align: center;
	padding: 0 24px;
}

.sxrad__h {
	margin: 0;
	font-size: clamp(22px, 3vw, 32px);
	letter-spacing: -0.02em;
	color: var(--sxs-ink-900);
}

.sxrad__sub {
	margin: 8px 0 0;
	font-size: 14px;
	line-height: 1.5;
	color: var(--sxrad-label);
}

.sxrad__row {
	display: flex;
	width: 100%;
	max-width: 768px;
	margin-inline: auto;
	align-items: center;
	justify-content: space-between;
	gap: 32px;
}

.sxrad__row--narrow { max-width: 448px; }

.sxrad__tilewrap {
	position: relative;
	z-index: 50;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
}

.sxrad__tile {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: 14px;
	background: var(--sxrad-tile);
	border: 1px solid var(--sxrad-tile-border);
	box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.6), 0 1px 2px rgba(15, 23, 42, 0.04);
	font-size: 24px;
	color: var(--sxrad-icon);
}

.sxrad__tile svg { width: 1em; height: 1em; fill: currentColor; }

/* A solid chip in the section colour keeps labels readable where the rings
   sweep behind them. */
.sxrad__label {
	padding: 4px 10px;
	border-radius: 6px;
	text-align: center;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.01em;
	color: var(--sxrad-label);
	background: var(--sxrad-chip);
}

.sxrad__radar {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 80px;
	height: 80px;
	border-radius: 50%;
	/* Pinned LTR: the rings and sweep are geometry, and absolute offsets resolve
	   from the opposite side under dir="rtl", which threw them off centre. */
	direction: ltr;
}

.sxrad__ring {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	border-radius: 50%;
	border: 1px solid;
}

.sxrad__sweep {
	position: absolute;
	right: 50%;
	top: 50%;
	z-index: 40;
	width: 400px;
	height: 5px;
	transform-origin: right center;
	transform: rotate(20deg);
	display: flex;
	align-items: flex-end;
	overflow: hidden;
}

.sxrad--sweeping .sxrad__sweep {
	animation: sxrad-spin var(--sxrad-sweep) linear infinite;
}

.sxrad__sweep span {
	display: block;
	width: 100%;
	height: 1px;
	background: linear-gradient(to right, transparent, var(--sxrad-scan), transparent);
}

@keyframes sxrad-spin {
	from { transform: rotate(20deg); }
	to   { transform: rotate(380deg); }
}

.sxrad__logo {
	position: absolute;
	left: 50%;
	top: 50%;
	z-index: 50;
	transform: translate(-50%, -50%);
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--sxrad-logo);
	height: var(--sxrad-logo);
	padding: var(--sxrad-logo-pad);
	border-radius: 50%;
	background: var(--sxrad-logo-bg);
	box-sizing: border-box;
}

.sxs .sxrad__logo img {
	display: block;
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
}

.sxrad__baseline {
	position: absolute;
	bottom: 0;
	z-index: 41;
	width: 100%;
	height: 1px;
	background: linear-gradient(to right, transparent, var(--sxrad-base), transparent);
}

@media (max-width: 640px) {
	.sxrad { height: 320px; gap: 12px; }
	.sxrad__row { gap: 12px; }
	.sxrad__row--narrow { max-width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
	.sxrad--sweeping .sxrad__sweep { animation: none; }
}