/* Buttons. Red buttons at night are see-through with a thin white outline; .btn-glow adds a light that follows the pointer (see js/components/glow-button.js). */
.btn{font-family:var(--f);font-weight:var(--fw-bold);font-size:var(--fs-16);line-height:1;min-height:50px;padding:0 24px;border-radius:var(--r-pill);border:1.5px solid transparent;display:inline-flex;align-items:center;justify-content:center;gap:10px;cursor:pointer;text-decoration:none;white-space:nowrap;
  translate:var(--mx,0) var(--my,0);  /* magnetic pull, set by js/lib/motion.js */
  transition:transform 160ms var(--ease-out),translate .35s var(--ease-out),background-color 200ms ease,border-color 200ms ease,color 200ms ease}
.btn:active{transform:scale(.97)}
.btn svg{flex:none}
.btn-ghost{background:transparent;color:var(--head);border-color:var(--border-strong)}
.btn-white{background:var(--white);color:var(--red-press)}
.btn-on-ink{background:transparent;color:var(--on-ink);border-color:var(--ink-line)}
.btn-red,.btn-red:hover{background:var(--white-a03);color:var(--white);box-shadow:var(--outline-glass);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.btn[disabled]{background:var(--ink-2);color:var(--disabled-fg);cursor:not-allowed}
@media (hover:hover) and (pointer:fine){
  .btn-ghost:hover{border-color:var(--head)}
  .btn-white:hover{background:var(--white)}
  .btn-on-ink:hover{border-color:var(--on-ink)}
}

/* Hover glow: a soft 200px light follows the pointer inside the button, grows in on hover, and the label warms up */
.btn-glow{position:relative;isolation:isolate;overflow:hidden;--gx:50%;--gy:50%;--glow:var(--red-on-dark);--glow-text:var(--white);transition:color .3s ease,transform 120ms var(--ease-out),translate .35s var(--ease-out)}
.btn-white.btn-glow{--glow:var(--red);--glow-text:var(--red-deep)}
.btn-glow .hg{position:absolute;left:var(--gx);top:var(--gy);width:200px;height:200px;border-radius:var(--r-round);opacity:.5;pointer-events:none;z-index:-1;
  transform:translate(-50%,-50%) scale(0);transition:transform .4s ease-out;background:radial-gradient(circle,var(--glow) 10%,transparent 70%)}
.btn-glow:hover .hg{transform:translate(-50%,-50%) scale(1.2)}
.btn-glow:hover{color:var(--glow-text)}
.btn-red.btn-glow:hover{background:var(--white-a03)}
.btn-white.btn-glow:hover{background:var(--white)}
@media (prefers-reduced-motion:reduce){.btn-glow .hg{transition:none}}