:root {
  --username-color: #fff;
  --username-glow: #bf0000;
  --username-shadow: rgba(255,255,255,0.3);
}

/* =======================
   Username / Title Effects
   ======================= */

/* Simple Glow */
.username-glow {
  color: var(--username-color);
  text-shadow: 0 0 5px var(--username-glow), 0 0 10px var(--username-glow);
  transition: 0.3s ease;
}

.username-glow:hover {
  text-shadow: 0 0 10px var(--username-glow), 0 0 20px var(--username-glow);
}

/* Rainbow Cycle */
.username-rainbow {
  font-weight: 700;
  background: linear-gradient(90deg, red, orange, yellow, green, blue, indigo, violet);
  background-size: 400% 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: rainbowText 5s linear infinite;
}

@keyframes rainbowText {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Pulse Shadow */
.username-pulse {
  color: var(--username-color);
  text-shadow: 0 0 5px var(--username-shadow);
  animation: pulseShadow 2s ease-in-out infinite;
}

@keyframes pulseShadow {
  0%, 100% { text-shadow: 0 0 5px var(--username-shadow); }
  50% { text-shadow: 0 0 15px var(--username-shadow); }
}

/* Neon Flicker */
.username-neon {
  color: var(--username-color);
  text-shadow:
    0 0 5px var(--username-glow),
    0 0 10px var(--username-glow),
    0 0 20px var(--username-glow),
    0 0 40px var(--username-glow);
  animation: neonFlicker 1.5s infinite;
}

@keyframes neonFlicker {
  0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% {
    text-shadow: 0 0 5px var(--username-glow),
                 0 0 10px var(--username-glow),
                 0 0 20px var(--username-glow),
                 0 0 40px var(--username-glow);
  }
  20%, 22%, 24%, 55% { text-shadow: none; }
}