/* site-btn-glow.css: the .btn-glow component block, extracted unmodified
   from site/_assets/components.css (that file is ~100KB, mostly cards/
   badges/heroes the blog doesn't use; this is the one component the
   header's "Let's Talk" button needs). Source lines: the ".btn-glow"
   block in site/_assets/components.css, verbatim. */

/* ---- .btn-glow — multi-layer Framer-style CTA ----
   Used for the header "Let's Talk" pill and the hero "Book a strategy call"
   button. Replicates Framer's button stack 1:1 — including the SIGNATURE
   detail: the colored gradient's anchor TRAVELS around the button perimeter
   on a slow loop (~3s), so the bright hot-spot rotates and the eye reads it
   as a continuous warm outline rather than a static corner glow. Without
   this rotation the button looks "broken" — that was the missing piece.

   Stack (DOM order = paint order): Glow → Stroke → Fill (inset 1px) →
   Label + Icon-flip. On hover both gradients balloon (75% / 50%) and the
   arrow track slides up 14px to reveal a second arrow. */

/* @property registration makes percentage custom-properties animatable —
   you can't natively keyframe a radial-gradient's `at X% Y%`, but you CAN
   keyframe (and transition) registered custom properties used inside it.
   Anchor properties drive the traveling-light keyframes; size properties
   are transitioned on hover so the gradient blooms outward from the
   anchor's last position rather than snapping. */
@property --btn-gx {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 50%;
}
@property --btn-gy {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 0%;
}
@property --btn-sx {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 17.5%;       /* stroke gradient width at idle */
}
@property --btn-sy {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 44.7%;       /* stroke gradient height at idle */
}
@property --btn-glx {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 25%;         /* glow gradient width at idle */
}
@property --btn-gly {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 38%;         /* glow gradient height at idle */
}

.btn-glow {
  --btn-accent: rgb(158, 100, 46);          /* default orange (Let's Talk) */
  --btn-fill: rgb(23, 23, 23);
  --btn-pad-x: 21px;
  --btn-pad-y: 8px;
  --btn-min-h: 38px;                        /* matches Framer Let's Talk */
  --btn-min-w: 135px;                       /* matches Framer Let's Talk */
  --btn-radius: 7px;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: var(--btn-min-h);
  min-width: var(--btn-min-w);
  padding: var(--btn-pad-y) var(--btn-pad-x);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: 14px;                          /* was 12 — too narrow in Figtree */
  font-weight: 500;                         /* was 400 — Figtree at 12 read thin */
  line-height: 1.6;                         /* was 1 — label was vertically squashed */
  text-decoration: none;
  border-radius: var(--btn-radius);
  isolation: isolate;
  overflow: visible;
  box-sizing: border-box;
  transition: transform 280ms var(--ease-out-expo);
}
.btn-glow--yellow {
  --btn-accent: rgb(243, 178, 12);          /* Book a call yellow */
}
.btn-glow--lg {
  --btn-pad-y: 10px;
  --btn-min-h: 47px;                        /* matches Framer Book a call */
  --btn-min-w: 170px;                       /* a bit wider for longer label */
  font-size: 15px;
}
.btn-glow__stroke,
.btn-glow__glow,
.btn-glow__fill {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
}
.btn-glow__glow {
  z-index: 0;
  background: radial-gradient(
    var(--btn-glx) var(--btn-gly) at var(--btn-gx) var(--btn-gy),
    var(--btn-accent) 0%,
    transparent 100%);
  filter: blur(15px);
  animation: btnGlowTravel 3s linear infinite;
  transition: --btn-glx 600ms cubic-bezier(0.33, 0, 0.4, 1),
              --btn-gly 600ms cubic-bezier(0.33, 0, 0.4, 1);
}
.btn-glow__stroke {
  z-index: 1;
  background: radial-gradient(
    var(--btn-sx) var(--btn-sy) at var(--btn-gx) var(--btn-gy),
    var(--btn-accent) 0%,
    transparent 100%);
  animation: btnGlowTravel 3s linear infinite;
  transition: --btn-sx 600ms cubic-bezier(0.33, 0, 0.4, 1),
              --btn-sy 600ms cubic-bezier(0.33, 0, 0.4, 1);
}
.btn-glow__fill {
  z-index: 2;
  inset: 1px;
  background: var(--btn-fill);
}
.btn-glow__label,
.btn-glow__icon {
  position: relative;
  z-index: 3;
}
.btn-glow__icon {
  width: 14px;
  height: 14px;
  display: inline-block;
  overflow: hidden;
  flex-shrink: 0;
}
.btn-glow__icon-track {
  position: relative;
  width: 14px;
  height: 28px;                              /* two icons stacked */
  display: block;
  transition: transform 360ms cubic-bezier(0.16, 1, 0.3, 1);
}
.btn-glow__icon svg {
  display: block;
  width: 14px;
  height: 14px;
}

/* Anchor traces the perimeter clockwise: top → right → bottom → left → top.
   Linear timing keeps the visual speed consistent around the rectangle. */
@keyframes btnGlowTravel {
  0%   { --btn-gx: 50%;   --btn-gy: 0%;   }   /* top-center */
  25%  { --btn-gx: 100%;  --btn-gy: 50%;  }   /* right-middle */
  50%  { --btn-gx: 50%;   --btn-gy: 100%; }   /* bottom-center */
  75%  { --btn-gx: 0%;    --btn-gy: 50%;  }   /* left-middle */
  100% { --btn-gx: 50%;   --btn-gy: 0%;   }   /* back to top */
}

/* On hover Framer freezes the traveling light at the button center and
   smoothly expands the gradient size — the bright spot stops orbiting and
   blooms outward from middle, lighting up the whole button. Match that:
   cancel the travel keyframe (releasing --btn-gx/--btn-gy back to base
   declarations) so the anchor transitions to 50%/50%, AND transition the
   size custom-properties to their expanded values. The 380ms ease-out
   timing covers both — light grows from middle toward the edges. */
.btn-glow:hover .btn-glow__stroke,
.btn-glow:hover .btn-glow__glow {
  animation: none;
  --btn-gx: 50%;
  --btn-gy: 50%;
  transition: --btn-gx 600ms cubic-bezier(0.33, 0, 0.4, 1),
              --btn-gy 600ms cubic-bezier(0.33, 0, 0.4, 1),
              --btn-sx 600ms cubic-bezier(0.33, 0, 0.4, 1),
              --btn-sy 600ms cubic-bezier(0.33, 0, 0.4, 1),
              --btn-glx 600ms cubic-bezier(0.33, 0, 0.4, 1),
              --btn-gly 600ms cubic-bezier(0.33, 0, 0.4, 1);
}
.btn-glow:hover .btn-glow__stroke {
  --btn-sx: 75%;
  --btn-sy: 181%;
}
.btn-glow:hover .btn-glow__glow {
  --btn-glx: 50%;
  --btn-gly: 100%;
}
.btn-glow:hover .btn-glow__icon-track {
  transform: translateY(-14px);
}
.btn-glow:focus-visible {
  outline: 2px solid var(--btn-accent);
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  .btn-glow,
  .btn-glow__stroke,
  .btn-glow__glow,
  .btn-glow__icon-track {
    animation: none;
    transition: none;