/* Animation duration = 1 / speed */
/* Example: speed = 0.4 → duration = 2.5s */
:root {
    --speed: 1;
}

/* Base rarity colors */
.common {
    color: #FFFFFF;
}

.uncommon {
    color: #FFFF55;
}

.rare {
    color: #55FFFF;
}

.epic {
    color: #FF55FF;
}

/* Gradient rarities with animation */
.rarity.legendary {
    background: linear-gradient(to left,
            rgb(255, 240, 120) 0%,
            rgb(255, 205, 20) 33%,
            rgb(255, 170, 40) 66%,
            rgb(255, 240, 120) 100%);
    --speed: 0.35;
}

.rarity.fabled {
    background: linear-gradient(to left,
            rgb(255, 255, 255) 0%,
            rgb(128, 200, 230) 25%,
            rgb(200, 150, 255) 50%,
            rgb(210, 105, 225) 75%,
            rgb(255, 255, 255) 100%);
    --speed: 0.4;
}

.rarity.mythic {
    background: linear-gradient(to left,
            rgb(20, 205, 255) 0%,
            rgb(20, 255, 165) 50%,
            rgb(20, 205, 255) 100%);
    --speed: 0.4;
}

.rarity.divine {
    background: linear-gradient(to left,
            rgb(255, 255, 175) 0%,
            rgb(175, 235, 240) 50%,
            rgb(255, 255, 90) 100%);
    --speed: 0.77;
}

.rarity.cataclysmic {
    background: linear-gradient(to left,
            rgb(164, 252, 255) 0%,
            rgb(77, 140, 220) 16.66%,
            rgb(203, 130, 225) 33.33%,
            rgb(255, 30, 50) 50%,
            rgb(203, 130, 225) 66.66%,
            rgb(77, 140, 220) 83.26%,
            rgb(164, 252, 255) 100%); 
    --speed: 0.4;
}

.rarity.godly {
    background: linear-gradient(to left,
            rgb(255, 90, 90) 0%,
            rgb(255, 180, 90) 14.28%,
            rgb(255, 255, 90) 28.56%,
            rgb(120, 255, 120) 42.84%,
            rgb(120, 255, 255) 57.12%,
            rgb(150, 100, 255) 71.4%,
            rgb(255, 100, 255) 85.68%,
            rgb(255, 90, 90) 100%);
    --speed: 0.3;
}

.rarity.dark {
    background: linear-gradient(to left,
            rgb(90, 90, 95) 0%,
            rgb(39, 42, 53) 50%,
            rgb(90, 90, 95) 100%);
    --speed: 0.3;
}

.rarity.gloomy {
    background: linear-gradient(to left,
            rgb(0, 242, 255) 0%,
            rgb(18, 141, 165) 50%,
            rgb(0, 242, 255) 100%);
    --speed: 0.3;
}

.rarity.glacial {
    background: linear-gradient(to left,
            rgb(150, 220, 245) 0%,
            rgb(255, 255, 255) 50%,
            rgb(150, 220, 245) 100%);
    --speed: 0.65;
}

.rarity.prismatic {
    background: linear-gradient(to left,
            rgb(214, 125, 238) 0%,
            rgb(179, 95, 233) 20%,
            rgb(113, 71, 221) 50%,
            rgb(179, 95, 233) 75%,
            rgb(214, 125, 238) 100%);
    --speed: 0.95;
}

.rarity.fire {
    background: linear-gradient(to left,
            rgb(255, 240, 20) 0%,
            rgb(255, 150, 0) 33%,
            rgb(255, 80, 40) 66%,
            rgb(255, 240, 20) 100%);
    --speed: 0.9;
}

.rarity.stygian {
    background: linear-gradient(to left,
            rgb(255, 0, 0) 0%,
            rgb(160, 0, 0) 50%,
            rgb(255, 0, 0) 100%);
    --speed: 0.65;
}

.rarity.nocturnal {
    background: linear-gradient(to left,
            rgb(80, 32, 200) 0%,
            rgb(208, 192, 248) 50%,
            rgb(80, 32, 200) 100%);
    --speed: 0.1;
}

.rarity.conductive {
    background: linear-gradient(to left,
            rgb(62, 50, 43) 0%,
            rgb(93, 77, 65) 25%,
            rgb(255, 223, 81) 50%,
            rgb(93, 77, 65) 75%,
            rgb(62, 50, 43) 100%);
    --speed: 1;
}

.rarity:not(.common):not(.uncommon):not(.rare):not(.epic) {
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    background-size: 200% auto;
    text-shadow: none !important;
    font-weight: 1000;
    animation: gradientShift calc(1 / var(--speed, 1) * 1s) linear infinite;
}

/* Animation keyframes */
@keyframes gradientShift {
    0% {
        background-position: 0% 50%;
    }

    100% {
        background-position: 200% 50%;
    }
}