/* ==========================================================================
   buttons.css — pill buttons: fill sweep, lift, arrow nudge, press,
   magnetic offset (set by js/buttons.js) and click ripple
   ========================================================================== */
.btn {
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 15px 26px; border-radius: var(--r-btn);
  font: 600 15px/1 var(--body); text-decoration: none; cursor: pointer;
  color: var(--ink); background: transparent; border: 1.5px solid var(--ink);
  translate: var(--mx, 0px) var(--my, 0px);
  transition: color .35s var(--ease), border-color .35s var(--ease),
              transform .35s var(--ease), box-shadow .35s var(--ease),
              translate .25s var(--ease);
}
.btn::before {                       /* the fill that sweeps up on hover */
  content: ""; position: absolute; inset: 0; z-index: -2; border-radius: inherit;
  background: var(--ink);
  transform: translateY(102%);
  transition: transform .5s var(--ease);
}
.btn:hover::before, .btn:focus-visible::before { transform: none; }
.btn:hover, .btn:focus-visible {
  color: var(--paper);
  transform: translateY(-2px);
  box-shadow: 0 18px 28px -16px rgba(0, 0, 0, .45);
}
.btn:active { transform: translateY(0) scale(.97); box-shadow: none; }
.btn .arr { display: inline-block; transition: transform .4s var(--ease-spring); }
.btn:hover .arr { transform: translateY(3px); }
.btn .arr.up { }
.btn:hover .arr.up { transform: translate(3px, -3px); }

.btn.solid { background: var(--ink); color: var(--paper); }
.btn.solid::before { background: var(--blue); }
.btn.solid:hover, .btn.solid:focus-visible { border-color: var(--blue); color: #fff; }

/* click ripple (appended by js/buttons.js) */
.ripple {
  position: absolute; z-index: -1; border-radius: 50%; pointer-events: none;
  background: currentColor; opacity: 0; scale: 0;
  animation: ripple .7s var(--ease) forwards;
}

/* small copy button used in the contact card */
.copy {
  position: relative; isolation: isolate; overflow: hidden;
  font: 700 11px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase;
  padding: 11px 16px; border: 0; border-radius: var(--r-btn);
  background: var(--ink); color: var(--paper); cursor: pointer;
  transition: background-color .3s var(--ease), transform .3s var(--ease);
}
.copy:hover { background: var(--blue); transform: translateY(-1px); }
.copy:active { transform: scale(.95); }
.copy.is-done { background: #1F7A4D; }