/* ==========================================================================
   CONSOLIDATED ANIMATIONS FILE - MINDSTATE DESIGN LABS
   ========================================================================== */

/* This file contains all keyframe animations used across the Osmanthus Platform.
   Each animation is documented with its purpose and where it's used.
   
   Animation Inventory (Mindstate Updated):
   1. fadeIn - Basic fade in
   2. fadeInUp - Fade in with upward movement (reduced)
   3. fadeInDown - Fade in with downward movement (reduced)
   4. fadeInRight - Fade in from right (reduced)
   5. fadeInLeft - Fade in from left
   6. fadeInStaggered - Fade in with stagger effect (reduced)
   7. gradientShimmer - REMOVED (too decorative)
   8. shimmerEffect - REMOVED (too decorative)
   9. progressShimmer - REMOVED (too decorative)
   10. spin - Rotation animation
   11. pulse - Pulsing effect (simplified)
   12. pulseMessage - REMOVED (neuomorphic)
   13. pingPulse - Ping-like pulse effect
   14. bounce - Bounce animation (reduced)
   15. loading - Loading shimmer
   16. gradientMove - REMOVED (too decorative)
   17. accordionSlideDown - Accordion expansion (reduced)
   18. slideDown - Slide down effect (reduced)
   19. expandDown - Expand down with height
   20. collapseDown - Collapse animation (simplified)
   21. slideInLeft - Slide in from left
   22. softPulse - REMOVED (too decorative)
*/

/* ========== FADE ANIMATIONS ========== */

/* Basic fade in - Used globally for elements appearing */
@keyframes fadeIn {
    from { 
        opacity: 0; 
    }
    to { 
        opacity: 1; 
    }
}

/* Fade in with upward movement - Used for cards, modals, and content appearing from below */
/* Mindstate: Reduced movement from 20px to 10px */
@keyframes fadeInUp {
    from { 
        opacity: 0; 
        transform: translateY(10px); 
    }
    to { 
        opacity: 1; 
        transform: translateY(0); 
    }
}

/* Fade in with downward movement - Used for dropdowns and top-appearing elements */
/* Mindstate: Reduced movement from -15px to -10px */
@keyframes fadeInDown {
    from { 
        opacity: 0; 
        transform: translateY(-10px); 
    }
    to { 
        opacity: 1; 
        transform: translateY(0); 
    }
}

/* Fade in from right - Used for funnel steps and sequential content */
/* Mindstate: Reduced movement from -30px to -20px */
@keyframes fadeInRight {
    from { 
        opacity: 0; 
        transform: translateX(-20px); 
    }
    to { 
        opacity: 1; 
        transform: translateX(0); 
    }
}

/* Fade in from left - Used for list items and side-appearing content */
@keyframes fadeInLeft {
    from { 
        opacity: 0; 
        transform: translateX(-10px); 
    }
    to { 
        opacity: 1; 
        transform: translateX(0); 
    }
}

/* Fade in with stagger support - Used for staggered animations */
/* Mindstate: Reduced movement from 20px to 10px */
@keyframes fadeInStaggered {
    0% { 
        opacity: 0; 
        transform: translateY(10px); 
    }
    100% { 
        opacity: 1; 
        transform: translateY(0); 
    }
}

/* ========== GRADIENT ANIMATIONS - REMOVED ========== */
/* Mindstate: Removed gradientShimmer, shimmerEffect, and gradientMove as too decorative */

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

/* Spin animation - Used for loading spinners and rotating elements */
@keyframes spin {
    from { 
        transform: rotate(0deg); 
    }
    to { 
        transform: rotate(360deg); 
    }
}

/* Loading shimmer - Used for skeleton screens and loading states */
@keyframes loading {
    0% { 
        transform: translateX(-100%); 
    }
    100% { 
        transform: translateX(100%); 
    }
}

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

/* Basic pulse - Used for attention-grabbing elements */
/* Mindstate: Updated color from teal to data green and simplified */
@keyframes pulse {
    0% { 
        box-shadow: 0 0 0 0 rgba(107, 142, 35, 0.4); 
    }
    70% { 
        box-shadow: 0 0 0 10px rgba(107, 142, 35, 0); 
    }
    100% { 
        box-shadow: 0 0 0 0 rgba(107, 142, 35, 0); 
    }
}

/* Ping pulse - Used for confidence indicators and status dots */
@keyframes pingPulse {
    0% { 
        transform: scale(1); 
        opacity: 0.5; 
    }
    70% { 
        transform: scale(2.5); 
        opacity: 0; 
    }
    100% { 
        transform: scale(1); 
        opacity: 0; 
    }
}

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

/* Accordion slide down - Used for accordion content expansion */
/* Mindstate: Reduced movement from -10px to -5px */
@keyframes accordionSlideDown {
    from {
        opacity: 0;
        transform: translateY(-5px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* General slide down - Used for dropdowns and expanding content */
/* Mindstate: Reduced movement from -10px to -5px */
@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-5px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Expand down with height - Used for expanding content with height animation */
/* Mindstate: Reduced initial movement from -10px to -5px */
@keyframes expandDown {
    from {
        opacity: 0;
        max-height: 0;
        transform: translateY(-5px);
    }
    to {
        opacity: 1;
        max-height: 500px; /* Adjust if needed */
        transform: translateY(0);
    }
}

/* Collapse down - Used for collapsible sections */
/* Mindstate: Removed scale transform for simpler animation */
@keyframes collapseDown {
    from { 
        opacity: 0; 
    }
    to { 
        opacity: 1; 
    }
}

/* Slide in from left - Used for sidebar and panel animations */
@keyframes slideInLeft {
    from { 
        opacity: 0; 
        transform: translateX(-10px); 
    }
    to { 
        opacity: 1; 
        transform: translateX(0); 
    }
}

/* ========== SPECIAL EFFECTS ========== */

/* Bounce animation - Used for download icons and playful elements */
/* Mindstate: Reduced bounce distances */
@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-4px);
    }
    60% {
        transform: translateY(-2px);
    }
}