/* Buttons: one system for the whole site (home, subpages, Work stage). Every page loads this file after its own styles,
   so a button's look is defined here and nowhere else; pages only position their buttons.

   Two kinds, on two surfaces:
     primary    .btn--ink / .btn--accent, the stage's .go, a pressed filter   filled: ink on light sections, paper on dark ones
     secondary  .btn, .fbtn, .wk-all, the round icon buttons                  outlined
   One size (38px tall, .72rem mono caps) and one hover: the fill sweeps up from the bottom edge. A secondary button fills
   to the primary colours of its surface; a primary button fills to the accent blue. buttons.js adds the magnetic pull. */

.btn,.fbtn,.wk-acts .go,.wk-all,.wk-q,.wk-nav button{
  --b-fg:#111; --b-bg:transparent; --b-bd:#111;            /* at rest: secondary on a light surface */
  --b-fill:#111; --b-fill-fg:#f4f3ef;                       /* what sweeps in on hover */
  isolation:isolate; overflow:hidden; box-sizing:border-box;
  display:inline-flex; align-items:center; justify-content:center; gap:.5em;
  width:auto; height:auto; min-height:38px; padding:.5em 1.3em;
  border:1px solid var(--b-bd); border-radius:999px;
  font:400 .72rem/1.5 ui-monospace,"SF Mono",Menlo,Consolas,"Noto Sans KR",monospace;
  letter-spacing:.07em; text-transform:uppercase; text-decoration:none; text-align:center;
  color:var(--b-fg); background:var(--b-bg); box-shadow:none; backdrop-filter:none; cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  transition:transform .35s cubic-bezier(.2,.7,.1,1),color .3s,border-color .3s;
}
.btn,.fbtn,.wk-acts .go,.wk-q,.wk-nav button{position:relative}      /* .wk-all keeps the absolute position its page gives it */
:is(.btn,.fbtn,.wk-acts .go,.wk-all,.wk-q,.wk-nav button)::before{
  content:""; position:absolute; inset:-1px; z-index:-1; background:var(--b-fill);
  transform:translateY(102%); transition:transform .45s cubic-bezier(.2,.7,.1,1);
}

/* primary */
.btn--ink,.btn--accent,.wk-acts .go,.fbtn[aria-pressed="true"]{--b-fg:#f4f3ef; --b-bg:#111; --b-bd:#111; --b-fill:#3b5bdb; --b-fill-fg:#fff}

/* dark surfaces */
:is(.dk,.ft,.hero,.works__contact,.works__caps,.wk-stick) :is(.btn,.fbtn,.wk-all,.wk-q,.wk-nav button){--b-fg:#f4f3ef; --b-bd:rgba(244,243,239,.45); --b-fill:#f4f3ef; --b-fill-fg:#111}
:is(.dk,.ft,.hero,.works__contact,.works__caps,.wk-stick) :is(.btn--ink,.btn--accent,.wk-acts .go,.fbtn[aria-pressed="true"],.wk-q[aria-expanded="true"]){--b-fg:#111; --b-bg:#f4f3ef; --b-bd:#f4f3ef; --b-fill:#3b5bdb; --b-fill-fg:#fff}

/* round icon buttons: same height, same colours */
.wk-q,.wk-nav button{width:38px; min-width:38px; padding:0; font-size:.9rem; letter-spacing:0}

/* hover: the sweep (pointer devices), and the same state for keyboard focus and a press */
@media (hover:hover){
  :is(.btn,.fbtn,.wk-acts .go,.wk-all,.wk-q,.wk-nav button):hover{color:var(--b-fill-fg); border-color:var(--b-fill)}
  :is(.btn,.fbtn,.wk-acts .go,.wk-all,.wk-q,.wk-nav button):hover::before{transform:none}
}
:is(.btn,.fbtn,.wk-acts .go,.wk-all,.wk-q,.wk-nav button):is(:focus-visible,:active){color:var(--b-fill-fg); border-color:var(--b-fill)}
:is(.btn,.fbtn,.wk-acts .go,.wk-all,.wk-q,.wk-nav button):is(:focus-visible,:active)::before{transform:none}

/* not available */
.wk-acts .go.off{--b-fg:rgba(244,243,239,.6); --b-bg:transparent; --b-bd:rgba(244,243,239,.35); border-style:dashed; pointer-events:none}
.btn[disabled]{opacity:.6; pointer-events:none}

@media (prefers-reduced-motion:reduce){
  :is(.btn,.fbtn,.wk-acts .go,.wk-all,.wk-q,.wk-nav button),
  :is(.btn,.fbtn,.wk-acts .go,.wk-all,.wk-q,.wk-nav button)::before{transition:none}
}