/* Animations pour le pseudo - CXZ.lol Premium */

/* Animation 1: Typewriter (Machine à écrire) */
@keyframes typing {
    0% {
        width: 0;
    }
    30% {
        width: 100%;
    }
    80% {
        width: 100%;
    }
    100% {
        width: 0;
    }
}

@keyframes blink-caret {
    from, to {
        border-color: transparent;
    }
    50% {
        border-color: currentcolor;
    }
}

.username-typewriter {
    display: inline-block;
    overflow: hidden;
    border-right: 2px solid currentcolor;
    white-space: nowrap;
    margin: 0;
    letter-spacing: 0.05em;
    /* Animation sera ajoutée dynamiquement via style inline avec le bon nombre de steps */
}

/* Animation 2: Shadow Pop (Ombres 3D) */
@keyframes shadows {
    0% {
        text-shadow: none;
    }
    10% {
        transform: translate(-3px, -3px);
        text-shadow: 3px 3px 0 #f49b90;
    }
    20% {
        transform: translate(-6px, -6px);
        text-shadow: 3px 3px 0 #f49b90, 6px 6px 0 #f28b7d;
    }
    30% {
        transform: translate(-9px, -9px);
        text-shadow: 3px 3px 0 #f49b90, 6px 6px 0 #f28b7d, 9px 9px #f07a6a;
    }
    40% {
        transform: translate(-12px, -12px);
        text-shadow: 3px 3px 0 #f49b90, 6px 6px 0 #f28b7d, 9px 9px #f07a6a, 12px 12px 0 #ee6352;
    }
    50% {
        transform: translate(-12px, -12px);
        text-shadow: 3px 3px 0 #f49b90, 6px 6px 0 #f28b7d, 9px 9px #f07a6a, 12px 12px 0 #ee6352;
    }
    60% {
        text-shadow: 3px 3px 0 #f49b90, 6px 6px 0 #f28b7d, 9px 9px #f07a6a, 12px 12px 0 #ee6352;
    }
    70% {
        text-shadow: 3px 3px 0 #f49b90, 6px 6px 0 #f28b7d, 9px 9px #f07a6a;
    }
    80% {
        text-shadow: 3px 3px 0 #f49b90, 6px 6px 0 #f28b7d;
    }
    90% {
        text-shadow: 3px 3px 0 #f49b90;
    }
    100% {
        text-shadow: none;
    }
}

.username-rainbow {
    display: inline-block;
    color: #f6aca2;
    font-weight: 700;
    animation: shadows 1.2s ease-in infinite;
}

/* Animation 4: Wave (Ondulation) */
@keyframes wave {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
}

.username-wave {
    display: inline-block;
    letter-spacing: -0.1em;
}

.username-wave span {
    display: inline-block;
    animation: wave 2s ease-in-out infinite;
}

.username-wave span:nth-child(1) { animation-delay: 0s; }
.username-wave span:nth-child(2) { animation-delay: 0.2s; }
.username-wave span:nth-child(3) { animation-delay: 0.4s; }
.username-wave span:nth-child(4) { animation-delay: 0.6s; }
.username-wave span:nth-child(5) { animation-delay: 0.8s; }
.username-wave span:nth-child(6) { animation-delay: 1s; }
.username-wave span:nth-child(7) { animation-delay: 1.2s; }
.username-wave span:nth-child(8) { animation-delay: 1.4s; }
.username-wave span:nth-child(9) { animation-delay: 1.6s; }
.username-wave span:nth-child(10) { animation-delay: 1.8s; }
.username-wave span:nth-child(11) { animation-delay: 2s; }
.username-wave span:nth-child(12) { animation-delay: 2.2s; }
.username-wave span:nth-child(13) { animation-delay: 2.4s; }
.username-wave span:nth-child(14) { animation-delay: 2.6s; }
.username-wave span:nth-child(15) { animation-delay: 2.8s; }
.username-wave span:nth-child(16) { animation-delay: 3s; }
.username-wave span:nth-child(17) { animation-delay: 3.2s; }
.username-wave span:nth-child(18) { animation-delay: 3.4s; }
.username-wave span:nth-child(19) { animation-delay: 3.6s; }
.username-wave span:nth-child(20) { animation-delay: 3.8s; }

/* Animation 5: Neon Glow */
@keyframes neon-glow {
    0% {
        text-shadow: 0 0 5px #ff005e, 0 0 10px #ff005e, 0 0 20px #ff005e, 0 0 40px #ff005e, 0 0 80px #ff005e;
    }
    100% {
        text-shadow: 0 0 10px #00d4ff, 0 0 20px #00d4ff, 0 0 40px #00d4ff, 0 0 80px #00d4ff, 0 0 160px #00d4ff;
    }
}

.username-neon {
    display: inline-block;
    color: #fff;
    font-weight: 700;
    text-shadow: 0 0 5px #ff005e, 0 0 10px #ff005e, 0 0 20px #ff005e, 0 0 40px #ff005e, 0 0 80px #ff005e;
    animation: neon-glow 1.5s infinite alternate;
}

/* Classe par défaut - aucune animation */
.username-none {
    display: inline-block;
}