/* ========================================
   Animations & Keyframes
   All animation definitions for InvitAI
   ======================================== */

/* ==================== BACKGROUND ANIMATIONS ==================== */

@keyframes floatBackground {
    0%, 100% { 
        transform: translate(0, 0) scale(1); 
    }
    33% { 
        transform: translate(-20px, -20px) scale(1.05); 
    }
    66% { 
        transform: translate(20px, -10px) scale(0.95); 
    }
}

/* ==================== ENTRANCE ANIMATIONS ==================== */

@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

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

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* ==================== SHIMMER EFFECTS ==================== */

@keyframes shimmer {
    0% { 
        transform: translateX(-100%); 
    }
    100% { 
        transform: translateX(100%); 
    }
}

/* ==================== PULSE ANIMATIONS ==================== */

@keyframes pulse {
    0% { 
        transform: scale(1); 
    }
    50% { 
        transform: scale(1.05); 
    }
    100% { 
        transform: scale(1); 
    }
}

@keyframes stepPulse {
    0% {
        transform: scale(1);
        opacity: 1;
    }
    100% {
        transform: scale(1.5);
        opacity: 0;
    }
}

/* ==================== RIPPLE EFFECTS ==================== */

@keyframes rippleEffect {
    0% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0.5;
    }
    100% {
        transform: translate(-50%, -50%) scale(2);
        opacity: 0;
    }
}

/* ==================== LOADING ANIMATIONS ==================== */

@keyframes spin {
    to { 
        transform: rotate(360deg); 
    }
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% { 
        transform: translateY(0); 
    }
    40% { 
        transform: translateY(-10px); 
    }
    60% { 
        transform: translateY(-5px); 
    }
}

/* ==================== STATUS INDICATORS ==================== */

@keyframes blink {
    0%, 100% { 
        opacity: 0.3; 
    }
    50% { 
        opacity: 1; 
    }
}

/* ==================== HEART ANIMATION ==================== */

@keyframes heartbeat {
    0% { 
        transform: scale(1); 
    }
    14% { 
        transform: scale(1.2); 
    }
    28% { 
        transform: scale(1); 
    }
    42% { 
        transform: scale(1.2); 
    }
    70% { 
        transform: scale(1); 
    }
}

/* ==================== SLIDE ANIMATIONS ==================== */

@keyframes slideUp {
    from {
        transform: translateY(100%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* ==================== ANIMATION UTILITY CLASSES ==================== */

.animate-fadeIn {
    animation: fadeIn 0.5s ease-out;
}

.animate-fadeInUp {
    animation: fadeInUp 0.5s ease-out;
}

.animate-fadeInDown {
    animation: fadeInDown 0.5s ease-out;
}

.animate-pulse {
    animation: pulse 2s infinite;
}

.animate-spin {
    animation: spin 1s linear infinite;
}

.animate-bounce {
    animation: bounce 2s infinite;
}

.animate-shimmer {
    animation: shimmer 2s ease-in-out infinite;
}

/* Duration & Delay utilities */
.anim-fast   { animation-duration: 200ms !important; }
.anim-base   { animation-duration: 400ms !important; }
.anim-slow   { animation-duration: 700ms !important; }
.anim-1s     { animation-duration: 1s !important; }
.anim-2s     { animation-duration: 2s !important; }

.delay-0     { animation-delay: 0ms !important; }
.delay-150   { animation-delay: 150ms !important; }
.delay-300   { animation-delay: 300ms !important; }
.delay-500   { animation-delay: 500ms !important; }