/* ===== Administrator – Bright‑Red base with moving white shine ===== */
.administrator {
    font-weight: bold;
    font-style: italic;
    /* Transparent text so the gradient fills the glyphs */
    color: transparent;
    /* Gradient: solid red everywhere, except a moving white band */
    background: linear-gradient(
        90deg,
        rgba(255,0,0,1)   0%,   /* red start */
        rgba(255,0,0,1)   40%,  /* still red */
        rgba(255,255,255,1) 40%,/* start of white highlight */
        rgba(255,255,255,1) 55%,/* end of white highlight */
        rgba(255,0,0,1)   55%,  /* back to red */
        rgba(255,0,0,1)  100%   /* red end */
    );
    /* Make the gradient three times wider than the element so the white band can travel */
    background-size: 300% 100%;
    /* Clip the gradient to the text shape */
    -webkit-background-clip: text;
    background-clip: text;
    /* Animate the background position to move the highlight */
    animation: adminShine 3s linear infinite;
    /* Thin dark stroke + subtle shadow keep the text crisp on any bg */
    -webkit-text-stroke: 0.5px rgba(0,0,0,0.4);
    text-stroke: 0.5px rgba(0,0,0,0.4);
    text-shadow: 0 0 1px rgba(0,0,0,0.3);
}

/* ===== Moderators – Flickering Flame Effect (unchanged) ===== */
.moderators {
    font-weight: bold;
    color: #ed7a16;
    text-shadow: 0px 0px 5px #090909;
    animation: modFlicker 2.5s ease-in-out infinite;
}

/* ===== Coder – Cycling Spectrum Effect (unchanged) ===== */
.coder {
    font-weight: bold;
    font-style: italic;
    color: #f06;
    text-shadow: 
        0 0 10px rgba(255,0,102,0.8),
        0 0 20px rgba(226,0,90,0.4),
        0 0 30px rgba(255,0,102,0.2);
    animation: coderSpectrum 4s linear infinite;
}

/* ================== KEYFRAMES ================== */

/* Administrator: Sweeping white highlight across the red base */
@keyframes adminShine {
    0%   { background-position: 0% 0; }
    100% { background-position: -200% 0; } /* move the gradient left so the white band walks across */
}

/* Moderators: Flickering flame effect */
@keyframes modFlicker {
    0% {
        text-shadow: 
            0 0 3px rgba(9,9,9,0.7),
            0 0 6px rgba(237,122,22,0.5),
            0 0 9px rgba(255,140,0,0.3);
        color: #ed7a16;
    }
    15% {
        text-shadow: 
            0 0 5px rgba(9,9,9,0.9),
            0 0 10px rgba(237,122,22,0.8),
            0 0 15px rgba(255,140,0,0.6);
        color: #ff8500;
    }
    30% {
        text-shadow: 
            0 0 2px rgba(9,9,9,0.5),
            0 0 4px rgba(237,122,22,0.3),
            0 0 6px rgba(255,140,0,0.2);
        color: #d66e00;
    }
    45% {
        text-shadow: 
            0 0 6px rgba(9,9,9,0.8),
            0 0 12px rgba(237,122,22,0.7),
            0 0 18px rgba(255,160,0,0.5);
        color: #ff9500;
    }
    60% {
        text-shadow: 
            0 0 4px rgba(9,9,9,0.6),
            0 0 8px rgba(237,122,22,0.5),
            0 0 12px rgba(255,140,0,0.4);
        color: #ed7a16;
    }
    75% {
        text-shadow: 
            0 0 3px rgba(9,9,9,0.4),
            0 0 6px rgba(237,122,22,0.3),
            0 0 9px rgba(255,140,0,0.2);
        color: #d66e00;
    }
    90% {
        text-shadow: 
            0 0 5px rgba(9,9,9,0.7),
            0 0 10px rgba(237,122,22,0.6),
            0 0 15px rgba(255,140,0,0.4);
        color: #ff8500;
    }
    100% {
        text-shadow: 
            0 0 3px rgba(9,9,9,0.7),
            0 0 6px rgba(237,122,22,0.5),
            0 0 9px rgba(255,140,0,0.3);
        color: #ed7a16;
    }
}

/* Coder: Cycling spectrum effect */
@keyframes coderSpectrum {
    0% {
        text-shadow: 
            0 0 10px rgba(255,0,102,0.8),
            0 0 20px rgba(226,0,90,0.4),
            0 0 30px rgba(255,0,102,0.2);
        color: #f06;
    }
    15% {
        text-shadow: 
            0 0 12px rgba(255,50,150,0.8),
            0 0 24px rgba(226,20,110,0.4),
            0 0 36px rgba(255,50,150,0.2);
        color: #ff3296;
    }
    30% {
        text-shadow: 
            0 0 14px rgba(255,100,200,0.8),
            0 0 28px rgba(226,40,130,0.4),
            0 0 42px rgba(255,100,200,0.2);
        color: #ff64c8;
    }
    45% {
        text-shadow: 
            0 0 16px rgba(200,100,255,0.8),
            0 0 32px rgba(180,40,180,0.4),
            0 0 48px rgba(200,100,255,0.2);
        color: #c864ff;
    }
    60% {
        text-shadow: 
            0 0 14px rgba(150,100,255,0.8),
            0 0 28px rgba(100,40,180,0.4),
            0 0 42px rgba(150,100,255,0.2);
        color: #9664ff;
    }
    75% {
        text-shadow: 
            0 0 12px rgba(100,100,255,0.8),
            0 0 24px rgba(40,40,180,0.4),
            0 0 36px rgba(100,100,255,0.2);
        color: #6464ff;
    }
    90% {
        text-shadow: 
            0 0 10px rgba(50,150,255,0.8),
            0 0 20px rgba(20,60,180,0.4),
            0 0 30px rgba(50,150,255,0.2);
        color: #3296ff;
    }
    100% {
        text-shadow: 
            0 0 10px rgba(255,0,102,0.8),
            0 0 20px rgba(226,0,90,0.4),
            0 0 30px rgba(255,0,102,0.2);
        color: #f06;
    }
}