/* KK Flex Kit copy of the Orbit button component — source: orbit-button-handoff (orbit-button.css).
   Keep identical to the handoff file; kit-specific settings live in src/scss/base/_buttons.scss (.kkf .orbit-btn). */
/* =============================================================================
   Orbit button — live-text CTA with an orbiting line on hover.
   Markup:  <a class="orbit-btn" data-orbit="solid" href="…">
              <span class="face"><span class="label">Demo the System</span></span>
            </a>
   (or <button class="orbit-btn" …>; orbit-button.js adds .face/.label if the
   button only contains text, and adds the SVG.)
   Variants: data-orbit="solid" (default) | data-orbit="ticks".
   Timing, easing and curves are client-approved (README.md) — don't change them.
   ============================================================================= */

.orbit-btn {
	/* Type — the licensed Neo Sans is loaded by the page, not here */
	--orbit-font-family: "neo-sans", "Neo Sans Pro", "Neo Sans", system-ui, sans-serif;
	--orbit-font-weight: 500;                      /* Medium — measured from the approved label PNGs (stem/cap 0.180 vs Medium 0.185, Regular 0.122) */
	--orbit-font-size: calc(var(--h) * 0.3685);   /* cap height ≈ 27.7% of the button height (Neo Sans cap = 0.743em) */
	--orbit-letter-spacing: -0.03em;               /* Medium at -3% matches the comps' label width (217.0 vs 217.5px) */
	--orbit-label-shift: 0.105em;                  /* optical-centre nudge, only where text-box isn't supported (see .label) */

	/* Colour */
	--orbit-bg: #06213D;
	--orbit-text: #FFFFFF;
	--orbit-line: #06213D;
	--orbit-edge: #000;                            /* 1px inset hairline */
	--orbit-focus: var(--orbit-line);

	/* Size */
	--h: 77.5px;                                   /* button height; type size and side padding scale from it */
	--orbit-pad-x: var(--pad-x, calc(var(--h) * 0.52)); /* side padding — comps ≈ 0.52 × height; --pad-x (solid-handoff name) also works */
	--gap: 9px;                                    /* space between button and orbit line */
	--stroke: 6px;                                 /* line thickness (ticks: tick length) */
	--grow: 1.04;                                  /* hover scale of the button and its line, together */
	--tick-w: 2px;                                 /* ticks: thickness */
	--tick-space: 4.5px;                           /* ticks: space between ticks */

	position: relative;
	display: inline-block;
	vertical-align: middle;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: none;
	color: var(--orbit-text);
	font-family: var(--orbit-font-family);
	font-weight: var(--orbit-font-weight);
	font-size: var(--orbit-font-size);
	letter-spacing: var(--orbit-letter-spacing);
	line-height: 1;
	text-decoration: none;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	-webkit-tap-highlight-color: transparent;
}
.orbit-btn:hover,
.orbit-btn:focus { text-decoration: none; color: var(--orbit-text); }

.orbit-btn[data-orbit="ticks"] {
	--stroke: 9px;                                 /* tick length */
}

/* Body, label and orbit line share this layer, so they scale together and the gap stays even */
.orbit-btn .face {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	height: var(--h);
	padding: 0 var(--orbit-pad-x);
	border-radius: inherit;
	background: var(--orbit-bg);
	box-shadow: 0 0 0 1px var(--orbit-edge) inset;
	white-space: nowrap;
	/* settle back with a soft, barely-there overshoot */
	transition: transform 480ms cubic-bezier(0.3, 1.2, 0.5, 1);
}

/* Label — centred on the cap height (the optical centre), not the font's line box.
   With text-box support the box is trimmed to cap height → alphabetic baseline and
   flex centring does the rest. Elsewhere, --orbit-label-shift nudges it down:
   0.105em is right for Neo Sans; if the loaded font sits differently, adjust it. */
.orbit-btn .label {
	position: relative;
	display: block;
	color: var(--orbit-text);
	transform: translateY(var(--orbit-label-shift));
}
@supports (text-box: trim-both cap alphabetic) {
	.orbit-btn .label {
		text-box: trim-both cap alphabetic;
		transform: none;
	}
}

/* Solid: grows while hovered or keyboard-focused */
.orbit-btn[data-orbit="solid"]:hover .face,
.orbit-btn[data-orbit="solid"]:focus-visible .face,
.orbit-btn:not([data-orbit]):hover .face,
.orbit-btn:not([data-orbit]):focus-visible .face {
	transform: scale(var(--grow));
	transition: transform 550ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* Ticks: grows for the length of the animation; the JS removes .is-playing so the
   settle ends with the last tick. Keep 417ms in sync with SETTLE in orbit-button.js. */
.orbit-btn[data-orbit="ticks"] .face {
	transition: transform 417ms cubic-bezier(0.3, 1.2, 0.5, 1);
}
.orbit-btn[data-orbit="ticks"].is-playing .face {
	transform: scale(var(--grow));
	transition: transform 478ms cubic-bezier(0.16, 1, 0.3, 1);
}

@media (prefers-reduced-motion: reduce) {
	.orbit-btn .face { transition: none; }
}

.orbit-btn:focus { outline: none; }
.orbit-btn:focus-visible {
	outline: 2px solid var(--orbit-focus);
	outline-offset: calc(var(--gap) + var(--stroke) + 4px);
}

/* The orbit line (added by orbit-button.js, aria-hidden) */
.orbit-btn svg {
	position: absolute;
	inset: calc(-1 * (var(--gap) + var(--stroke)));
	width: calc(100% + 2 * (var(--gap) + var(--stroke)));
	height: calc(100% + 2 * (var(--gap) + var(--stroke)));
	max-width: none;                               /* some resets cap svg at 100% — the ring is wider than the button */
	overflow: visible;
	pointer-events: none;
}
.orbit-btn .line {
	fill: none;
	stroke: var(--orbit-line);
	stroke-width: var(--stroke);
	stroke-linecap: butt;
	opacity: 0;
}
.orbit-btn mask path {
	fill: none;
	stroke: #fff;
	stroke-width: calc(var(--stroke) + 2px);
	stroke-linecap: butt;
}