/* Minimalist follow button styles with micro-interactions */

/* Base button used for both profile and mini buttons */
.hfw-follow-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  color: #111;
  border: 1px solid rgba(16,24,40,0.06);
  padding: 8px 12px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.95rem;
  cursor: pointer;
  user-select: none;
  transition: transform 200ms ease, background-color 180ms ease, color 180ms ease, box-shadow 180ms ease;
  will-change: transform;
  -webkit-tap-highlight-color: transparent;
}

/* icon circle */
.hfw-follow-btn .hfw-icon {
  width: 28px;
  height: 28px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  background: #f3f4f6;
  color:#111;
  font-size: 0.95rem;
  transition: transform 200ms ease, background 180ms ease, color 180ms ease;
}

/* Following state */
.hfw-follow-btn.following {
  background: #111;
  color: #fff;
  box-shadow: 0 8px 20px rgba(2,6,23,0.12);
  transform: translateY(-2px);
}
.hfw-follow-btn.following .hfw-icon { background: transparent; color: #fff; transform: scale(1.06); }

/* Small variant for gallery cards */
.hfw-follow-btn.hfw-mini { padding: 6px 8px; font-size: 0.85rem; }
.hfw-follow-btn.hfw-mini .hfw-icon { width:22px; height:22px; font-size:0.85rem }

/* subtle press animation */
.hfw-follow-btn:active { transform: translateY(0); }

/* pulse when followed (one-time) */
@keyframes hfw-pulse {
  0% { box-shadow: 0 0 0 0 rgba(99,102,241,0.18); }
  70% { box-shadow: 0 0 0 10px rgba(99,102,241,0); }
  100% { box-shadow: 0 0 0 0 rgba(99,102,241,0); }
}
.hfw-follow-btn.pulse { animation: hfw-pulse 520ms ease-out; }

/* simple checkmark transition for the icon */
.hfw-icon svg { width: 14px; height: 14px; display:block; }

/* utilities */
.hfw-fade { transition: opacity 160ms ease; }

/* accessible focus state */
.hfw-follow-btn:focus { outline: 3px solid rgba(99,102,241,0.12); outline-offset: 2px; }