/* ─────────────────────────────────────────────────────────────
   BP Icons + Badges — animações + wrappers
   Extraído do design-handoff/guilda-bp/project/showcase.css (v14).

   Acompanha: components/icons.jsx, components/bp-badges.jsx
   Token base: tokens.css
   ───────────────────────────────────────────────────────────── */

/* ── Icon (usado como wrapper inline) ─────────────────────────── */
.bp-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  flex-shrink: 0;
}

/* ── Badge wrapper ───────────────────────────────────────────── */
.bp-badge {
  --badge-size: 32px;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  color: var(--bp-ink-dim);
  cursor: pointer;
  user-select: none;
}
.bp-badge-svg {
  display: inline-flex;
  align-items: center; justify-content: center;
  width:  calc(var(--badge-size) + 16px);
  height: calc(var(--badge-size) + 16px);
  border-radius: var(--bp-r);
  background: rgba(255,255,255,0.025);
  border: 1px solid var(--bp-line);
  border-top-color: rgba(255,255,255,0.08);
  transition:
    transform var(--bp-dur) var(--bp-ease),
    filter var(--bp-dur) var(--bp-ease),
    color var(--bp-dur) var(--bp-ease),
    border-color var(--bp-dur) var(--bp-ease),
    background var(--bp-dur) var(--bp-ease);
  color: var(--bp-ink-dim);
}
.bp-badge:hover .bp-badge-svg {
  transform: scale(1.06);
  filter: drop-shadow(0 0 10px var(--bp-blue-soft));
  border-color: var(--bp-blue-soft);
  background: var(--bp-blue-glow);
  color: var(--bp-blue-hi);
}
.bp-badge-auto:hover .bp-badge-svg   { color: var(--bp-blue-hi); }
.bp-badge-manual:hover .bp-badge-svg {
  color: var(--bp-amber);
  border-color: rgba(251,191,36,0.35);
  background: rgba(251,191,36,0.08);
  filter: drop-shadow(0 0 10px rgba(251,191,36,0.35));
}

/* ─────────────────────────────────────────────────────────────
   LENDÁRIOS: CEC + Curador — tema VERDE-CTA #35C3A4 sempre.
   Brilho permanente (não só no hover) com aura pulsante leve.
   Sobrepõe os defaults blue/amber de auto/manual. (2026-05-02)
   ───────────────────────────────────────────────────────────── */
.bp-badge-time_cec .bp-badge-svg,
.bp-badge-agente_curador .bp-badge-svg {
  color: #35C3A4;
  border-color: rgba(53, 195, 164, 0.35);
  background:
    radial-gradient(circle at center, rgba(53, 195, 164, 0.18) 0%, rgba(53, 195, 164, 0.04) 70%),
    rgba(53, 195, 164, 0.05);
  filter: drop-shadow(0 0 8px rgba(53, 195, 164, 0.45));
  animation: bpLegendaryPulse 2.8s ease-in-out infinite;
}
.bp-badge-time_cec:hover .bp-badge-svg,
.bp-badge-agente_curador:hover .bp-badge-svg {
  color: #35C3A4;
  border-color: rgba(53, 195, 164, 0.7);
  background:
    radial-gradient(circle at center, rgba(53, 195, 164, 0.30) 0%, rgba(53, 195, 164, 0.08) 70%),
    rgba(53, 195, 164, 0.10);
  filter: drop-shadow(0 0 14px rgba(53, 195, 164, 0.7));
  transform: scale(1.08);
}
@keyframes bpLegendaryPulse {
  0%, 100% {
    filter: drop-shadow(0 0 6px rgba(53, 195, 164, 0.35));
  }
  50% {
    filter: drop-shadow(0 0 14px rgba(53, 195, 164, 0.65));
  }
}
@media (prefers-reduced-motion: reduce) {
  .bp-badge-time_cec .bp-badge-svg,
  .bp-badge-agente_curador .bp-badge-svg {
    animation: none;
  }
}

/* Versão inline (.is-inline): mesmo verde brilhante, sem background. */
.bp-badge-time_cec.is-inline .bp-badge-svg,
.bp-badge-agente_curador.is-inline .bp-badge-svg {
  background: transparent;
  border: 0;
  color: #35C3A4;
  filter: drop-shadow(0 0 8px rgba(53, 195, 164, 0.55));
  animation: bpLegendaryGlowInline 2.8s ease-in-out infinite;
}
@keyframes bpLegendaryGlowInline {
  0%, 100% { filter: drop-shadow(0 0 6px rgba(53, 195, 164, 0.45)); }
  50%      { filter: drop-shadow(0 0 12px rgba(53, 195, 164, 0.75)); }
}
@media (prefers-reduced-motion: reduce) {
  .bp-badge-time_cec.is-inline .bp-badge-svg,
  .bp-badge-agente_curador.is-inline .bp-badge-svg {
    animation: none;
  }
}

/* Animação no hover dos badges CEC: estrelas piscam em sequência. */
.bp-badge-time_cec .cec-star {
  transform-origin: center;
  transition: transform 240ms var(--bp-ease);
}
.bp-badge-time_cec:hover .cec-star-c { animation: bpCecStarTwinkle 700ms ease-out; }
.bp-badge-time_cec:hover .cec-star-l { animation: bpCecStarTwinkle 700ms ease-out 120ms; }
.bp-badge-time_cec:hover .cec-star-r { animation: bpCecStarTwinkle 700ms ease-out 240ms; }
@keyframes bpCecStarTwinkle {
  0%, 100% { opacity: 0.85; transform: scale(1); }
  50%      { opacity: 1; transform: scale(1.18); }
}
.bp-badge-label {
  font-size: 11px; font-weight: 600; letter-spacing: 0.01em;
  color: var(--bp-ink-dim); text-align: center;
  white-space: nowrap;
}
.bp-badge-sub {
  font-family: var(--bp-mono);
  font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--bp-ink-faint);
}

/* Compact badge (inline em cards/comentários, sem label).
   Versão MINIMALISTA (2026-05-02): sem o "bloco quadrado" — só o
   ícone glyph com sombra sutil pra contraste. Antes tinha background
   + border + radius que parecia botão. Agora é mais discreto, deixa
   o nome do autor protagonista e os badges só decoram. */
.bp-badge.is-inline {
  gap: 0;
  cursor: default;
}
.bp-badge.is-inline .bp-badge-svg {
  width: calc(var(--badge-size) + 4px);
  height: calc(var(--badge-size) + 4px);
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
  filter: drop-shadow(0 0 6px rgba(56, 176, 255, 0.18));
}
/* Hover: deixa só um leve glow no ícone, sem mudança de box. */
.bp-badge.is-inline:hover .bp-badge-svg {
  transform: scale(1.10);
  filter: drop-shadow(0 0 10px var(--bp-blue-soft, rgba(56,176,255,0.5)));
  background: transparent;
  border-color: transparent;
}

/* ─────────────────────────────────────────────────────────────
   Animações específicas por badge (no :hover do wrapper)
   ───────────────────────────────────────────────────────────── */

/* 1. primeira_ideia — folhas desabrochando */
.bp-badge-primeira_ideia .leaf-l,
.bp-badge-primeira_ideia .leaf-r {
  transform-origin: 12px 12px;
  transform: scale(0.85);
  opacity: 0.7;
  transition: transform 240ms var(--bp-ease), opacity 240ms var(--bp-ease);
}
.bp-badge-primeira_ideia:hover .leaf-l { transform: scale(1) rotate(-4deg); opacity: 1; transition-delay: 60ms; }
.bp-badge-primeira_ideia:hover .leaf-r { transform: scale(1) rotate(4deg);  opacity: 1; transition-delay: 140ms; }

/* 2. primeira_publicada — raios pulsando */
.bp-badge-primeira_publicada .ray { transform-origin: 12px 12px; }
.bp-badge-primeira_publicada:hover .ray-n  { animation: bpRayPulse 480ms var(--bp-ease); }
.bp-badge-primeira_publicada:hover .ray-e  { animation: bpRayPulse 480ms var(--bp-ease) 60ms; }
.bp-badge-primeira_publicada:hover .ray-s  { animation: bpRayPulse 480ms var(--bp-ease) 120ms; }
.bp-badge-primeira_publicada:hover .ray-w  { animation: bpRayPulse 480ms var(--bp-ease) 180ms; }
.bp-badge-primeira_publicada:hover .ray-ne { animation: bpRayPulse 480ms var(--bp-ease) 30ms; }
.bp-badge-primeira_publicada:hover .ray-se { animation: bpRayPulse 480ms var(--bp-ease) 90ms; }
.bp-badge-primeira_publicada:hover .ray-sw { animation: bpRayPulse 480ms var(--bp-ease) 150ms; }
.bp-badge-primeira_publicada:hover .ray-nw { animation: bpRayPulse 480ms var(--bp-ease) 210ms; }
@keyframes bpRayPulse {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.15); }
  100% { transform: scale(1); }
}

/* 3. autor_produtivo — top card subindo */
.bp-badge-autor_produtivo .top-card { transition: transform 200ms var(--bp-ease); }
.bp-badge-autor_produtivo:hover .top-card { transform: translateY(-2px); }

/* 4. veterano — base com pulso */
.bp-badge-veterano .base { transition: opacity 200ms var(--bp-ease); }
.bp-badge-veterano:hover .base { animation: bpBasePulse 700ms var(--bp-ease); }
@keyframes bpBasePulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.4; transform: translateY(0.5px); }
}

/* 5. comentarista — typing dots */
.bp-badge-comentarista .dot { opacity: 0.35; transition: opacity 100ms; }
.bp-badge-comentarista:hover .dot-1 { animation: bpTyping 600ms var(--bp-ease) 0ms infinite; }
.bp-badge-comentarista:hover .dot-2 { animation: bpTyping 600ms var(--bp-ease) 150ms infinite; }
.bp-badge-comentarista:hover .dot-3 { animation: bpTyping 600ms var(--bp-ease) 300ms infinite; }
@keyframes bpTyping {
  0%, 100% { opacity: 0.35; transform: translateY(0); }
  50%      { opacity: 1;    transform: translateY(-2px); }
}

/* 6. curador_informal — anel focando */
.bp-badge-curador_informal .focus-ring {
  transform-origin: 12px 11px;
  transform: scale(1.3); opacity: 0.3;
  transition: transform 360ms var(--bp-ease), opacity 360ms var(--bp-ease);
}
.bp-badge-curador_informal .star {
  transform-origin: 12px 12px;
  transition: transform 360ms var(--bp-ease);
}
.bp-badge-curador_informal:hover .focus-ring { transform: scale(1); opacity: 0.85; }
.bp-badge-curador_informal:hover .star { transform: rotate(8deg); }

/* 7. colaborador_bp — janelas piscando */
.bp-badge-colaborador_bp .win {
  fill: currentColor; opacity: 0.25;
  transition: opacity 100ms;
}
.bp-badge-colaborador_bp:hover .win-1 { animation: bpWindow 1.4s var(--bp-ease) 0ms infinite; }
.bp-badge-colaborador_bp:hover .win-2 { animation: bpWindow 1.4s var(--bp-ease) 200ms infinite; }
.bp-badge-colaborador_bp:hover .win-3 { animation: bpWindow 1.4s var(--bp-ease) 400ms infinite; }
@keyframes bpWindow {
  0%, 70%, 100% { opacity: 0.25; }
  20%, 50%      { opacity: 0.95; }
}

/* 8. time_bp — Crachá: cordão balança + selo pulsa no hover */
.bp-badge-time_bp .tbp-cord {
  transform-origin: 12px 6px;
  transition: transform 180ms var(--bp-ease);
}
.bp-badge-time_bp .tbp-seal {
  transform-origin: 16px 19.3px;
  transition: transform 240ms var(--bp-ease);
}
.bp-badge-time_bp:hover .tbp-cord {
  animation: tbpCordSwing 1.6s var(--bp-ease) infinite;
}
.bp-badge-time_bp:hover .tbp-seal {
  animation: tbpSealPulse 1.6s var(--bp-ease) infinite;
}
@keyframes tbpCordSwing {
  0%, 100% { transform: rotate(0deg); }
  30%      { transform: rotate(-3deg); }
  70%      { transform: rotate(3deg);  }
}
@keyframes tbpSealPulse {
  0%, 100% { transform: scale(1);    }
  50%      { transform: scale(1.18); }
}

/* 9. mentor — bússola girando até o N */
.bp-badge-mentor .needle {
  transform-origin: 12px 12px;
  transform: rotate(0deg);
  transition: transform 700ms var(--bp-ease);
}
.bp-badge-mentor:hover .needle {
  animation: bpNeedleSpin 900ms var(--bp-ease);
}
@keyframes bpNeedleSpin {
  0%   { transform: rotate(0deg); }
  60%  { transform: rotate(390deg); }
  80%  { transform: rotate(355deg); }
  100% { transform: rotate(360deg); }
}

/* 10. ideia_do_mes — sweep luminoso */
.bp-badge-ideia_do_mes .sweep {
  transform: translateX(-12px);
  transition: opacity 100ms;
}
.bp-badge-ideia_do_mes:hover .sweep {
  animation: bpSweep 900ms var(--bp-ease);
}
@keyframes bpSweep {
  0%   { transform: translateX(-12px); opacity: 0; }
  20%  { opacity: 1; }
  100% { transform: translateX(12px); opacity: 0; }
}

/* 12. agente_curador — anéis convergindo */
.bp-badge-agente_curador .ring { transform-origin: 12px 12px; transition: transform 400ms var(--bp-ease); }
.bp-badge-agente_curador:hover .ring-3 { animation: bpRingConverge 500ms var(--bp-ease) 0ms; }
.bp-badge-agente_curador:hover .ring-2 { animation: bpRingConverge 500ms var(--bp-ease) 80ms; }
.bp-badge-agente_curador:hover .ring-1 { animation: bpRingConverge 500ms var(--bp-ease) 160ms; }
@keyframes bpRingConverge {
  0%   { transform: scale(1.25); opacity: 0.2; }
  60%  { transform: scale(0.85); opacity: 1; }
  100% { transform: scale(1); }
}

/* 13. avaliador — balança equilibrando + selo de aprovação pulsando.
   Travessão balança 3 vezes (oscilação amortecida). Pratos seguem por
   contra-rotação. Check no fulcro pulsa ao final. */
.bp-badge-avaliador .beam,
.bp-badge-avaliador .pan,
.bp-badge-avaliador .check,
.bp-badge-avaliador .fulcro {
  transition: transform 320ms var(--bp-ease);
}
.bp-badge-avaliador .beam   { transform-origin: 12px 6px; }
.bp-badge-avaliador .pan-l  { transform-origin: 6px 6px; }
.bp-badge-avaliador .pan-r  { transform-origin: 18px 6px; }
.bp-badge-avaliador .fulcro { transform-origin: 12px 6px; }
.bp-badge-avaliador .check  {
  transform-origin: 12px 6px;
  stroke: var(--bp-blue-hi, #38b0ff);
}

.bp-badge-avaliador:hover .beam   { animation: bpAvaliadorBeam   900ms var(--bp-ease) both; }
.bp-badge-avaliador:hover .pan-l  { animation: bpAvaliadorPanL   900ms var(--bp-ease) both; }
.bp-badge-avaliador:hover .pan-r  { animation: bpAvaliadorPanR   900ms var(--bp-ease) both; }
.bp-badge-avaliador:hover .fulcro { animation: bpAvaliadorFulcro 900ms var(--bp-ease) both; }
.bp-badge-avaliador:hover .check  { animation: bpAvaliadorCheck  900ms var(--bp-ease) both; }

@keyframes bpAvaliadorBeam {
  0%   { transform: rotate(0deg); }
  20%  { transform: rotate(-8deg); }
  45%  { transform: rotate(5deg); }
  70%  { transform: rotate(-2deg); }
  100% { transform: rotate(0deg); }
}
/* Pratos contra-rotacionam levemente pra parecer pendurados (mantêm vertical) */
@keyframes bpAvaliadorPanL {
  0%, 100% { transform: rotate(0deg); }
  20%      { transform: rotate(8deg); }
  45%      { transform: rotate(-5deg); }
  70%      { transform: rotate(2deg); }
}
@keyframes bpAvaliadorPanR {
  0%, 100% { transform: rotate(0deg); }
  20%      { transform: rotate(8deg); }
  45%      { transform: rotate(-5deg); }
  70%      { transform: rotate(2deg); }
}
@keyframes bpAvaliadorFulcro {
  0%, 100% { transform: scale(1);    opacity: 0.18; }
  70%      { transform: scale(1.25); opacity: 0.36; }
}
@keyframes bpAvaliadorCheck {
  0%, 60% { transform: scale(0.8);  opacity: 0.6; }
  85%     { transform: scale(1.15); opacity: 1; }
  100%    { transform: scale(1);    opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .bp-badge-avaliador:hover .beam,
  .bp-badge-avaliador:hover .pan-l,
  .bp-badge-avaliador:hover .pan-r,
  .bp-badge-avaliador:hover .fulcro,
  .bp-badge-avaliador:hover .check { animation: none; }
}

/* ─────────────────────────────────────────────────────────────
   Notification bell (substitui o emoji 🔔)
   ───────────────────────────────────────────────────────────── */
.bp-bell-btn {
  position: relative;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--bp-line);
  color: var(--bp-ink-dim);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: all var(--bp-dur) var(--bp-ease);
}
.bp-bell-btn:hover {
  background: var(--bp-blue-glow);
  border-color: var(--bp-blue-soft);
  color: var(--bp-blue-hi);
}
.bp-bell-btn.has-unread { color: var(--bp-blue-hi); }

/* Animação SVG dispara apenas em CLICK (classe .is-ringing setada via React
   por ~1.6s e removida). Sem loop infinito — toca uma vez por clique. */
.bp-bell-btn.is-ringing .bp-bell-svg-group {
  transform-origin: 12px 6px;
  animation: bpBellShake 800ms var(--bp-ease);
}
.bp-bell-btn.is-ringing .bp-bell-clapper {
  transform-origin: 12px 19px;
  animation: bpBellClapper 800ms var(--bp-ease);
}
@keyframes bpBellShake {
  0%, 100% { transform: rotate(0); }
  20%      { transform: rotate(-12deg); }
  40%      { transform: rotate(9deg); }
  60%      { transform: rotate(-5deg); }
  80%      { transform: rotate(3deg); }
}
@keyframes bpBellClapper {
  0%, 100% { transform: rotate(0); }
  25%      { transform: rotate(16deg); }
  50%      { transform: rotate(-14deg); }
  75%      { transform: rotate(7deg); }
}

/* Ring expansion 1x no clique (sound wave) */
.bp-bell-btn.is-ringing::after {
  content: '';
  position: absolute; inset: -2px;
  border-radius: 50%;
  border: 1.5px solid var(--bp-blue);
  opacity: 0;
  animation: bpBellRing 1000ms var(--bp-ease);
  pointer-events: none;
}
@keyframes bpBellRing {
  0%   { transform: scale(0.85); opacity: 0; }
  20%  { opacity: 0.8; }
  100% { transform: scale(1.7); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .bp-bell-btn.is-ringing .bp-bell-svg-group,
  .bp-bell-btn.is-ringing .bp-bell-clapper { animation: none; }
  .bp-bell-btn.is-ringing::after { animation: none; opacity: 0; }
}

.bp-bell-btn .bell-dot {
  position: absolute; top: 6px; right: 6px;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--bp-red);
  box-shadow: 0 0 0 2px var(--bp-bg), 0 0 8px var(--bp-red);
  animation: bpDotPulse 2s var(--bp-ease) infinite;
}
.bp-bell-btn .bell-count {
  position: absolute; top: -2px; right: -4px;
  min-width: 18px; height: 18px;
  padding: 0 4px;
  background: var(--bp-red);
  color: #fff;
  font-family: var(--bp-mono);
  font-size: 10px; font-weight: 700;
  line-height: 18px;
  text-align: center;
  border-radius: 9px;
  box-shadow: 0 0 0 2px var(--bp-bg);
  pointer-events: none;
}
@keyframes bpBellSwing {
  0%, 100% { transform: rotate(0); }
  20%      { transform: rotate(-12deg); }
  40%      { transform: rotate(10deg); }
  60%      { transform: rotate(-6deg); }
  80%      { transform: rotate(4deg); }
}
@keyframes bpDotPulse {
  0%, 100% { box-shadow: 0 0 0 2px var(--bp-bg), 0 0 0 0 rgba(232,93,93,0.5); }
  50%      { box-shadow: 0 0 0 2px var(--bp-bg), 0 0 0 6px rgba(232,93,93,0); }
}

/* ─────────────────────────────────────────────────────────────
   Premium spinner (substitui spinners legados)
   ───────────────────────────────────────────────────────────── */
.bp-spinner {
  width: 36px; height: 36px; position: relative;
  display: inline-block;
}
.bp-spinner::before, .bp-spinner::after {
  content: ''; position: absolute; inset: 0;
  border-radius: 50%;
  border: 2px solid transparent;
}
.bp-spinner::before {
  border-top-color: var(--bp-blue);
  border-right-color: var(--bp-blue);
  animation: bpSpin 800ms linear infinite;
}
.bp-spinner::after {
  inset: 6px;
  border-top-color: var(--bp-blue-hi);
  animation: bpSpin 1200ms linear infinite reverse;
  opacity: 0.6;
}
.bp-spinner-sm { width: 20px; height: 20px; }
.bp-spinner-sm::after { inset: 3px; }

/* ─────────────────────────────────────────────────────────────
   Follow bell (botão "Seguir esta ideia" no detail)
   Anima APENAS no momento do clique (classe .is-busy setada
   enquanto a request /follow está em curso, removida ao terminar).
   `is-following` é estado IDLE — só muda visual, sem animação.
   ───────────────────────────────────────────────────────────── */
.bp-follow-bell { position: relative; }

/* Durante o clique: swing do clapper + body 1x */
.bp-follow-bell.is-busy .bp-bell-clapper {
  transform-origin: 12px 19px;
  animation: bpFollowClapper 700ms var(--bp-ease);
}
.bp-follow-bell.is-busy .bp-bell-body {
  transform-origin: 12px 4px;
  animation: bpFollowBody 700ms var(--bp-ease);
}
@keyframes bpFollowClapper {
  0%, 100% { transform: rotate(0); }
  30%      { transform: rotate(14deg); }
  60%      { transform: rotate(-10deg); }
  85%      { transform: rotate(5deg); }
}
@keyframes bpFollowBody {
  0%, 100% { transform: rotate(0); }
  30%      { transform: rotate(-7deg); }
  60%      { transform: rotate(4deg); }
}

/* Ring expansion 1x no clique */
.bp-follow-bell.is-busy::after {
  content: '';
  position: absolute; inset: -2px;
  border-radius: var(--bp-r);
  border: 1.5px solid var(--bp-blue);
  opacity: 0;
  animation: bpFollowRingPulse 800ms var(--bp-ease);
  pointer-events: none;
}
@keyframes bpFollowRingPulse {
  0%   { transform: scale(0.95); opacity: 0; }
  20%  { opacity: 0.8; }
  100% { transform: scale(1.15); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .bp-follow-bell.is-busy .bp-bell-clapper,
  .bp-follow-bell.is-busy .bp-bell-body { animation: none; }
  .bp-follow-bell.is-busy::after { animation: none; opacity: 0; }
}

/* ─────────────────────────────────────────────────────────────
   Spinner premium — identidade do Curador
   Anel duplo · contra-rotação · outer 1.4s ↻ · inner 1.0s ↺
   Usado como ícone do Curador (nav, sidebar brand, empty state)
   ───────────────────────────────────────────────────────────── */
.bp-spinner-svg {
  display: inline-flex;
  align-items: center; justify-content: center;
  vertical-align: middle;
  color: var(--bp-blue);
}
.bp-spinner-svg svg { display: block; overflow: visible; }
.bp-spinner-svg .bp-spinner-ring {
  transform-origin: 18px 18px;
  transform-box: view-box;
  fill: none;
}
.bp-spinner-svg .bp-spinner-ring.outer {
  stroke: var(--bp-blue);
}
.bp-spinner-svg .bp-spinner-ring.inner {
  stroke: var(--bp-blue-hi, #38b0ff);
  opacity: 0.75;
}
/* Só roda quando o consumidor adiciona `is-spinning` (ex: curador
   pensando/streamando tokens). Sem isso fica como símbolo estático. */
.bp-spinner-svg.is-spinning .bp-spinner-ring.outer {
  animation: bpSpinnerRing 1.4s linear infinite;
}
.bp-spinner-svg.is-spinning .bp-spinner-ring.inner {
  animation: bpSpinnerRing 1.0s linear infinite reverse;
}
@keyframes bpSpinnerRing {
  to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  .bp-spinner-svg.is-spinning .bp-spinner-ring { animation: none; }
}

/* ─────────────────────────────────────────────────────────────
   Bandeirante — pioneiro do beta
   Brilho verde da Bandeira do Brasil (#009C3B) pulsa em volta;
   bandeira ondula suavemente; trilha pontilhada percorre a base;
   estrela do Cruzeiro do Sul cintila lentamente.
   ───────────────────────────────────────────────────────────── */
.bp-badge-bandeirante {
  --bnd-green:     #009C3B;       /* Verde-Bandeira oficial */
  --bnd-green-hi:  #18d05c;       /* Highlight mais luminoso */
  color: var(--bnd-green-hi);
}

/* Brilho permanente em volta de TODO o badge — cintila sempre */
.bp-badge-bandeirante .bp-badge-svg {
  filter: drop-shadow(0 0 3px rgba(0, 156, 59, 0.55));
  animation: bndGlow 2.8s ease-in-out infinite;
}

/* No hover, intensifica drasticamente o brilho */
.bp-badge-bandeirante:hover .bp-badge-svg {
  animation: bndGlowHover 1.6s ease-in-out infinite;
  color: #2eef82;
}

/* Bandeira tremulando — leve skew alternado */
.bp-badge-bandeirante .bnd-flag,
.bp-badge-bandeirante .bnd-flag-stroke {
  transform-box: fill-box;
  transform-origin: 6px 8px;
  animation: bndWave 2.6s ease-in-out infinite;
}

/* Trilha pontilhada — percorre lentamente como passos */
.bp-badge-bandeirante .bnd-trail {
  stroke-dasharray: 1.6 2;
  animation: bndTrail 4s linear infinite;
}

/* Estrela do Cruzeiro — cintila lentamente */
.bp-badge-bandeirante .bnd-star {
  animation: bndStarTwinkle 3.2s ease-in-out infinite;
  transform-origin: 19.5px 4.5px;
  transform-box: fill-box;
}

@keyframes bndGlow {
  0%, 100% {
    filter: drop-shadow(0 0 2px rgba(0, 156, 59, 0.45))
            drop-shadow(0 0 4px rgba(0, 156, 59, 0.25));
  }
  50% {
    filter: drop-shadow(0 0 6px rgba(0, 156, 59, 0.85))
            drop-shadow(0 0 12px rgba(46, 239, 130, 0.55));
  }
}

@keyframes bndGlowHover {
  0%, 100% {
    filter: drop-shadow(0 0 8px rgba(0, 156, 59, 0.85))
            drop-shadow(0 0 16px rgba(46, 239, 130, 0.65));
  }
  50% {
    filter: drop-shadow(0 0 14px rgba(46, 239, 130, 1))
            drop-shadow(0 0 22px rgba(0, 156, 59, 0.85));
  }
}

@keyframes bndWave {
  0%, 100% { transform: skewX(0deg) translateX(0); }
  50%      { transform: skewX(-4deg) translateX(0.3px); }
}

@keyframes bndTrail {
  to { stroke-dashoffset: -3.6; }
}

@keyframes bndStarTwinkle {
  0%, 100% { opacity: 0.85; transform: scale(1); }
  50%      { opacity: 1;    transform: scale(1.18); }
}

@media (prefers-reduced-motion: reduce) {
  .bp-badge-bandeirante .bp-badge-svg,
  .bp-badge-bandeirante .bnd-flag,
  .bp-badge-bandeirante .bnd-flag-stroke,
  .bp-badge-bandeirante .bnd-trail,
  .bp-badge-bandeirante .bnd-star {
    animation: none;
  }
  .bp-badge-bandeirante .bp-badge-svg {
    filter: drop-shadow(0 0 4px rgba(0, 156, 59, 0.7));
  }
}

/* ─────────────────────────────────────────────────────────────
   Hall da Fama — autores com ideia publicada
   Coroa de louros dourada com estrela cintilante.
   Brilho dourado pulsa sempre; intensifica no hover.
   ───────────────────────────────────────────────────────────── */
.bp-badge-hall_fama {
  --hf-gold:    #d4a017;       /* Dourado profundo */
  --hf-gold-hi: #ffd700;       /* Dourado vibrante (estrela) */
  color: var(--hf-gold-hi);
}

/* Brilho dourado contínuo sutil */
.bp-badge-hall_fama .bp-badge-svg {
  filter: drop-shadow(0 0 3px rgba(212, 160, 23, 0.5));
  animation: hfGlow 3s ease-in-out infinite;
}

.bp-badge-hall_fama:hover .bp-badge-svg {
  animation: hfGlowHover 1.6s ease-in-out infinite;
  color: #ffe680;
}

/* Estrela central — escala suave + brilho próprio */
.bp-badge-hall_fama .hf-star {
  transform-origin: 12px 11.5px;
  transform-box: fill-box;
  animation: hfStarPulse 2.4s ease-in-out infinite;
}
.bp-badge-hall_fama:hover .hf-star {
  animation: hfStarPulseHover 1.4s ease-in-out infinite;
}

/* Louros — leve respiração */
.bp-badge-hall_fama .hf-laurel-l,
.bp-badge-hall_fama .hf-laurel-r {
  animation: hfLaurelBreathe 4s ease-in-out infinite;
  transform-box: fill-box;
}
.bp-badge-hall_fama .hf-laurel-l { transform-origin: 5px 13px; }
.bp-badge-hall_fama .hf-laurel-r { transform-origin: 19px 13px; animation-delay: 0.4s; }

/* Folhinhas escalonadas */
.bp-badge-hall_fama .hf-leaf {
  animation: hfLeafFlicker 3.6s ease-in-out infinite;
}
.bp-badge-hall_fama .hf-leaf-l1 { animation-delay: 0.0s; }
.bp-badge-hall_fama .hf-leaf-l2 { animation-delay: 0.3s; }
.bp-badge-hall_fama .hf-leaf-l3 { animation-delay: 0.6s; }
.bp-badge-hall_fama .hf-leaf-r1 { animation-delay: 0.15s; }
.bp-badge-hall_fama .hf-leaf-r2 { animation-delay: 0.45s; }
.bp-badge-hall_fama .hf-leaf-r3 { animation-delay: 0.75s; }

@keyframes hfGlow {
  0%, 100% {
    filter: drop-shadow(0 0 2px rgba(212, 160, 23, 0.45))
            drop-shadow(0 0 4px rgba(255, 215, 0, 0.2));
  }
  50% {
    filter: drop-shadow(0 0 5px rgba(255, 215, 0, 0.7))
            drop-shadow(0 0 10px rgba(212, 160, 23, 0.4));
  }
}

@keyframes hfGlowHover {
  0%, 100% {
    filter: drop-shadow(0 0 8px rgba(255, 215, 0, 0.85))
            drop-shadow(0 0 16px rgba(212, 160, 23, 0.55));
  }
  50% {
    filter: drop-shadow(0 0 14px rgba(255, 230, 128, 1))
            drop-shadow(0 0 22px rgba(255, 215, 0, 0.7));
  }
}

@keyframes hfStarPulse {
  0%, 100% { transform: scale(1);    opacity: 1; }
  50%      { transform: scale(1.08); opacity: 0.95; }
}

@keyframes hfStarPulseHover {
  0%, 100% { transform: scale(1.05) rotate(0deg); }
  50%      { transform: scale(1.18) rotate(8deg); }
}

@keyframes hfLaurelBreathe {
  0%, 100% { transform: scale(1);    opacity: 1; }
  50%      { transform: scale(1.05); opacity: 0.85; }
}

@keyframes hfLeafFlicker {
  0%, 100% { opacity: 0.85; }
  50%      { opacity: 1;    }
}

@media (prefers-reduced-motion: reduce) {
  .bp-badge-hall_fama .bp-badge-svg,
  .bp-badge-hall_fama .hf-star,
  .bp-badge-hall_fama .hf-laurel-l,
  .bp-badge-hall_fama .hf-laurel-r,
  .bp-badge-hall_fama .hf-leaf {
    animation: none;
  }
  .bp-badge-hall_fama .bp-badge-svg {
    filter: drop-shadow(0 0 4px rgba(255, 215, 0, 0.7));
  }
}

/* ═══════════════════════════════════════════════════════════════════════
 * Steam-style novos badges — animações + cores por categoria
 * ═══════════════════════════════════════════════════════════════════════ */

/* ── Variáveis de cor por categoria ────────────────────────────── */
:root {
  --bp-cat-autoria:        #22c55e;
  --bp-cat-autoria-soft:   rgba(34, 197, 94, 0.10);
  --bp-cat-autoria-edge:   rgba(34, 197, 94, 0.42);
  --bp-cat-qualidade:      #f59e0b;
  --bp-cat-qualidade-soft: rgba(245, 158, 11, 0.10);
  --bp-cat-qualidade-edge: rgba(245, 158, 11, 0.42);
  --bp-cat-participacao:      #3b82f6;
  --bp-cat-participacao-soft: rgba(59, 130, 246, 0.10);
  --bp-cat-participacao-edge: rgba(59, 130, 246, 0.42);
  --bp-cat-rede:        #a855f7;
  --bp-cat-rede-soft:   rgba(168, 85, 247, 0.10);
  --bp-cat-rede-edge:   rgba(168, 85, 247, 0.42);
}

/* Hover por categoria — sobrepõe o bp-badge-auto:hover genérico */
.bp-badge-cat-autoria:hover .bp-badge-svg {
  color: var(--bp-cat-autoria);
  border-color: var(--bp-cat-autoria-edge);
  background: var(--bp-cat-autoria-soft);
  filter: drop-shadow(0 0 10px var(--bp-cat-autoria-edge));
}
.bp-badge-cat-qualidade:hover .bp-badge-svg {
  color: var(--bp-cat-qualidade);
  border-color: var(--bp-cat-qualidade-edge);
  background: var(--bp-cat-qualidade-soft);
  filter: drop-shadow(0 0 10px var(--bp-cat-qualidade-edge));
}
.bp-badge-cat-participacao:hover .bp-badge-svg {
  color: var(--bp-cat-participacao);
  border-color: var(--bp-cat-participacao-edge);
  background: var(--bp-cat-participacao-soft);
  filter: drop-shadow(0 0 10px var(--bp-cat-participacao-edge));
}
.bp-badge-cat-rede:hover .bp-badge-svg {
  color: var(--bp-cat-rede);
  border-color: var(--bp-cat-rede-edge);
  background: var(--bp-cat-rede-soft);
  filter: drop-shadow(0 0 10px var(--bp-cat-rede-edge));
}

/* ── Keyframes reutilizáveis ───────────────────────────────────── */
@keyframes bpPulseFade {
  0%, 100% { opacity: var(--from-op, 0.85); }
  50%      { opacity: 1; transform: scale(1.04); }
}
@keyframes bpSlowSpin {
  to { transform: rotate(360deg); }
}
@keyframes bpDrawIn {
  from { stroke-dashoffset: 100; }
  to   { stroke-dashoffset: 0; }
}
@keyframes bpStarTwinkle {
  0%, 100% { transform: scale(1) rotate(0deg);    filter: drop-shadow(0 0 0 transparent); }
  50%      { transform: scale(1.15) rotate(6deg); filter: drop-shadow(0 0 6px currentColor); }
}
@keyframes bpRippleOut {
  0%   { transform: scale(0.5); opacity: 0.8; }
  100% { transform: scale(2);   opacity: 0;   }
}

/* ── 🌱 AUTORIA ────────────────────────────────────────────────── */

/* autor_lendario: louros pulsam, estrela cintila */
.bp-badge-autor_lendario .al-laurel-l,
.bp-badge-autor_lendario .al-laurel-r {
  transition: opacity 220ms var(--bp-ease);
}
.bp-badge-autor_lendario .al-star {
  transform-origin: 12px 9px;
  transition: transform 240ms var(--bp-ease);
}
.bp-badge-autor_lendario:hover .al-star {
  animation: bpStarTwinkle 1.4s var(--bp-ease) infinite;
}
.bp-badge-autor_lendario:hover .al-laurel-l,
.bp-badge-autor_lendario:hover .al-laurel-r {
  animation: bpPulseFade 1.6s var(--bp-ease) infinite;
}

/* ── ⭐ QUALIDADE ──────────────────────────────────────────────── */

/* ouvido_afiado: arcos pulsam de fora pra dentro em sequência */
.bp-badge-ouvido_afiado .oa-arc { transform-origin: 12px 13px; }
.bp-badge-ouvido_afiado:hover .oa-arc-1 { animation: bpPulseFade 900ms var(--bp-ease) 600ms infinite; }
.bp-badge-ouvido_afiado:hover .oa-arc-2 { animation: bpPulseFade 900ms var(--bp-ease) 300ms infinite; }
.bp-badge-ouvido_afiado:hover .oa-arc-3 { animation: bpPulseFade 900ms var(--bp-ease) 0ms   infinite; }

/* voz_guilda: aurora pulsa */
.bp-badge-voz_guilda .vg-aura {
  transition: opacity 240ms var(--bp-ease);
}
.bp-badge-voz_guilda:hover .vg-aura {
  animation: bpPulseFade 1.6s var(--bp-ease) infinite;
}

/* visionario: prisma rotaciona (contínuo) */
.bp-badge-visionario .vis-prism {
  transform-origin: 12px 12px;
  transition: transform 400ms var(--bp-ease);
}
.bp-badge-visionario:hover .vis-prism {
  animation: bpSlowSpin 4s linear infinite;
}

/* ressonancia: ondas expandem em pulsos */
.bp-badge-ressonancia .rs-w { transform-origin: 12px 12px; }
.bp-badge-ressonancia:hover .rs-w-1 { animation: bpPulseFade 900ms var(--bp-ease) 0ms   infinite; }
.bp-badge-ressonancia:hover .rs-w-2 { animation: bpPulseFade 900ms var(--bp-ease) 200ms infinite; }
.bp-badge-ressonancia:hover .rs-w-3 { animation: bpPulseFade 900ms var(--bp-ease) 400ms infinite; }

/* aprovacao_unanime: 5 checks aparecem em cascade */
.bp-badge-aprovacao_unanime .au-c {
  opacity: 0;
  transition: opacity 200ms var(--bp-ease);
}
.bp-badge-aprovacao_unanime:hover .au-c { animation: bpPulseFade 1.4s var(--bp-ease) infinite; }
.bp-badge-aprovacao_unanime:hover .au-c-1 { animation-delay: 0ms; }
.bp-badge-aprovacao_unanime:hover .au-c-2 { animation-delay: 120ms; }
.bp-badge-aprovacao_unanime:hover .au-c-3 { animation-delay: 240ms; }
.bp-badge-aprovacao_unanime:hover .au-c-4 { animation-delay: 360ms; }
.bp-badge-aprovacao_unanime:hover .au-c-5 { animation-delay: 480ms; }

/* combo_perfeito: estrelas giram em direções opostas, halo pulsa */
.bp-badge-combo_perfeito .cp-star-a {
  transform-origin: 12px 12px;
  transition: transform 600ms var(--bp-ease);
}
.bp-badge-combo_perfeito .cp-star-b {
  transform-origin: 12px 12px;
  transition: transform 600ms var(--bp-ease);
}
.bp-badge-combo_perfeito .cp-halo {
  transform-origin: 12px 12px;
  transition: opacity 200ms var(--bp-ease);
}
.bp-badge-combo_perfeito:hover .cp-star-a { animation: bpSlowSpin 8s linear infinite; }
.bp-badge-combo_perfeito:hover .cp-star-b { animation: bpSlowSpin 8s linear reverse infinite; }
.bp-badge-combo_perfeito:hover .cp-halo  { animation: bpPulseFade 1.6s var(--bp-ease) infinite; }

/* ── 💬 PARTICIPAÇÃO ─────────────────────────────────────────── */

/* primeiro_voto: cédula desliza pra dentro da urna */
.bp-badge-primeiro_voto .pv-ballot {
  transition: transform 400ms var(--bp-ease);
}
.bp-badge-primeiro_voto:hover .pv-ballot {
  transform: translateY(2px);
}

/* curador_avancado: check desenha em entrada */
.bp-badge-curador_avancado .ca-check {
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  transition: stroke-dashoffset 0ms;
}
.bp-badge-curador_avancado:hover .ca-check {
  animation: bpDrawIn 600ms var(--bp-ease) forwards;
}

/* eleitor_lendario: chama tremula */
.bp-badge-eleitor_lendario .el-flame {
  transform-origin: 8px 6px;
  transition: transform 200ms var(--bp-ease);
}
.bp-badge-eleitor_lendario:hover .el-flame {
  animation: elFlameFlicker 500ms var(--bp-ease) infinite;
}
@keyframes elFlameFlicker {
  0%, 100% { transform: scale(1) rotate(-2deg);   opacity: 1;   }
  33%      { transform: scale(1.08) rotate(3deg); opacity: 0.85;}
  66%      { transform: scale(0.96) rotate(-1deg);opacity: 0.95;}
}

/* primeira_voz: balão sobe + bounce sutil */
.bp-badge-primeira_voz .pvz-bubble {
  transform-origin: 12px 12px;
  transition: transform 300ms var(--bp-ease);
}
.bp-badge-primeira_voz:hover .pvz-bubble {
  animation: pvzBounce 700ms var(--bp-ease);
}
@keyframes pvzBounce {
  0%   { transform: translateY(2px); }
  60%  { transform: translateY(-2px); }
  100% { transform: translateY(0); }
}

/* voz_comunidade: ondas pulsam em sequência saindo do megafone */
.bp-badge-voz_comunidade .vc-w { transform-origin: 11px 12px; }
.bp-badge-voz_comunidade:hover .vc-w-1 { animation: bpPulseFade 900ms var(--bp-ease) 0ms   infinite; }
.bp-badge-voz_comunidade:hover .vc-w-2 { animation: bpPulseFade 900ms var(--bp-ease) 200ms infinite; }
.bp-badge-voz_comunidade:hover .vc-w-3 { animation: bpPulseFade 900ms var(--bp-ease) 400ms infinite; }

/* conselheiro: pergaminho desenrola */
.bp-badge-conselheiro .cs-scroll {
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
}
.bp-badge-conselheiro:hover .cs-scroll {
  animation: bpDrawIn 700ms var(--bp-ease) forwards;
}

/* ── 🤝 REDE ─────────────────────────────────────────────────── */

/* conectado: link pulsa, ripple sai do meio */
.bp-badge-conectado .cn-link {
  transition: stroke 200ms var(--bp-ease);
}
.bp-badge-conectado .cn-pulse {
  transform-origin: 12px 12px;
  transition: opacity 200ms var(--bp-ease);
}
.bp-badge-conectado:hover .cn-pulse {
  animation: bpRippleOut 1.2s var(--bp-ease) infinite;
}

/* influenciador: anel pulsa */
.bp-badge-influenciador .if-ring {
  transform-origin: 12px 12px;
  transition: transform 240ms var(--bp-ease);
}
.bp-badge-influenciador:hover .if-ring {
  animation: bpRippleOut 1.4s var(--bp-ease) infinite;
}

/* lider_opiniao: linha desenha + estrela cintila */
.bp-badge-lider_opiniao .lo-line {
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
}
.bp-badge-lider_opiniao .lo-star {
  transform-origin: 18px 6px;
  transition: transform 240ms var(--bp-ease);
}
.bp-badge-lider_opiniao:hover .lo-line {
  animation: bpDrawIn 700ms var(--bp-ease) forwards;
}
.bp-badge-lider_opiniao:hover .lo-star {
  animation: bpStarTwinkle 1.4s var(--bp-ease) 700ms infinite;
}

/* embaixador: asas batem */
.bp-badge-embaixador .emb-wing { transition: transform 280ms var(--bp-ease); }
.bp-badge-embaixador .emb-wl { transform-origin: 11px 12px; }
.bp-badge-embaixador .emb-wr { transform-origin: 13px 12px; }
.bp-badge-embaixador:hover .emb-wl { animation: embFlapL 700ms var(--bp-ease) infinite; }
.bp-badge-embaixador:hover .emb-wr { animation: embFlapR 700ms var(--bp-ease) infinite; }
@keyframes embFlapL {
  0%, 100% { transform: rotate(0deg)  scaleY(1);   }
  50%      { transform: rotate(-8deg) scaleY(0.9); }
}
@keyframes embFlapR {
  0%, 100% { transform: rotate(0deg)  scaleY(1);   }
  50%      { transform: rotate(8deg)  scaleY(0.9); }
}

/* ── BP logo (time_bp) — leve glow azul mantido pela cor padrão ─ */
.bp-badge-time_bp:hover .bp-badge-svg {
  /* mantém comportamento default azul (já é a identidade BP) */
}

/* ── Reduced motion ──────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .bp-badge-autor_lendario .al-star,
  .bp-badge-autor_lendario .al-laurel-l,
  .bp-badge-autor_lendario .al-laurel-r,
  .bp-badge-ouvido_afiado .oa-arc,
  .bp-badge-voz_guilda .vg-aura,
  .bp-badge-visionario .vis-prism,
  .bp-badge-ressonancia .rs-w,
  .bp-badge-aprovacao_unanime .au-c,
  .bp-badge-combo_perfeito .cp-star-a,
  .bp-badge-combo_perfeito .cp-star-b,
  .bp-badge-combo_perfeito .cp-halo,
  .bp-badge-primeiro_voto .pv-ballot,
  .bp-badge-curador_avancado .ca-check,
  .bp-badge-eleitor_lendario .el-flame,
  .bp-badge-primeira_voz .pvz-bubble,
  .bp-badge-voz_comunidade .vc-w,
  .bp-badge-conselheiro .cs-scroll,
  .bp-badge-conectado .cn-pulse,
  .bp-badge-influenciador .if-ring,
  .bp-badge-lider_opiniao .lo-line,
  .bp-badge-lider_opiniao .lo-star,
  .bp-badge-embaixador .emb-wing {
    animation: none !important;
  }
}