/* ── Button system ───────────────────────────────────────────────────── */

.btn-primary {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: #090909; color: #FAFAFA;
  font-size: 16px; font-weight: 500; white-space: nowrap;
  padding: 0 32px; height: 48px; border-radius: 9999px;
  text-decoration: none; border: none; cursor: pointer;
  font-family: inherit;
}

.btn-secondary {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: transparent; color: #090909;
  font-size: 16px; font-weight: 500; white-space: nowrap;
  padding: 0 32px; height: 48px; border-radius: 9999px;
  text-decoration: none; border: 1px solid #090909; cursor: pointer;
  font-family: inherit;
}

.btn-tertiary {
  display: inline-flex; align-items: center; gap: 8px;
  background: transparent; color: inherit;
  font-size: 16px; font-weight: 500; white-space: nowrap;
  text-decoration: none; border: none; cursor: pointer; padding: 0;
  font-family: inherit;
}

/* ── Arrow animation ─────────────────────────────────────────────────── */

.btn-primary,
.btn-secondary,
.btn-tertiary,
.btn-tertiary--left,
.link-arrow {
  overflow-x: clip;
}

.btn-primary .arrow,
.btn-secondary .arrow,
.btn-tertiary .arrow,
.link-arrow .arrow {
  display: inline-block;
}

.btn-primary:hover .arrow,
.btn-secondary:hover .arrow,
.btn-tertiary:hover .arrow,
.link-arrow:hover .arrow {
  animation: arrow-fly 600ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes arrow-fly {
  0%   { transform: translateX(0);     opacity: 1; }
  38%  { transform: translateX(80px);  opacity: 1; }
  39%  { transform: translateX(-80px); opacity: 0; }
  50%  { opacity: 1; }
  100% { transform: translateX(0);     opacity: 1; }
}

/* ── Left-directed tertiary button ──────────────────────────────────── */

.btn-tertiary--left {
  display: inline-flex; align-items: center; gap: 8px;
  background: transparent; color: inherit;
  font-size: 16px; font-weight: 500;
  text-decoration: none; border: none; cursor: pointer; padding: 0;
  font-family: inherit;
  flex-direction: row;
}
.btn-tertiary--left .arrow {
  display: inline-block;
}
.btn-tertiary--left:hover .arrow {
  animation: arrow-fly-left 600ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes arrow-fly-left {
  0%   { transform: translateX(0);      opacity: 1; }
  38%  { transform: translateX(-80px);  opacity: 1; }
  39%  { transform: translateX(80px);   opacity: 0; }
  50%  { opacity: 1; }
  100% { transform: translateX(0);      opacity: 1; }
}