/* Liquid metal button
   Markup: <a class="btn btn-primary"> or <button class="btn btn-secondary">.
   Without JS (or without WebGL) the 2px rim is a static CSS chrome gradient;
   liquid-metal-button.js lays an animated metal canvas over that rim. */

:root {
  --lmb-height: 48px;
  --lmb-pad-x: 22px;
  --lmb-rim: 2px;
  --lmb-gap: 8px;
  --lmb-font-size: 15px;
  --lmb-font-weight: 500;
  --lmb-label: #ffffff;
  --lmb-core-primary: #1e4d3a;
  --lmb-core-primary-bottom: #133326;
  --lmb-core-secondary: #1a1a1a;
  --lmb-core-secondary-bottom: #050505;
  --lmb-focus: #0b0b0b;
  --lmb-chrome: conic-gradient(
    from 210deg at 50% 50%,
    #f4f5f7 0deg, #8d9096 40deg, #ffffff 75deg, #50535a 115deg,
    #d9dbe0 160deg, #ffffff 195deg, #6b6e75 240deg, #eceef1 285deg,
    #9a9da3 325deg, #f4f5f7 360deg
  );
  --lmb-shadow-rest:
    0 0 0 1px rgba(0, 0, 0, 0.3), 0 36px 14px 0 rgba(0, 0, 0, 0.02),
    0 20px 12px 0 rgba(0, 0, 0, 0.08), 0 9px 9px 0 rgba(0, 0, 0, 0.12),
    0 2px 5px 0 rgba(0, 0, 0, 0.15);
  --lmb-shadow-hover:
    0 0 0 1px rgba(0, 0, 0, 0.4), 0 12px 6px 0 rgba(0, 0, 0, 0.05),
    0 8px 5px 0 rgba(0, 0, 0, 0.1), 0 4px 4px 0 rgba(0, 0, 0, 0.15),
    0 1px 2px 0 rgba(0, 0, 0, 0.2);
  --lmb-shadow-press: 0 0 0 1px rgba(0, 0, 0, 0.5), 0 1px 2px 0 rgba(0, 0, 0, 0.3);
  --lmb-ease: cubic-bezier(0.34, 1.56, 0.64, 1);
}

.btn.btn-primary,
.btn.btn-secondary {
  --lmb-core-top: var(--lmb-core-primary);
  --lmb-core-bottom: var(--lmb-core-primary-bottom);
  --lmb-core: linear-gradient(180deg, var(--lmb-core-top) 0%, var(--lmb-core-bottom) 100%);
  position: relative;
  isolation: isolate;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--lmb-gap);
  height: var(--lmb-height);
  min-height: 44px;
  max-width: 100%;
  padding: 0 var(--lmb-pad-x);
  margin: 0;
  /* The rim: a transparent border that shows the chrome painted on the border-box,
     with the core painted on the padding-box. Works with JS off. */
  border: var(--lmb-rim) solid transparent;
  border-radius: 999px;
  background: var(--lmb-core) padding-box, var(--lmb-chrome) border-box;
  box-shadow: var(--lmb-shadow-rest);
  color: var(--lmb-label);
  font: inherit;
  font-size: var(--lmb-font-size);
  font-weight: var(--lmb-font-weight);
  line-height: 1;
  letter-spacing: 0.01em;
  text-decoration: none;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-appearance: none;
  appearance: none;
  vertical-align: middle;
  transition: transform 0.8s var(--lmb-ease), box-shadow 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn.btn-secondary {
  --lmb-core-top: var(--lmb-core-secondary);
  --lmb-core-bottom: var(--lmb-core-secondary-bottom);
}

.btn.btn-primary svg,
.btn.btn-secondary svg {
  flex: none;
  width: 18px;
  height: 18px;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5));
}

.btn.btn-primary:hover,
.btn.btn-secondary:hover {
  box-shadow: var(--lmb-shadow-hover);
  color: var(--lmb-label);
}

.btn.btn-primary:active,
.btn.btn-secondary:active,
.btn.lmb-pressed {
  box-shadow: var(--lmb-shadow-press);
  transform: translateY(1px) scale(0.98);
}

.btn.btn-primary:focus,
.btn.btn-secondary:focus {
  outline: none;
}

.btn.btn-primary:focus-visible,
.btn.btn-secondary:focus-visible {
  outline: 2px solid var(--lmb-focus);
  outline-offset: 2px;
}

/* ---- Layers injected by liquid-metal-button.js ---- */

/* Metal: covers the border-box (the 2px rim). The library puts its canvas
   inside at z-index -1; this element is the canvas parent. */
.lmb-metal {
  position: absolute;
  inset: calc(-1 * var(--lmb-rim));
  z-index: -2;
  border-radius: inherit;
  overflow: hidden;
  pointer-events: none;
  isolation: isolate;
}

/* Core: the pill inside the rim. Sits over the metal so only the rim shows. */
.lmb-core {
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  overflow: hidden;
  background: var(--lmb-core);
  pointer-events: none;
  transition: box-shadow 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn.lmb-pressed .lmb-core {
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.4), inset 0 1px 2px rgba(0, 0, 0, 0.3);
}

.lmb-ripple {
  position: absolute;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0) 70%);
  pointer-events: none;
  transform: translate(-50%, -50%) scale(0);
  animation: lmb-ripple 0.6s ease-out forwards;
}

@keyframes lmb-ripple {
  0% { transform: translate(-50%, -50%) scale(0); opacity: 0.6; }
  100% { transform: translate(-50%, -50%) scale(4); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .btn.btn-primary,
  .btn.btn-secondary {
    transition: box-shadow 0.15s linear;
  }
  .btn.btn-primary:active,
  .btn.btn-secondary:active,
  .btn.lmb-pressed {
    transform: none;
  }
  .lmb-ripple {
    display: none;
  }
}

@media (forced-colors: active) {
  .btn.btn-primary,
  .btn.btn-secondary {
    border-color: ButtonText;
  }
  .lmb-metal,
  .lmb-core {
    display: none;
  }
}