/**
 * Civium staging — smooth button & control interactions (no layout jump).
 * Load after site-dark.css.
 */
:root {
  --ease-ui: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-ui: 0.22s;
  --dur-ui-fast: 0.12s;
  --focus-ring: 2px solid rgba(126, 205, 224, 0.85);
}

/* Shared interactive base */
.btn-fill,
.btn-line,
.btn-ink,
.nav-cta,
.ci-seg-tab,
.ci-step-label,
.ci-flow-node,
.ci-step-dot,
.ci-step-prev,
.ci-step-next,
.path-tab,
.feat-tab,
.launch-link,
.p-link,
button.btn-ink,
button.btn-fill,
[type="submit"].btn-ink {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

/* —— Primary / secondary CTAs —— */
.btn-fill,
.btn-ink,
.nav-cta {
  box-shadow: 0 2px 10px -4px rgba(0, 0, 0, 0.22);
  transition:
    transform var(--dur-ui) var(--ease-ui),
    box-shadow var(--dur-ui) var(--ease-ui),
    background-color var(--dur-ui) var(--ease-ui),
    border-color var(--dur-ui) var(--ease-ui),
    color var(--dur-ui) var(--ease-ui);
}

.btn-fill:hover,
.nav-cta:hover {
  opacity: 1;
  transform: translateY(-1px);
  box-shadow: 0 6px 20px -8px rgba(0, 0, 0, 0.28);
  background: #faf8f5;
}

.btn-fill:active,
.btn-ink:active,
.nav-cta:active {
  transform: translateY(0) scale(0.985);
  box-shadow: 0 1px 6px -2px rgba(0, 0, 0, 0.2);
  transition-duration: var(--dur-ui-fast);
}

.btn-ink {
  opacity: 1;
  transition:
    transform var(--dur-ui) var(--ease-ui),
    box-shadow var(--dur-ui) var(--ease-ui),
    background-color var(--dur-ui) var(--ease-ui),
    color var(--dur-ui) var(--ease-ui);
}

.btn-ink:hover {
  opacity: 1;
  background: #1a3461;
  transform: translateY(-1px);
  box-shadow: 0 6px 20px -8px rgba(14, 32, 69, 0.35);
}

.btn-ink:disabled {
  opacity: 0.55;
  transform: none;
  cursor: not-allowed;
  box-shadow: none;
}

/* Ghost / outline */
.btn-line {
  border: 1px solid var(--ghost2);
  background: transparent;
  box-shadow: none;
  transition:
    transform var(--dur-ui) var(--ease-ui),
    border-color var(--dur-ui) var(--ease-ui),
    color var(--dur-ui) var(--ease-ui),
    background-color var(--dur-ui) var(--ease-ui),
    box-shadow var(--dur-ui) var(--ease-ui);
}

.btn-line:hover {
  transform: translateY(-1px);
  border-color: rgba(246, 242, 236, 0.4);
  color: #f0ede8;
  background: rgba(246, 242, 236, 0.06);
  box-shadow: 0 4px 16px -10px rgba(0, 0, 0, 0.2);
}

.btn-line:active {
  transform: translateY(0) scale(0.985);
  transition-duration: var(--dur-ui-fast);
}

/* Light-band ghost buttons (paths, launch) */
.paths .btn-line,
.launch .btn-line,
.band-light .btn-line,
.feat .btn-line {
  border-color: rgba(14, 32, 69, 0.18);
  color: var(--ink2);
}

.paths .btn-line:hover,
.launch .btn-line:hover,
.band-light .btn-line:hover,
.feat .btn-line:hover {
  border-color: rgba(14, 32, 69, 0.35);
  color: var(--ink);
  background: rgba(14, 32, 69, 0.04);
}

/* Nav CTA — match primary */
.nav-cta:hover {
  background: #faf8f5;
}

/* Nav links — no active-state layout jump */
.nav-links a {
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  transition: color var(--dur-ui) var(--ease-ui), border-color var(--dur-ui) var(--ease-ui);
}

.nav-links a.active {
  padding-bottom: 0;
  border-bottom-color: var(--accent-muted);
}

@media (max-width: 768px) {
  .nav-links a {
    border-bottom-width: 1px;
    margin-bottom: 0;
  }
  .nav-links a.active {
    border-bottom-color: rgba(126, 205, 224, 0.35);
  }
}

/* Focus — ring only, no size change */
.btn-fill:focus-visible,
.btn-line:focus-visible,
.btn-ink:focus-visible,
.nav-cta:focus-visible,
.ci-seg-tab:focus-visible,
.path-tab:focus-visible,
.ci-step-label:focus-visible,
.feat-tab:focus-visible {
  outline: var(--focus-ring);
  outline-offset: 2px;
}

/* —— Segmented / pill tabs —— */
.ci-seg-tab,
.path-tab {
  transition:
    background-color var(--dur-ui) var(--ease-ui),
    color var(--dur-ui) var(--ease-ui),
    box-shadow var(--dur-ui) var(--ease-ui),
    transform var(--dur-ui-fast) var(--ease-ui);
}

.ci-seg-tab:active,
.path-tab:active,
.ci-step-label:active,
.ci-flow-node:active {
  transform: scale(0.98);
  transition-duration: var(--dur-ui-fast);
}

.ci-flow-node:active .ci-flow-node-num {
  transform: scale(0.96);
}

.ci-seg-tab.is-active,
.path-tab.active {
  box-shadow: 0 1px 8px -4px rgba(14, 32, 69, 0.2);
}

.ci-seg-tablist--dark .ci-seg-tab.is-active,
.ci-step-wheel--dark .ci-step-label.is-active {
  box-shadow: inset 0 0 0 1px rgba(246, 242, 236, 0.12);
}

.ci-step-label {
  transition:
    background-color var(--dur-ui) var(--ease-ui),
    color var(--dur-ui) var(--ease-ui),
    transform var(--dur-ui-fast) var(--ease-ui);
}

.ci-step-dot {
  transition:
    transform var(--dur-ui) var(--ease-ui),
    background-color var(--dur-ui) var(--ease-ui);
}

.ci-step-dot.is-active {
  transform: scale(1.15);
}

.ci-step-prev,
.ci-step-next {
  transition:
    transform var(--dur-ui) var(--ease-ui),
    border-color var(--dur-ui) var(--ease-ui),
    background-color var(--dur-ui) var(--ease-ui),
    opacity var(--dur-ui) var(--ease-ui);
}

.ci-step-prev:hover:not(:disabled),
.ci-step-next:hover:not(:disabled) {
  transform: translateY(-1px);
}

.ci-step-prev:active:not(:disabled),
.ci-step-next:active:not(:disabled) {
  transform: scale(0.97);
}

/* Feature list tabs */
.feat-tab {
  transition:
    background-color var(--dur-ui) var(--ease-ui),
    color var(--dur-ui) var(--ease-ui);
}

.feat-tab-bar,
.feat-li-dot {
  transition:
    background-color var(--dur-ui) var(--ease-ui),
    box-shadow var(--dur-ui) var(--ease-ui);
}

/* Text links styled as buttons */
.launch-link,
.p-link {
  transition:
    color var(--dur-ui) var(--ease-ui),
    border-color var(--dur-ui) var(--ease-ui),
    opacity var(--dur-ui) var(--ease-ui);
}

.p-link:hover {
  opacity: 1;
  color: var(--ink);
}

.p-card--dark .p-link:hover {
  color: #f0ede8;
}

/* Button groups — stable gap when one button lifts */
.hero-ctas,
.cta-btns,
.home-close-btns,
.platform-cta-row,
.launch-actions,
.home-close-btns {
  align-items: center;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-ui: 0.01ms;
    --dur-ui-fast: 0.01ms;
  }

  .btn-fill:hover,
  .btn-line:hover,
  .btn-ink:hover,
  .nav-cta:hover,
  .ci-seg-tab:active,
  .path-tab:active {
    transform: none;
  }
}