/**
 * JRPGFR Gamification Public CSS
 * 🎨 Styles et Animations JRPG
 */

@keyframes xp-float {
    0% { transform: translateY(0) scale(0.5); opacity: 0; }
    10% { transform: translateY(-20px) scale(1.1); opacity: 1; filter: drop-shadow(0 0 15px currentColor); }
    20% { transform: translateY(-25px) scale(1); opacity: 1; }
    80% { transform: translateY(-80px) scale(1); opacity: 1; }
    100% { transform: translateY(-120px) scale(0.9); opacity: 0; }
}

.animate-xp-float {
    animation: xp-float 4s cubic-bezier(0.17, 0.67, 0.83, 0.67) forwards;
}

@keyframes fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

.animate-fade-in {
    animation: fade-in 0.8s ease-out forwards;
}

@keyframes scale-up {
    0% { transform: scale(0.8); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}

.animate-scale-up {
    animation: scale-up 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes bounce-short {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-3px); }
}

.animate-bounce-short {
    animation: bounce-short 1.5s infinite ease-in-out;
}

/* Glass JRPG Stat Bar Wrapper */
.jrpg-stat-bar-wrapper {
    height: 6px;
    width: 100%;
    background: rgba(0,0,0,0.4);
    border-radius: 99px;
    overflow: hidden;
    position: relative;
    border: 1px solid rgba(255,255,255,0.05);
}

.jrpg-stat-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #ff3e3e, #ff6b6b);
    border-radius: 99px;
    box-shadow: 0 0 10px rgba(255,62,62,0.4);
    transition: width 1s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Mask pour l'avatar progressif */
.user-avatar-mask {
    mask-image: radial-gradient(circle, white 100%, black 100%);
    -webkit-mask-image: radial-gradient(circle, white 100%, black 100%);
}

.jrpg-avatar-container svg circle {
    stroke-linecap: round;
}