/**
 * Animations globales pour les tokens et l'énergie
 * Composant réutilisable à travers l'application
 */

/* Notifications de tokens - Animation vers le haut */
.app__token-notification {
    position: fixed;
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-bold);
    color: var(--color-error);
    z-index: var(--z-index-notification, 9999);
    pointer-events: none;
    padding: 8px 16px;
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.95), rgba(220, 38, 38, 0.95));
    border-radius: var(--border-radius-full);
    box-shadow: 0 4px 20px rgba(239, 68, 68, 0.4);
}

.app__token-notification .notification-text {
    color: white;
    font-weight: var(--font-weight-bold);
    letter-spacing: 0.5px;
}

/* Notifications d'énergie - Animation vers le haut */
.app__energy-notification {
    position: fixed;
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-bold);
    color: #ff9800;
    z-index: var(--z-index-notification, 9999);
    pointer-events: none;
    padding: 8px 16px;
    background: linear-gradient(135deg, rgba(255, 152, 0, 0.95), rgba(245, 124, 0, 0.95));
    border-radius: var(--border-radius-full);
    box-shadow: 0 4px 20px rgba(255, 152, 0, 0.4);
}

.app__energy-notification .notification-text {
    color: white;
    font-weight: var(--font-weight-bold);
    letter-spacing: 0.5px;
}

/* Animation unique qui monte vers le haut */
@keyframes flyUp {
    0% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
    100% {
        opacity: 0;
        transform: translateY(-80px) scale(0.8);
    }
}

.app__token-notification.animating,
.app__energy-notification.animating {
    animation: flyUp 1s ease-out forwards;
}

/* Animation du compteur de tokens/énergie */
.token-count-animating {
    animation: countPulse 0.4s ease-out;
}

@keyframes countPulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
        color: var(--color-primary);
    }
}