/* ============================================================
   Component · Buttons / CTAs
   Architectural buttons — no rounded blobs. Border-on-draw for
   the hero primary CTA (animated via @property --border-progress).
   ============================================================ */

.btn {
  --btn-bg: var(--color-ink);
  --btn-fg: var(--color-white);
  --btn-border: var(--color-ink);

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  padding: 0.95rem 1.5rem;
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 1px solid var(--btn-border);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  position: relative;
  transition:
    background var(--duration-fast) var(--ease-out),
    color var(--duration-fast) var(--ease-out),
    border-color var(--duration-fast) var(--ease-out);
}

.btn:hover {
  --btn-bg: var(--color-accent);
  --btn-border: var(--color-accent);
}

.btn__arrow {
  display: inline-block;
  transition: transform var(--duration-fast) var(--ease-out);
}
.btn:hover .btn__arrow { transform: translateX(4px); }

/* Outlined variant (used on dark or surface backgrounds) */
.btn--outline {
  --btn-bg: transparent;
  --btn-fg: var(--color-ink);
  --btn-border: var(--color-ink);
}
.btn--outline:hover {
  --btn-bg: var(--color-ink);
  --btn-fg: var(--color-white);
  --btn-border: var(--color-ink);
}

/* Outlined on dark sections */
.section--dark .btn--outline {
  --btn-fg: var(--color-white);
  --btn-border: var(--color-white);
}
.section--dark .btn--outline:hover {
  --btn-bg: var(--color-white);
  --btn-fg: var(--color-ink);
}

/* Ghost link-style CTA — "secondary" with arrow */
.link-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-ink);
  padding-bottom: 4px;
  border-bottom: 1px solid var(--color-ink);
  transition:
    color var(--duration-fast) var(--ease-out),
    border-color var(--duration-fast) var(--ease-out);
}
.link-cta__arrow { transition: transform var(--duration-fast) var(--ease-out); }
.link-cta:hover {
  color: var(--color-accent);
  border-color: var(--color-accent);
}
.link-cta:hover .link-cta__arrow { transform: translateX(4px); }

.section--dark .link-cta { color: var(--color-white); border-color: var(--color-white); }
.section--dark .link-cta:hover { color: var(--color-accent); border-color: var(--color-accent); }

/* ============================================================
   Hero CTAs — "CAD selection" hover
   In the hero the .btn drops the accent fill (accent is never a
   background block in this system) for a precision-instrument feel:
   on hover/focus four 1px accent corner brackets snap inward, like
   selecting a component in a BIM tool, and the label + arrow go
   accent. Scoped to .hero__ctas so site-wide buttons are unchanged.
   ============================================================ */
.hero__ctas .btn:hover,
.hero__ctas .btn:focus-visible {
  --btn-bg: var(--color-ink);       /* no accent fill — stays flush on ink */
  --btn-border: transparent;
  --btn-fg: var(--color-accent);
}
.hero__ctas .btn > span { position: relative; z-index: 1; } /* text above brackets */

.hero__ctas .btn::before {
  content: '';
  position: absolute;
  inset: 0;
  --len: 11px;
  background:
    linear-gradient(var(--color-accent), var(--color-accent)) top left     / var(--len) 1px no-repeat,
    linear-gradient(var(--color-accent), var(--color-accent)) top left     / 1px var(--len) no-repeat,
    linear-gradient(var(--color-accent), var(--color-accent)) top right    / var(--len) 1px no-repeat,
    linear-gradient(var(--color-accent), var(--color-accent)) top right    / 1px var(--len) no-repeat,
    linear-gradient(var(--color-accent), var(--color-accent)) bottom left  / var(--len) 1px no-repeat,
    linear-gradient(var(--color-accent), var(--color-accent)) bottom left  / 1px var(--len) no-repeat,
    linear-gradient(var(--color-accent), var(--color-accent)) bottom right / var(--len) 1px no-repeat,
    linear-gradient(var(--color-accent), var(--color-accent)) bottom right / 1px var(--len) no-repeat;
  opacity: 0;
  transform: scale(1.07);           /* start expanded, snap inward to the corners */
  transition:
    opacity var(--duration-fast) var(--ease-out),
    transform var(--duration-normal) var(--ease-out);
  pointer-events: none;
}
.hero__ctas .btn:hover::before,
.hero__ctas .btn:focus-visible::before {
  opacity: 1;
  transform: scale(1);
}

@media (prefers-reduced-motion: reduce) {
  .hero__ctas .btn::before { transform: none; transition: opacity var(--duration-fast) var(--ease-out); }
  .hero__ctas .btn:hover::before,
  .hero__ctas .btn:focus-visible::before { transform: none; }
}