/* =========================================================
   xxxxnese — components/button.css
   ---------------------------------------------------------
   全ボタン共通のhover演出:
     ::before が左 → 右へスライドして塗りが入り、テキスト色が切り替わる。
     浮き上がり(transform)や影(box-shadow)は使わない。
     色の出方だけ .btn-* バリアントで切り替える。

   HTML規約:
     <a class="btn btn-primary"><span>ラベル</span></a>
     テキストは <span> で包んで ::before より前面に置く
   ========================================================= */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 16px 32px;
  font-size: 13px;
  letter-spacing: 0.12em;
  border: 1px solid var(--color-ink);
  border-radius: 999px; /* pill */
  overflow: hidden;
  cursor: pointer; /* <button class="btn"> 形式でも確実に指カーソル */
  transition: color 0.5s var(--ease), border-color 0.5s var(--ease);
  min-width: 180px;
}

/* 左から右へ入る塗り面 */
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-101%);
  transition: transform 0.5s var(--ease);
  pointer-events: none; /* 塗りレイヤが hover/cursor を奪わないように */
}

/* テキストを塗りより前面に */
.btn > * {
  position: relative;
  z-index: 1;
}

.btn:hover::before {
  transform: translateX(0);
}

/* ---------- Button variants (色だけ切替) ---------- */
/* Primary: 黒地 → 白が流れ込む → 文字は黒に反転 */
.btn-primary {
  background: var(--color-ink);
  color: #ffffff;
  border-color: var(--color-ink);
}
.btn-primary::before { background: #ffffff; }
.btn-primary:hover { color: var(--color-ink); }

/* Ghost: 透明 → 黒が流れ込む → 文字は白に反転 */
.btn-ghost {
  background: transparent;
  color: var(--color-ink);
  border-color: var(--color-ink);
}
.btn-ghost::before { background: var(--color-ink); }
.btn-ghost:hover { color: #ffffff; }

/* 画像/暗背景の上で使う Ghost: 透明 + 白枠 → 白が流れ込む → 文字は黒に反転 */
.btn-ghost-invert {
  background: transparent;
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.6);
}
.btn-ghost-invert::before { background: #ffffff; }
.btn-ghost-invert:hover {
  color: var(--color-ink);
  border-color: #ffffff;
}

.btn-large { padding: 20px 48px; min-width: 220px; }

/* =========================================================
   Responsive — button
   ========================================================= */

/* Mobile */
@media (max-width: 640px) {
  .btn {
    width: 100%;
    padding: 18px 24px;
  }
}