/* Username animations. The descriptor filter adds .fx-<name> + --fx-color. */
.username[class*="fx-"] { position:relative; display:inline-block; }

/* GLOW — pulsing colored halo */
@keyframes fbfx-glow { 0%,100%{ text-shadow:0 0 4px var(--fx-color),0 0 7px var(--fx-color);} 50%{ text-shadow:0 0 8px var(--fx-color),0 0 15px var(--fx-color);} }
.fx-glow { animation:fbfx-glow 1.8s ease-in-out infinite; }

/* PULSE — gentle scale + opacity breathing */
@keyframes fbfx-pulse { 0%,100%{ transform:scale(1);opacity:1;} 50%{ transform:scale(1.09);opacity:.82;} }
.fx-pulse { animation:fbfx-pulse 1.4s ease-in-out infinite; }

/* RAINBOW — animated spectrum (ignores fx-color by design) */
@keyframes fbfx-rainbow { to { background-position:200% center; } }
.fx-rainbow { background:linear-gradient(90deg,#ff004c,#ff8a00,#ffe600,#1cff3d,#00e0ff,#7a5cff,#ff004c); background-size:200% auto; -webkit-background-clip:text; background-clip:text; color:transparent !important; -webkit-text-fill-color:transparent; animation:fbfx-rainbow 3s linear infinite; }

/* SHIMMER — sweeping highlight tinted by fx-color */
@keyframes fbfx-shimmer { 0%{ background-position:-150% center; } 100%{ background-position:250% center; } }
.fx-shimmer { background:linear-gradient(100deg,var(--fx-color) 0%,#ffffff 50%,var(--fx-color) 100%); background-size:200% auto; -webkit-background-clip:text; background-clip:text; color:transparent !important; -webkit-text-fill-color:transparent; animation:fbfx-shimmer 2.6s linear infinite; }

/* SPARKLE — colored glint on the text + two twinkling star particles in fx-color */
@keyframes fbfx-sparkleglow { 0%,100%{ text-shadow:0 0 2px var(--fx-color);} 50%{ text-shadow:0 0 6px var(--fx-color),0 0 11px var(--fx-color);} }
.fx-sparkle { animation:fbfx-sparkleglow 1.6s ease-in-out infinite; }
.fx-sparkle::before, .fx-sparkle::after {
  content:""; position:absolute; width:7px; height:7px; background:var(--fx-color);
  clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);
  animation:fbfx-twinkle 1.4s ease-in-out infinite; pointer-events:none;
}
.fx-sparkle::before { top:-5px; left:-9px; }
.fx-sparkle::after  { bottom:-3px; right:-9px; animation-delay:.7s; }
@keyframes fbfx-twinkle { 0%,100%{ transform:scale(.2) rotate(0);opacity:0;} 50%{ transform:scale(1) rotate(90deg);opacity:1;} }

/* swatch previews in the ACP */
.fx-preview { display:inline-block; font-weight:bold; font-size:15px; padding:2px 10px; }