/* TalentMatched.com ROI Calculator Styles - Animations */
/* styles-animations.css - All keyframes and transitions */

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

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

/* PHASE 1: Validation Feedback Animations */
@keyframes slideInFromLeft {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

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

/* PHASE 1: Field Guidance Animations */
@keyframes expandGuidance {
    from {
        opacity: 0;
        max-height: 0;
        padding-top: 0;
        padding-bottom: 0;
    }
    to {
        opacity: 1;
        max-height: 400px;
        padding-top: 1rem;
        padding-bottom: 1rem;
    }
}

@keyframes collapseGuidance {
    from {
        opacity: 1;
        max-height: 400px;
    }
    to {
        opacity: 0;
        max-height: 0;
    }
}

/* PHASE 2: Mode Transition Animations */
@keyframes fieldFadeIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
        max-height: 0;
    }
    to {
        opacity: 1;
        transform: translateY(0);
        max-height: 200px;
    }
}

@keyframes fieldFadeOut {
    from {
        opacity: 1;
        transform: translateY(0);
        max-height: 200px;
    }
    to {
        opacity: 0;
        transform: translateY(-10px);
        max-height: 0;
    }
}

/* PHASE 3: Alternative Input Animations */
@keyframes expandAlternative {
    from {
        opacity: 0;
        max-height: 0;
        padding-top: 0;
        padding-bottom: 0;
    }
    to {
        opacity: 1;
        max-height: 500px;
        padding-top: 20px;
        padding-bottom: 20px;
    }
}

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

/* Evidence Card Animations */
@keyframes slideInLeft {
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Calculate Button Animations */
@keyframes pulse {
    0%, 100% { opacity: 0.8; }
    50% { opacity: 0.6; }
}

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

/* Tooltip Animations */
@keyframes slideUpFade {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateX(-50%) translateY(-5px);
    }
}

@keyframes slideDownFade {
    from {
        opacity: 1;
        transform: translateX(-50%) translateY(-5px);
    }
    to {
        opacity: 0;
        transform: translateX(-50%) translateY(10px);
    }
}

/* Currency Flag Loading Animation */
@keyframes loading-shimmer {
    0% { left: -100%; }
    100% { left: 100%; }
}

/* Notification Animations */
@keyframes slideInRight {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

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

/* PWA Toast Animation */
@keyframes pwa-toast-slide-in {
    from { transform: translateX(100%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}