/* ============================================================
   Flow button — outlined pill that morphs + fills on hover
   (ported from the FlowButton React component)

   Default state = a clean STATIC pill (label + arrow). This is what
   touch devices get, so the hover-only machinery (sliding arrows,
   expanding circle, offset label) can never half-fire on a tap and
   leave a stray blue dot. The animated morph is layered back on only
   for real pointer devices via @media (hover: hover).
   ============================================================ */
.fbtn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  overflow: hidden; border-radius: 100px; border: 1px solid rgba(255,255,255,0.6);
  background: rgba(255,255,255,0.42);
  -webkit-backdrop-filter: blur(10px) saturate(1.5); backdrop-filter: blur(10px) saturate(1.5);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.65), 0 8px 22px -16px rgba(12,20,34,0.4);
  padding: 0.85em 1.9em; font-size: var(--t-small);
  font-weight: 600; letter-spacing: 0.01em; color: var(--ink); cursor: pointer;
}
.fbtn:active { transform: scale(.97); }

/* static default: label + right arrow, no circle */
.fbtn__text { position: relative; z-index: 1; }
.fbtn__arrow { width: 16px; height: 16px; z-index: 9; fill: none; stroke: currentColor; stroke-width: 2; flex: 0 0 auto; }
.fbtn__arrow--l { display: none; }
.fbtn__circle { display: none; }

/* accent primary reads as primary without needing a hover fill */
.fbtn--accent {
  background: linear-gradient(160deg, #4aa0ff, #0a6ff0);
  color: #fff; border-color: rgba(255,255,255,0.28);
  box-shadow: 0 10px 24px -12px rgba(10,111,240,0.7), inset 0 1px 0 rgba(255,255,255,0.4);
}
.fbtn--accent .fbtn__arrow { stroke: #fff; }

/* big variant for mobile sheet */
.fbtn--lg { padding: 1.05em 2.2em; font-size: 1rem; }

/* ============================================================
   Pointer devices — restore the animated hover morph
   ============================================================ */
@media (hover: hover) {
  .fbtn {
    gap: 4px;
    transition: border-color .6s cubic-bezier(.23,1,.32,1),
                color .6s cubic-bezier(.23,1,.32,1),
                border-radius .6s cubic-bezier(.23,1,.32,1);
  }
  .fbtn:hover { color: #fff; border-radius: 14px; border-color: rgba(255,255,255,0.5); }
  .fbtn:active { transform: scale(.96); }

  .fbtn__text { transform: translateX(-12px); transition: transform .8s ease; }
  .fbtn:hover .fbtn__text { transform: translateX(12px); }

  .fbtn__arrow { position: absolute; stroke: var(--ink); transition: all .8s cubic-bezier(.34,1.56,.64,1); }
  .fbtn__arrow--l { display: block; left: -25%; }
  .fbtn:hover .fbtn__arrow--l { left: 16px; stroke: #fff; }
  .fbtn__arrow--r { right: 16px; }
  .fbtn:hover .fbtn__arrow--r { right: -25%; stroke: #fff; }

  .fbtn__circle { display: block; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
    width: 16px; height: 16px; border-radius: 50%; opacity: 0; z-index: 0;
    background: linear-gradient(160deg, rgba(40,66,99,0.9), rgba(12,20,34,0.96));
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.32);
    transition: width .8s cubic-bezier(.19,1,.22,1),
                height .8s cubic-bezier(.19,1,.22,1),
                opacity .8s cubic-bezier(.19,1,.22,1); }
  .fbtn:hover .fbtn__circle { width: 260px; height: 260px; opacity: 1; }

  /* on pointer devices the accent CTA rests neutral-glass and only fills blue on hover */
  .fbtn--accent {
    background: rgba(255,255,255,0.42); color: var(--ink); border-color: rgba(255,255,255,0.6);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.65), 0 8px 22px -16px rgba(12,20,34,0.4);
  }
  .fbtn--accent .fbtn__arrow { stroke: var(--ink); }
  .fbtn--accent .fbtn__circle { background: linear-gradient(160deg, rgba(64,153,255,0.95), rgba(10,111,240,0.96)); }
  .fbtn--accent:hover { color: #fff; }
  .fbtn--accent:hover .fbtn__arrow--l, .fbtn--accent:hover .fbtn__arrow--r { stroke: #fff; }
}

/* on dark bands */
.on-dark .fbtn { border-color: rgba(238,241,248,0.4); color: var(--dark-text); }
.on-dark .fbtn .fbtn__arrow { stroke: var(--dark-text); }
@media (hover: hover) {
  .on-dark .fbtn__circle { background: #fff; }
  .on-dark .fbtn:hover { color: var(--ink); }
  .on-dark .fbtn:hover .fbtn__arrow--l, .on-dark .fbtn:hover .fbtn__arrow--r { stroke: var(--ink); }
}