/* ===== username effects ===== */

/* glow */
.fx-glow {
  color: #fff;
  text-shadow: 0 0 10px var(--accent), 0 0 30px var(--accent), 0 0 60px var(--accent);
  animation: glowPulse 2.4s ease-in-out infinite;
}
@keyframes glowPulse {
  50% { text-shadow: 0 0 6px var(--accent), 0 0 18px var(--accent), 0 0 36px var(--accent); }
}

/* rainbow */
.fx-rainbow {
  background: linear-gradient(90deg, #ff004c, #ff8a00, #ffe600, #2bff4d, #00cfff, #7b2bff, #ff004c);
  background-size: 400% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: rainbowSlide 4s linear infinite;
}
@keyframes rainbowSlide {
  to { background-position: 400% 0; }
}

/* gradient */
.fx-gradient {
  background: linear-gradient(120deg, var(--accent), #ffffff, var(--accent));
  background-size: 250% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: gradSlide 5s ease infinite;
}
@keyframes gradSlide {
  0%, 100% { background-position: 0% 0; }
  50% { background-position: 100% 0; }
}

/* sparkle (JS spawns particles, base shimmer here) */
.fx-sparkle {
  color: #fff;
  text-shadow: 0 0 12px var(--accent);
  position: relative;
}
.sparkle-bit {
  position: absolute;
  width: 4px;
  height: 4px;
  background: #fff;
  border-radius: 50%;
  pointer-events: none;
  box-shadow: 0 0 8px 2px var(--accent);
  animation: sparkleFly 0.9s ease-out forwards;
}
@keyframes sparkleFly {
  0% { opacity: 1; transform: translate(0, 0) scale(1); }
  100% { opacity: 0; transform: translate(var(--sx), var(--sy)) scale(0); }
}

/* glitch */
.fx-glitch {
  position: relative;
  color: #fff;
}
.fx-glitch::before,
.fx-glitch::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.fx-glitch::before {
  color: #0ff;
  animation: glitchA 2.5s infinite linear alternate-reverse;
  clip-path: inset(20% 0 40% 0);
  left: 2px;
}
.fx-glitch::after {
  color: #f0f;
  animation: glitchB 3s infinite linear alternate-reverse;
  clip-path: inset(50% 0 10% 0);
  left: -2px;
}
@keyframes glitchA {
  0% { clip-path: inset(10% 0 60% 0); transform: translate(-2px, 1px); }
  20% { clip-path: inset(80% 0 5% 0); transform: translate(2px, -1px); }
  40% { clip-path: inset(30% 0 50% 0); transform: translate(-1px, 2px); }
  60% { clip-path: inset(60% 0 20% 0); transform: translate(1px, -2px); }
  80% { clip-path: inset(5% 0 75% 0); transform: translate(2px, 1px); }
  100% { clip-path: inset(45% 0 35% 0); transform: translate(-2px, -1px); }
}
@keyframes glitchB {
  0% { clip-path: inset(70% 0 10% 0); transform: translate(2px, -1px); }
  25% { clip-path: inset(15% 0 65% 0); transform: translate(-2px, 1px); }
  50% { clip-path: inset(55% 0 25% 0); transform: translate(1px, 2px); }
  75% { clip-path: inset(25% 0 55% 0); transform: translate(-1px, -2px); }
  100% { clip-path: inset(40% 0 40% 0); transform: translate(2px, 2px); }
}

/* shake */
.fx-shake {
  color: #fff;
  text-shadow: 0 0 14px var(--accent);
  animation: nameShake 0.4s linear infinite;
  display: inline-block;
}
@keyframes nameShake {
  0%, 100% { transform: translate(0, 0); }
  25% { transform: translate(1.5px, -1px); }
  50% { transform: translate(-1.5px, 1px); }
  75% { transform: translate(1px, 1.5px); }
}

/* neon flicker */
.fx-neon {
  color: #fff;
  text-shadow: 0 0 8px #fff, 0 0 20px var(--accent), 0 0 40px var(--accent), 0 0 80px var(--accent);
  animation: neonFlicker 3.5s linear infinite;
}
@keyframes neonFlicker {
  0%, 18%, 22%, 25%, 53%, 57%, 100% {
    text-shadow: 0 0 8px #fff, 0 0 20px var(--accent), 0 0 40px var(--accent), 0 0 80px var(--accent);
    opacity: 1;
  }
  20%, 24%, 55% { text-shadow: none; opacity: 0.6; }
}

/* none */
.fx-none { color: #fff; }