/* Eyebrow chip: small pill with an optional pulse-dot prefix.
   Used on heroes and section headers to label the surface. */

.eyebrow-chip {
  /* inline-flex + fit-content shields the chip from flex parents
     that default to align-items: stretch, so it always hugs its
     content width instead of expanding to the column. */
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  width: fit-content;
  max-width: max-content;
  gap: 0.5rem;
  padding: 0.375rem 0.875rem;
  border: 1px solid var(--color-border);
  border-radius: 9999px;
  font-size: 0.6875rem;
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-muted-foreground);
  background: transparent;
}

/* Pulse dot: a small filled circle that softly breathes.
   Pairs with .eyebrow-chip but also works standalone inline. */

.pulse-dot {
  display: inline-block;
  width: 0.375rem;
  height: 0.375rem;
  border-radius: 9999px;
  background: var(--brand-teal);
  box-shadow: 0 0 0 0 color-mix(in oklch, var(--brand-teal) 50%, transparent);
  animation: pulse-dot 2.4s var(--ease) infinite;
}

@keyframes pulse-dot {
  0%   { box-shadow: 0 0 0 0 color-mix(in oklch, var(--brand-teal) 45%, transparent); }
  70%  { box-shadow: 0 0 0 6px color-mix(in oklch, var(--brand-teal) 0%, transparent); }
  100% { box-shadow: 0 0 0 0 color-mix(in oklch, var(--brand-teal) 0%, transparent); }
}

@media (prefers-reduced-motion: reduce) {
  .pulse-dot { animation: none; }
}