/* Background gradient animation */
@keyframes gradient {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* Floating particle animation */
@keyframes float {
    from {
        transform: translateY(100vh) rotate(0deg);
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    90% {
        opacity: 1;
    }
    to {
        transform: translateY(-100vh) rotate(360deg);
        opacity: 0;
    }
}

/* Logo gradient animation */
@keyframes gradientShift {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

/* Header text gradient effects */
h1 {
    background: linear-gradient(135deg, #00ff88, #00d4ff, #ff00ff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    background-size: 200% 200%;
    animation: gradientShift 8s ease infinite;
}

.subtitle::after {
    background: linear-gradient(90deg, transparent, #00ff88, transparent);
}

/* Logo breathing animation */
@keyframes breathe {
    0%, 100% { transform: scale(1); opacity: 0.9; }
    50% { transform: scale(1.05); opacity: 1; }
}

/* Friend card animations */
@keyframes cardPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

@keyframes warningPulse {
    0%, 100% { opacity: 0.8; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(1.1); }
}

/* BAC status animations */
@keyframes blink {
    50% { opacity: 0.5; }
}

/* Section transition */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Modal animations */
@keyframes modalIn {
    from {
        opacity: 0;
        transform: scale(0.8);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes slideInRight {
    from { transform: translateX(400px); }
    to { transform: translateX(0); }
}

/* Auth error animation */
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-10px); }
    75% { transform: translateX(10px); }
}

/* Loading animations */
@keyframes spin {
    to { transform: rotate(360deg); }
}

@keyframes loading {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Game animations */
@keyframes gameIn {
    from {
        opacity: 0;
        transform: scale(0.8) rotateX(30deg);
    }
    to {
        opacity: 1;
        transform: scale(1) rotateX(0);
    }
}

@keyframes questionIn {
    from {
        opacity: 0;
        transform: translateY(50px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Achievement animations */
@keyframes glow {
    0%, 100% { box-shadow: 0 20px 60px rgba(0, 255, 136, 0.5); }
    50% { box-shadow: 0 20px 80px rgba(0, 255, 136, 0.8); }
}

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

@keyframes achievementUnlock {
    0% { transform: scale(0) rotate(180deg); }
    50% { transform: scale(1.2) rotate(360deg); }
    100% { transform: scale(1) rotate(360deg); }
}

/* Settings animations */
@keyframes settingsSaved {
    0% {
        transform: scale(0) rotate(180deg);
        opacity: 0;
    }
    50% {
        transform: scale(1.2) rotate(360deg);
        opacity: 1;
    }
    100% {
        transform: scale(1) rotate(360deg);
        opacity: 1;
    }
}

/* UI element animations */
@keyframes pulse {
    0% { box-shadow: 0 0 0 0 rgba(0, 255, 136, 0.4); }
    50% { box-shadow: 0 0 0 10px rgba(0, 255, 136, 0); }
    100% { box-shadow: 0 0 0 0 rgba(0, 255, 136, 0); }
}