/* ============================================================================
   Japan Bike Hub — buttons.css  (magnetic glow buttons + gradient border)
   ============================================================================ */
.btn{
  --pad: .95rem 1.7rem;
  position:relative; display:inline-flex; align-items:center; gap:.6rem;
  padding:var(--pad); border-radius:100px; font-weight:700; font-size:.95rem;
  letter-spacing:.02em; transition:transform .35s var(--ease), box-shadow .35s, background .35s, color .35s;
  will-change:transform; overflow:hidden; isolation:isolate;
}
.btn::after{ content:""; position:absolute; inset:0; z-index:-1; opacity:0; transition:opacity .4s; }
.btn:hover{ transform:translateY(-3px); }

.btn--solid{ background:var(--grad-blue); color:#03122c; box-shadow:var(--shadow-blue); }
.btn--solid:hover{ box-shadow:0 18px 44px -18px rgba(61,169,255,.4); }

.btn--ghost{ border:1px solid var(--line-2); color:var(--white); background:rgba(255,255,255,.02); }
.btn--ghost:hover{ border-color:var(--blue); color:var(--white); box-shadow:0 0 0 1px var(--blue) inset; }

.btn--line{ padding:0; color:var(--white); border-radius:0; }
.btn--line span{ position:relative; }
.btn--line span::after{ content:""; position:absolute; left:0; bottom:-4px; width:100%; height:1px; background:var(--blue); transform:scaleX(.35); transform-origin:left; transition:transform .4s var(--ease); }
.btn--line:hover span::after{ transform:scaleX(1); }
.btn--line .arrow{ transition:transform .4s var(--ease); color:var(--blue); }
.btn--line:hover .arrow{ transform:translateX(6px); }

.btn--lg{ --pad:1.15rem 2.2rem; font-size:1rem; }
.btn__glow{ position:absolute; inset:-40%; background:radial-gradient(closest-side, var(--glow), transparent); opacity:0; transition:opacity .4s; pointer-events:none; }
.btn:hover .btn__glow{ opacity:.6; }