/* Uniform Kinetics-style button system (one family sitewide) */

.btn,
.btn-primary,
.btn-secondary,
.contact-btn,
.hamburger-btn,
button.btn,
a.btn,
a.primary,
.hero-ctas a {
  --btn-bg: transparent;
  --btn-fg: var(--text-primary);
  --btn-border: var(--border-strong);
  --btn-hover-bg: rgba(255, 255, 255, 0.06);
  --btn-active-scale: 0.94;
  --btn-scale: 1;
  --magnetic-x: 0px;
  --magnetic-y: 0px;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 44px;
  padding: 0.8rem 1.35rem;
  border-radius: var(--radius-pill);
  border: 1px solid var(--btn-border);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1;
  cursor: pointer;
  user-select: none;
  text-decoration: none;
  transform: translate3d(var(--magnetic-x), var(--magnetic-y), 0) scale(var(--btn-scale));
  transition:
    transform 280ms var(--ease-spring),
    background-color var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out);
  will-change: transform;
}

.btn:hover,
.btn-primary:hover,
.btn-secondary:hover,
.contact-btn:hover,
a.primary:hover,
.hero-ctas a:hover {
  background: var(--btn-hover-bg);
}

.btn:active,
.btn-primary:active,
.btn-secondary:active,
.contact-btn:active,
.hamburger-btn:active,
a.primary:active,
.hero-ctas a:active,
.btn.is-pressed,
.btn-primary.is-pressed,
.btn-secondary.is-pressed,
.contact-btn.is-pressed,
.hamburger-btn.is-pressed,
a.primary.is-pressed,
.hero-ctas a.is-pressed {
  --btn-scale: var(--btn-active-scale);
}

.btn:focus-visible,
.btn-primary:focus-visible,
.btn-secondary:focus-visible,
.contact-btn:focus-visible,
.hamburger-btn:focus-visible,
a.primary:focus-visible,
.hero-ctas a:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--focus);
}

/* Primary = white fill on black */
.btn-primary,
.contact-btn,
a.primary,
.hero-ctas a.primary {
  --btn-bg: #ffffff;
  --btn-fg: #000000;
  --btn-border: #ffffff;
  --btn-hover-bg: #e7e9ea;
}

.btn-primary:hover,
.contact-btn:hover,
a.primary:hover,
.hero-ctas a.primary:hover {
  color: #000;
}

/* Secondary = ghost */
.btn-secondary,
.hero-ctas a:not(.primary) {
  --btn-bg: transparent;
  --btn-fg: var(--text-primary);
  --btn-border: var(--border-strong);
  --btn-hover-bg: rgba(255, 255, 255, 0.06);
}

/* Compact / icon control (hamburger) keeps kinetics but tighter box */
.hamburger-btn {
  display: none;
  min-height: 42px;
  padding: 0;
  border-radius: var(--radius-sm);
}

/* Magnetic layer target (optional enhancement via JS) */
.btn[data-magnetic],
.btn-primary[data-magnetic],
a.primary[data-magnetic] {
  position: relative;
}

@media (prefers-reduced-motion: reduce) {
  .btn,
  .btn-primary,
  .btn-secondary,
  .contact-btn,
  .hamburger-btn,
  a.primary,
  .hero-ctas a {
    transition: background-color var(--dur-fast) linear, border-color var(--dur-fast) linear, color var(--dur-fast) linear;
    transform: none !important;
  }
}

@media (max-width: 760px) {
  .hamburger-btn {
    display: inline-flex;
  }
}