/* ========== NAME EFFECTS ANIMATIONS ========== */
/* Animações especiais para efeitos de nome raros */

/* ========== COMMON (Cinza) ========== */
.name-effect-basic {
    color: #95a5a6;
}

/* ========== UNCOMMON (Verde) ========== */
.name-effect-glow {
    color: #2ecc71;
    text-shadow: 0 0 10px #2ecc71, 0 0 20px #2ecc71;
    animation: glow-pulse 2s ease-in-out infinite;
}

@keyframes glow-pulse {
    0%, 100% { text-shadow: 0 0 10px #2ecc71; }
    50% { text-shadow: 0 0 20px #2ecc71, 0 0 30px #2ecc71; }
}

/* ========== RARE (Azul) - RAINBOW ========== */
.name-effect-rainbow {
    background: linear-gradient(90deg, 
        #ff0000 0%, 
        #ff7f00 16%, 
        #ffff00 33%, 
        #00ff00 50%, 
        #0000ff 66%, 
        #8b00ff 83%, 
        #ff0000 100%
    );
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: rainbow-shift 3s linear infinite;
    font-weight: bold;
}

@keyframes rainbow-shift {
    0% { background-position: 0% center; }
    100% { background-position: 200% center; }
}

/* ========== EPIC (Roxo) - GLITCH ========== */
.name-effect-glitch {
    color: #0ff;
    font-weight: bold;
    animation: glitch-animation 0.3s infinite;
    position: relative;
}

.name-effect-glitch::before,
.name-effect-glitch::after {
    content: attr(data-text);
    position: absolute;
    left: 0;
    top: 0;
}

.name-effect-glitch::before {
    animation: glitch-before 0.3s infinite;
    color: #f0f;
    z-index: -1;
}

.name-effect-glitch::after {
    animation: glitch-after 0.3s infinite;
    color: #0ff;
    z-index: -2;
}

@keyframes glitch-animation {
    0% { transform: translate(0); }
    20% { transform: translate(-2px, 2px); }
    40% { transform: translate(-2px, -2px); }
    60% { transform: translate(2px, 2px); }
    80% { transform: translate(2px, -2px); }
    100% { transform: translate(0); }
}

@keyframes glitch-before {
    0% { clip-path: inset(40% 0 61% 0); transform: translate(-2px, -2px); }
    20% { clip-path: inset(92% 0 1% 0); transform: translate(2px, 2px); }
    40% { clip-path: inset(43% 0 1% 0); transform: translate(-2px, 2px); }
    60% { clip-path: inset(25% 0 58% 0); transform: translate(2px, -2px); }
    80% { clip-path: inset(54% 0 7% 0); transform: translate(-2px, -2px); }
    100% { clip-path: inset(58% 0 43% 0); transform: translate(2px, 2px); }
}

@keyframes glitch-after {
    0% { clip-path: inset(65% 0 15% 0); transform: translate(2px, 2px); }
    20% { clip-path: inset(12% 0 85% 0); transform: translate(-2px, -2px); }
    40% { clip-path: inset(82% 0 5% 0); transform: translate(2px, -2px); }
    60% { clip-path: inset(38% 0 40% 0); transform: translate(-2px, 2px); }
    80% { clip-path: inset(71% 0 15% 0); transform: translate(2px, 2px); }
    100% { clip-path: inset(25% 0 48% 0); transform: translate(-2px, -2px); }
}

/* ========== LEGENDARY (Dourado) - FIRE ========== */
.name-effect-fire {
    background: linear-gradient(180deg, #ff4500, #ff6347, #ff0000);
    background-size: 100% 200%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: fire-animation 1s ease-in-out infinite;
    font-weight: bold;
    text-shadow: 0 0 20px rgba(255, 69, 0, 0.8);
}

@keyframes fire-animation {
    0%, 100% { 
        background-position: 0% 0%;
        filter: brightness(1) hue-rotate(0deg);
    }
    50% { 
        background-position: 0% 100%;
        filter: brightness(1.3) hue-rotate(10deg);
    }
}

/* ========== LEGENDARY (Dourado) - GOLD ========== */
.name-effect-gold {
    background: linear-gradient(90deg, #ffd700, #ffed4e, #ffd700);
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: gold-shine 2s linear infinite;
    font-weight: bold;
    text-shadow: 0 0 20px rgba(255, 215, 0, 0.8);
}

@keyframes gold-shine {
    0% { background-position: 0% center; }
    100% { background-position: 200% center; }
}

/* ========== MYTHIC (Vermelho) - COSMIC ========== */
.name-effect-cosmic {
    background: linear-gradient(45deg, 
        #8a2be2 0%, 
        #9370db 25%, 
        #ba55d3 50%, 
        #9370db 75%, 
        #8a2be2 100%
    );
    background-size: 400% 400%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: cosmic-animation 3s ease infinite;
    font-weight: bold;
    position: relative;
}

.name-effect-cosmic::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: linear-gradient(45deg, #8a2be2, #9370db, #ba55d3);
    filter: blur(10px);
    opacity: 0.5;
    z-index: -1;
    animation: cosmic-glow 3s ease infinite;
}

@keyframes cosmic-animation {
    0%, 100% { 
        background-position: 0% 50%;
        filter: hue-rotate(0deg);
    }
    50% { 
        background-position: 100% 50%;
        filter: hue-rotate(30deg);
    }
}

@keyframes cosmic-glow {
    0%, 100% { opacity: 0.3; }
    50% { opacity: 0.7; }
}

/* ========== MYTHIC - NEON ========== */
.name-effect-neon {
    color: #0ff;
    font-weight: bold;
    text-shadow: 
        0 0 5px #0ff,
        0 0 10px #0ff,
        0 0 20px #0ff,
        0 0 40px #0ff;
    animation: neon-flicker 1.5s infinite alternate;
}

@keyframes neon-flicker {
    0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% {
        text-shadow: 
            0 0 5px #0ff,
            0 0 10px #0ff,
            0 0 20px #0ff,
            0 0 40px #0ff,
            0 0 80px #0ff;
    }
    20%, 24%, 55% {
        text-shadow: none;
    }
}

/* ========== MYTHIC - MATRIX ========== */
.name-effect-matrix {
    color: #0f0;
    font-family: 'Courier New', monospace;
    font-weight: bold;
    text-shadow: 0 0 10px #0f0;
    animation: matrix-rain 0.5s infinite;
}

@keyframes matrix-rain {
    0% { opacity: 1; }
    50% { opacity: 0.7; }
    100% { opacity: 1; }
}

/* ========== MYTHIC - PLASMA ========== */
.name-effect-plasma {
    background: linear-gradient(90deg, 
        #ff00ff 0%, 
        #00ffff 25%, 
        #ffff00 50%, 
        #00ffff 75%, 
        #ff00ff 100%
    );
    background-size: 300% 100%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: plasma-flow 2s linear infinite;
    font-weight: bold;
    filter: brightness(1.2);
}

@keyframes plasma-flow {
    0% { background-position: 0% center; }
    100% { background-position: 300% center; }
}

/* ========== SPECIAL - DISCO ========== */
.name-effect-disco {
    animation: disco-colors 0.5s linear infinite;
    font-weight: bold;
    text-shadow: 0 0 10px currentColor;
}

@keyframes disco-colors {
    0% { color: #ff0000; }
    14% { color: #ff7f00; }
    28% { color: #ffff00; }
    42% { color: #00ff00; }
    57% { color: #0000ff; }
    71% { color: #8b00ff; }
    85% { color: #ff00ff; }
    100% { color: #ff0000; }
}

/* ========== SPECIAL - SHADOW ========== */
.name-effect-shadow {
    color: #fff;
    font-weight: bold;
    text-shadow: 
        3px 3px 0 #000,
        -1px -1px 0 #000,
        1px -1px 0 #000,
        -1px 1px 0 #000,
        0 0 20px rgba(255, 255, 255, 0.5);
    animation: shadow-pulse 2s ease-in-out infinite;
}

@keyframes shadow-pulse {
    0%, 100% { 
        text-shadow: 
            3px 3px 0 #000,
            -1px -1px 0 #000,
            1px -1px 0 #000,
            -1px 1px 0 #000,
            0 0 20px rgba(255, 255, 255, 0.5);
    }
    50% { 
        text-shadow: 
            5px 5px 0 #000,
            -2px -2px 0 #000,
            2px -2px 0 #000,
            -2px 2px 0 #000,
            0 0 40px rgba(255, 255, 255, 0.8);
    }
}

/* ========== MOBILE OPTIMIZATIONS ========== */
@media (max-width: 768px) {
    /* Reduzir intensidade das animações em mobile */
    .name-effect-glitch,
    .name-effect-cosmic,
    .name-effect-neon {
        animation-duration: 1s;
    }
    
    /* Simplificar efeitos pesados */
    .name-effect-glitch::before,
    .name-effect-glitch::after {
        display: none;
    }
    
    .name-effect-cosmic::before {
        display: none;
    }
}

/* ========== PERFORMANCE ========== */
/* Usar will-change para melhor performance */
.name-effect-rainbow,
.name-effect-glitch,
.name-effect-fire,
.name-effect-gold,
.name-effect-cosmic,
.name-effect-neon,
.name-effect-plasma {
    will-change: transform, filter;
}