/* Fade-swap button: a soft pill whose light fill fades away on hover while the pill underneath darkens to ink
   and the label turns cream, all on one .4s critically damped spring (no overshoot). Not a roll, not a wipe:
   nothing moves, two colour layers cross. CSS only.

   <a class="fsb" href="#">Get started</a>        (or a <button>)

   Layers, bottom to top: the pill's own background (--fsb-ground, 8% of the ink at rest), the fill (::before,
   --fsb-fill, overhanging the pill by 2px under its clip), the label. Hover: fill opacity 1 -> 0, ground ->
   --fsb-hover-bg, label -> --fsb-hover-ink. Defaults are the source's measured values. */
.fsb {
  --fsb-fill: rgb(255 248 187);            /* resting fill layer (source: pale butter) */
  --fsb-ground: rgb(10 23 20 / .08);       /* the pill under the fill: 8% of the ink */
  --fsb-ink: rgb(10 23 20);                /* resting label */
  --fsb-hover-bg: rgb(10 23 20);           /* the pill on hover */
  --fsb-hover-ink: rgb(255 247 235);       /* label on hover (cream) */
  --fsb-border: 0px;                       /* outline variant: 1px */
  --fsb-border-color: var(--fsb-ink);
  --fsb-dur: .4s;
  --fsb-ease: var(--_fsb-spring);          /* motion spring {duration .4, bounce 0}, sampled every 10ms below */
  --fsb-h: 48px;
  --fsb-pad: 0 20px;
  --fsb-radius: 32px;
  --fsb-bleed: 2px;                        /* how far the fill overhangs the clip */
  --fsb-font: 700 12px/12px Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --fsb-track: 1.25px;

  /* fallback for browsers without linear(): the closest cubic-bezier (max error 2.7%) */
  --_fsb-spring: cubic-bezier(.33, .6, .05, 1);

  position: relative; isolation: isolate;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  box-sizing: border-box;
  height: var(--fsb-h); padding: var(--fsb-pad);
  border: var(--fsb-border) solid var(--fsb-border-color); border-radius: var(--fsb-radius);
  overflow: hidden;
  background-color: var(--fsb-ground);
  color: var(--fsb-ink);
  font: var(--fsb-font); letter-spacing: var(--fsb-track); text-transform: uppercase; text-decoration: none;
  white-space: nowrap; cursor: pointer; -webkit-user-select: none; user-select: none;
  transition: background-color var(--fsb-dur) var(--fsb-ease), color var(--fsb-dur) var(--fsb-ease);
}
.fsb::before {
  content: ""; position: absolute; z-index: -1;
  inset: calc(-1 * var(--fsb-bleed));
  border-radius: inherit;
  background: var(--fsb-fill);
  transition: opacity var(--fsb-dur) var(--fsb-ease);
}
/* Framer's spring {type: spring, duration: .4, bounce: 0}: damping ratio 1, stiffness 533, damping 46.2
   (mass 1); x(t) = 1 - e^(-23.08 t)(1 + 23.08 t); 32% at 50ms, 67% at 100ms, 94% at 200ms, snapped to 1 at 400ms */
@supports (transition-timing-function: linear(0, 1)) {
  .fsb { --_fsb-spring: linear(0, 0.023, 0.079, 0.153, 0.236, 0.321, 0.403, 0.48, 0.551, 0.615, 0.671, 0.721, 0.764, 0.801, 0.833, 0.86, 0.883, 0.903, 0.919, 0.933, 0.944, 0.954, 0.962, 0.969, 0.974, 0.979, 0.983, 0.986, 0.988, 0.99, 0.992, 0.994, 0.995, 0.996, 0.997, 0.997, 0.998, 0.998, 0.998, 0.999, 1); }
}

.fsb.is-hover, .fsb:focus-visible { background-color: var(--fsb-hover-bg); color: var(--fsb-hover-ink); }
.fsb.is-hover::before, .fsb:focus-visible::before { opacity: 0; }
@media (hover: hover) {
  .fsb:hover { background-color: var(--fsb-hover-bg); color: var(--fsb-hover-ink); }
  .fsb:hover::before { opacity: 0; }
}
.fsb:focus-visible { outline: 2px solid var(--fsb-hover-bg); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .fsb, .fsb::before { transition-duration: .01s; } }