/* Todas as classes de efeito compartilham essa base: garante que o ícone tem
   um "corpo" para animar (inline-block) e não vaza efeito para fora dele. */
[class*="badge-fx-"] {
    display: inline-block;
    position: relative;
}

/* ---------- Incomum: pulse ---------- */
/* Pulso suave e contínuo de escala — leve, não precisa de hover. */
.badge-fx-pulse {
    animation: badgeFxPulse 1.8s ease-in-out infinite;
}
@keyframes badgeFxPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.18); }
}

/* ---------- Raro: shine ---------- */
/* Uma faixa de brilho diagonal atravessa o ícone ao passar o mouse (efeito
   "card holográfico"). Em repouso fica parado — só ativa no :hover. */
.badge-fx-shine {
    overflow: hidden;
}
.badge-fx-shine::after {
    content: '';
    position: absolute;
    top: -60%;
    left: -60%;
    width: 40%;
    height: 220%;
    background: linear-gradient(
        115deg,
        transparent 0%,
        rgba(255, 255, 255, 0.85) 45%,
        rgba(255, 255, 255, 0.85) 55%,
        transparent 100%
    );
    transform: translateX(-140%) rotate(0deg);
    opacity: 0;
    pointer-events: none;
}
.badge-fx-shine:hover::after {
    opacity: 1;
    animation: badgeFxShineSweep 0.9s ease-out;
}
@keyframes badgeFxShineSweep {
    from { transform: translateX(-140%); }
    to { transform: translateX(140%); }
}

/* ---------- Épico: spin-hover ---------- */
/* Gira 360° suavemente ao passar o mouse — nome literal do que foi pedido. */
.badge-fx-spin-hover {
    transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.badge-fx-spin-hover:hover {
    transform: rotate(360deg);
}

/* ---------- Lendário: glow ---------- */
/* Brilho pulsante ao redor do ícone, ativo o tempo todo (não depende de
   hover) — usa drop-shadow (não box-shadow) para acompanhar a forma do ícone
   em vez de desenhar um quadrado atrás dele. */
.badge-fx-glow {
    animation: badgeFxGlow 2.4s ease-in-out infinite;
}
@keyframes badgeFxGlow {
    0%, 100% { filter: drop-shadow(0 0 2px currentColor); }
    50% { filter: drop-shadow(0 0 8px currentColor) drop-shadow(0 0 4px currentColor); }
}

/* ---------- Mítico: rainbow ---------- */
/* Cicla continuamente pelo espectro de cores — ignora a cor fixa (Badge.Color)
   de propósito, já que o efeito É a cor mudando. Reservar para 1-2 badges no
   máximo; perde o impacto se todo mundo tiver uma. */
.badge-fx-rainbow {
    animation: badgeFxRainbow 3s linear infinite;
}
@keyframes badgeFxRainbow {
    0%   { color: #ff3b3b; filter: drop-shadow(0 0 3px #ff3b3b); }
    16%  { color: #ff9f3b; filter: drop-shadow(0 0 3px #ff9f3b); }
    33%  { color: #f4e13b; filter: drop-shadow(0 0 3px #f4e13b); }
    50%  { color: #3bff6e; filter: drop-shadow(0 0 3px #3bff6e); }
    66%  { color: #3bb8ff; filter: drop-shadow(0 0 3px #3bb8ff); }
    83%  { color: #a23bff; filter: drop-shadow(0 0 3px #a23bff); }
    100% { color: #ff3b3b; filter: drop-shadow(0 0 3px #ff3b3b); }
}

/* Quem usa prefers-reduced-motion não vê nenhuma dessas animações — elas
   caem para o efeito "shine" (só ativo no hover, então some quando parado)
   ou simplesmente ficam estáticas, evitando desconforto para quem configurou
   o SO para reduzir movimento. */
@media (prefers-reduced-motion: reduce) {
    .badge-fx-pulse,
    .badge-fx-glow,
    .badge-fx-rainbow {
        animation: none;
    }
    .badge-fx-spin-hover {
        transition: none;
    }
    .badge-fx-shine::after {
        display: none;
    }
}