/* XP gain animation */
.xp-gain {
    animation: xpFloat 1.5s ease-out forwards;
    position: fixed;
    font-family: 'Rajdhani', sans-serif;
    font-weight: 700;
    color: var(--teletraan-cyan-bright);
    text-shadow: 0 0 8px rgba(0, 229, 255, 0.5);
    pointer-events: none;
    z-index: 9998;
    font-size: 1.2rem;
}
@keyframes xpFloat {
    0% { opacity: 1; transform: translateY(0); }
    100% { opacity: 0; transform: translateY(-60px); }
}

/* Heart loss animation */
.heart-lost {
    animation: heartLost 0.6s ease-out forwards;
    position: fixed;
    color: var(--autobot-red);
    pointer-events: none;
    z-index: 9998;
    font-size: 1.5rem;
}
@keyframes heartLost {
    0% { opacity: 1; transform: translateY(0) scale(1); }
    100% { opacity: 0; transform: translateY(-40px) scale(0.5); }
}

/* Level up animation */
.level-up-flash {
    animation: levelFlash 0.8s ease;
}
@keyframes levelFlash {
    0% { box-shadow: 0 0 0 0 rgba(43, 166, 179, 0.7); }
    50% { box-shadow: 0 0 30px 10px rgba(43, 166, 179, 0.3); }
    100% { box-shadow: 0 0 0 0 rgba(43, 166, 179, 0); }
}

/* Streak fire animation */
.streak-fire {
    animation: firePulse 0.5s ease;
}
@keyframes firePulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.5); }
    100% { transform: scale(1); }
}

/* Smooth step transitions */
.step-enter { animation: fadeInUp 0.3s ease; }
.step-exit { animation: fadeOutDown 0.2s ease forwards; }
@keyframes fadeOutDown {
    from { opacity: 1; transform: translateY(0); }
    to { opacity: 0; transform: translateY(20px); }
}

/* Skeleton loader */
.skeleton {
    background: linear-gradient(90deg, var(--teletraan-surface) 25%, var(--teletraan-surface-hover) 50%, var(--teletraan-surface) 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    border-radius: 0.25rem;
}
@keyframes shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Pulse for notifications */
.pulse-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--autobot-red);
    animation: pulse 1.5s ease-in-out infinite;
}
@keyframes pulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.5); opacity: 0.5; }
}

/* Energon glow effect for special elements */
.energon-glow {
    box-shadow: 0 0 15px rgba(0, 229, 255, 0.15),
                0 0 30px rgba(0, 229, 255, 0.05);
}