/* ============================================================
   resamp — Buttons & links / components/buttons.css
   ============================================================ */

.btn {
  --btn-bg: var(--ink);
  --btn-fg: var(--bone);
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .8rem;
  padding: 1rem 1.6rem;
  border-radius: var(--r-pill);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--step-0);
  letter-spacing: var(--tracking-body);
  color: var(--btn-fg);
  background: var(--btn-bg);
  isolation: isolate;
  overflow: hidden;
  transition: color var(--dur-3) var(--ease-out-quart), transform var(--dur-2) var(--ease-out-expo);
  will-change: transform;
}
/* Fill sweep on hover.
   `inset: -1px` lets the swept fill bleed one pixel past the pill so the
   rounded, anti-aliased edge is fully covered — otherwise a hairline of the
   button's base colour shows through on hover and reads as a thin border. */
.btn::before {
  content: "";
  position: absolute; inset: -1px; z-index: -1;
  background: var(--btn-hover, var(--lime));
  transform: translateY(101%);
  transition: transform var(--dur-3) var(--ease-out-quart);
}
.btn:hover::before, .btn:focus-visible::before { transform: translateY(0); }
.btn:hover { color: var(--btn-hover-fg, var(--ink)); }
.btn:active { transform: scale(.97); }

.btn__label { display: inline-block; }
.btn__icon {
  display: inline-grid; place-items: center;
  width: 1.15em; height: 1.15em;
  transition: transform var(--dur-2) var(--ease-out-expo);
}
.btn:hover .btn__icon { transform: translateX(4px); }

/* Variants */
.btn--primary { --btn-bg: var(--lime); --btn-fg: var(--ink); --btn-hover: var(--ink); --btn-hover-fg: var(--bone); }
.btn--violet  { --btn-bg: var(--violet); --btn-fg: #fff; --btn-hover: var(--lime); --btn-hover-fg: var(--ink); }
.btn--ink     { --btn-bg: var(--ink); --btn-fg: var(--bone); --btn-hover: var(--lime); --btn-hover-fg: var(--ink); }
.btn--ghost {
  --btn-bg: transparent; --btn-fg: var(--fg);
  border: 1px solid var(--line-strong);
  --btn-hover: var(--ink); --btn-hover-fg: var(--bone);
  transition: color var(--dur-3) var(--ease-out-quart), border-color var(--dur-3) var(--ease-out-quart), transform var(--dur-2) var(--ease-out-expo);
}
/* Drop the outline once the fill sweeps in, so no hairline sits on the fill */
.btn--ghost:hover, .btn--ghost:focus-visible { border-color: transparent; }
.on-dark .btn--ghost { --btn-hover: var(--lime); --btn-hover-fg: var(--ink); }
.btn--lg { padding: 1.15rem 2rem; font-size: var(--step-1); }
.btn--sm { padding: .7rem 1.1rem; font-size: var(--step--1); }
.btn--block { display: flex; width: 100%; justify-content: center; }

/* Circular arrow / icon button */
.icon-btn {
  display: inline-grid; place-items: center;
  width: 56px; height: 56px; border-radius: 50%;
  border: 1px solid var(--line-strong);
  color: var(--fg);
  transition: background var(--dur-2) var(--ease-out-expo), color var(--dur-2), transform var(--dur-2) var(--ease-out-expo), border-color var(--dur-2);
}
.icon-btn:hover { background: var(--ink); color: var(--bone); border-color: transparent; transform: rotate(45deg); }
.icon-btn svg { width: 22px; height: 22px; }

/* Animated text link with drawing underline */
.link {
  position: relative;
  display: inline-block;
  font-weight: 500;
  padding-bottom: 2px;
}
.link::after {
  content: "";
  position: absolute; left: 0; bottom: 0;
  width: 100%; height: 1.5px;
  background: currentColor;
  transform: scaleX(0); transform-origin: right;
  transition: transform var(--dur-2) var(--ease-out-expo);
}
.link:hover::after { transform: scaleX(1); transform-origin: left; }
.link--accent:hover { color: var(--violet); }

/* Arrow link (label + moving arrow) */
.arrow-link {
  display: inline-flex; align-items: center; gap: .6rem;
  font-weight: 500;
}
.arrow-link svg { width: 18px; height: 18px; transition: transform var(--dur-2) var(--ease-out-expo); }
.arrow-link:hover svg { transform: translate(4px, -4px); }
.arrow-link .u-line { position: relative; }
.arrow-link .u-line::after {
  content: ""; position: absolute; left: 0; bottom: -3px;
  width: 100%; height: 1.5px; background: currentColor;
  transform: scaleX(0); transform-origin: right;
  transition: transform var(--dur-2) var(--ease-out-expo);
}
.arrow-link:hover .u-line::after { transform: scaleX(1); transform-origin: left; }

/* Magnetic wrapper (JS moves .magnetic within a threshold) */
.magnetic { display: inline-block; will-change: transform; }