/* ============================================================================
   Nippon Bike World — buttons.css  (editorial gold rules)
   ============================================================================ */
.btn{ display:inline-flex; align-items:center; gap:.8rem; font-family:var(--font-ui); font-size:.82rem; letter-spacing:.16em; padding:1rem 2rem; border:1px solid var(--gold); color:var(--gold-2); background:none; transition:background .5s var(--ease), color .5s, transform .5s; position:relative; overflow:hidden; }
.btn::before{ content:""; position:absolute; inset:0; background:var(--grad-gold); transform:translateY(101%); transition:transform .5s var(--ease); z-index:-1; }
.btn:hover{ color:var(--navy); }
.btn:hover::before{ transform:translateY(0); }
.btn--solid{ background:var(--grad-gold); color:var(--navy); border-color:transparent; }
.btn--solid::before{ background:var(--navy); }
.btn--solid:hover{ color:var(--gold-2); }
.btn--lg{ padding:1.2rem 2.6rem; }

.link{ display:inline-flex; align-items:center; gap:.7rem; font-family:var(--font-ui); font-size:.82rem; letter-spacing:.16em; color:var(--gold-2); }
.link .ln{ position:relative; }
.link .ln::after{ content:""; position:absolute; left:0; bottom:-4px; width:100%; height:1px; background:var(--gold); transform:scaleX(.3); transform-origin:left; transition:transform .5s var(--ease); }
.link:hover .ln::after{ transform:scaleX(1); }
.link .ar{ transition:transform .4s var(--ease); }
.link:hover .ar{ transform:translateX(6px); }