/* ============================================================
   .hero-pill — STANDARD CTA BUTTON for the Collective Edge site.
   Outline pill on dark backgrounds. On hover, a white fill slides
   in from the left and the text inverts to black; an arrow clone
   slides in from the left as the original slides out the right.

   Works as both <button> and <a>. Shared by the landing page
   (linked from public/index.html) and any Astro-built page
   (linked from src/layouts/*Layout.astro).
   ============================================================ */

.hero-pill {
  appearance: none;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.45);
  color: #fff;
  cursor: pointer;
  font: inherit;
  text-align: left;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  gap: 28px;
  padding: 0 32px;
  height: 56px;
  border-radius: 999px;
  text-decoration: none;
  transition: border-color 400ms cubic-bezier(0.22, 0.61, 0.36, 1),
              color 400ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.hero-pill-fill {
  position: absolute;
  inset: 0;
  background: #fff;
  transform: translateX(-101%);
  transition: transform 600ms cubic-bezier(0.7, 0, 0.2, 1);
  z-index: -1;
  border-radius: inherit;
}

.hero-pill:hover { color: #000; border-color: #fff; }
.hero-pill:hover .hero-pill-fill { transform: translateX(0); }
.hero-pill:active { transform: scale(0.985); }
.hero-pill:focus-visible {
  outline: 1px solid #fff;
  outline-offset: 6px;
}

.hero-pill-text {
  font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  font-style: normal;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 18px;
  line-height: 1;
  white-space: nowrap;
}

.hero-pill-arrow {
  width: 44px;
  height: 12px;
  align-self: center;
  overflow: hidden;
  position: relative;
}
.hero-pill-arrow svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 500ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
/* Two-arrow trick: clone slides in from the left as the original
   slides out the right. The clone is an inline-SVG background so
   we don't need duplicated markup. */
.hero-pill-arrow::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 12' fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><line x1='0' y1='6' x2='36' y2='6'/><polyline points='30,1 36,6 30,11'/></svg>");
  background-repeat: no-repeat;
  background-size: contain;
  transform: translateX(-110%);
  transition: transform 500ms cubic-bezier(0.22, 0.61, 0.36, 1);
  color: inherit;
}
.hero-pill:hover .hero-pill-arrow svg { transform: translateX(110%); }
.hero-pill:hover .hero-pill-arrow::after { transform: translateX(0); }

/* Optional press-down for special click animations (mounted by JS). */
.hero-pill.is-pressing {
  transition: transform 200ms cubic-bezier(0.6, 0, 0.3, 1);
  transform: scale(0.94);
}