/* Icon takeover button. CSS only. Rewritten from Claura's "Play Button" (Framer, VppBWTnod.mjs).
   A pill with a label and a small trailing icon. On hover (or keyboard focus, or .is-on) the label fades out while
   the icon grows 16 -> 24px and travels to the dead centre of the pill, so the button becomes "just the icon".

   The source makes the icon position: absolute at 50% / 50% with translate(-50%, -50%) and adds 24px to the pill's
   padding-right (20 -> 44px). That 24px is exactly the room the icon gave up in the row (16px icon + 8px gap), so
   the pill never changes width. We keep the icon's slot in the row instead and fly only the drawn icon, which gives
   the same picture without ever re-laying-out the pill.

   Motion: one Framer duration spring, .5 s with bounce .35 (damping ratio .65, stiffness 431.6, damping 27 at mass 1),
   sampled below to CSS linear(): it overshoots 6.8% at 199 ms and is within 0.1% at 500 ms.

   Markup:
     <a class="itb" href="#"><span class="itb__label">How it works</span><span class="itb__icon"><svg ...></svg></span></a>
   Any inline SVG works (it is sized to the box; use fill/stroke="currentColor" to take --itb-icon-ink). <button> works too.

   Knobs (custom properties on .itb, measured defaults):
     --itb-pad-y / --itb-pad-x   10px / 20px    pill padding
     --itb-gap                   8px            label-to-icon gap
     --itb-icon / --itb-icon-on  16px / 24px    icon size at rest / taken over
     --itb-radius                12px
     --itb-bg / --itb-ink        rgb(240 230 220) / rgb(43 24 10)
     --itb-icon-ink              icon colour (defaults to --itb-ink)
     --itb-dur / --itb-ease      .5s / the spring below (cubic-bezier fallback where linear() is missing)
     --itb-font                  label font */
.itb {
  --itb-pad-y: 10px;
  --itb-pad-x: 20px;
  --itb-gap: 8px;
  --itb-icon: 16px;
  --itb-icon-on: 24px;
  --itb-radius: 12px;
  --itb-bg: rgb(240 230 220);
  --itb-ink: rgb(43 24 10);
  --itb-icon-ink: var(--itb-ink);
  --itb-dur: .5s;
  --itb-ease: cubic-bezier(.3, 1.35, .55, 1);   /* fallback: no linear() */
  --itb-font: 500 16px/1.5 ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--itb-gap);
  padding: var(--itb-pad-y) var(--itb-pad-x);
  border: 0;
  border-radius: var(--itb-radius);
  background: var(--itb-bg);
  color: var(--itb-ink);
  font: var(--itb-font);
  letter-spacing: -.04em;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
@supports (transition-timing-function: linear(0, 1)) {
  .itb {
    /* Framer spring { duration: .5, bounce: .35 }, 40 samples over .5 s */
    --itb-ease: linear(0, 0.0301, 0.1067, 0.2122, 0.3323, 0.456, 0.5753, 0.6845, 0.7804, 0.8613, 0.9269, 0.9779,
      1.0155, 1.0415, 1.0577, 1.0659, 1.0681, 1.0657, 1.0603, 1.053, 1.0448, 1.0364, 1.0283, 1.0209, 1.0145, 1.009,
      1.0047, 1.0013, 0.9988, 0.9971, 0.996, 0.9955, 0.9954, 0.9955, 0.9959, 0.9964, 0.997, 0.9976, 0.9981, 0.9986, 1);
  }
}
.itb:focus-visible { outline: 2px solid var(--itb-ink); outline-offset: 3px; }

.itb__label {
  display: block;
  transition: opacity var(--itb-dur) var(--itb-ease);
  user-select: none;
}
/* the slot keeps the icon's room in the row; the drawn icon flies */
.itb__icon {
  flex: none;
  display: block;
  width: var(--itb-icon);
  height: var(--itb-icon);
}
.itb__icon > svg, .itb__icon > img {
  position: absolute;
  top: 50%;
  left: calc(100% - var(--itb-pad-x) - var(--itb-icon) / 2);   /* centre of the slot */
  width: var(--itb-icon);
  height: var(--itb-icon);
  translate: -50% -50%;
  color: var(--itb-icon-ink);
  transition-property: left, width, height;
  transition-duration: var(--itb-dur);
  transition-timing-function: var(--itb-ease);
  pointer-events: none;
}

/* taken over: hover (real pointers), keyboard focus, press on touch, or .is-on from script */
.itb:focus-visible .itb__label, .itb.is-on .itb__label { opacity: 0; }
.itb:focus-visible .itb__icon > :is(svg, img), .itb.is-on .itb__icon > :is(svg, img) {
  left: 50%;
  width: var(--itb-icon-on);
  height: var(--itb-icon-on);
}
@media (hover: hover) {
  .itb:hover .itb__label { opacity: 0; }
  .itb:hover .itb__icon > :is(svg, img) { left: 50%; width: var(--itb-icon-on); height: var(--itb-icon-on); }
}
@media (hover: none) {
  .itb:active .itb__label { opacity: 0; }
  .itb:active .itb__icon > :is(svg, img) { left: 50%; width: var(--itb-icon-on); height: var(--itb-icon-on); }
}

/* reduced motion: the swap still happens, as a short fade with the icon placed, not flown */
@media (prefers-reduced-motion: reduce) {
  .itb__label { transition: opacity .15s linear; }
  .itb__icon > svg, .itb__icon > img { transition: none; }
}