/* انیمیشن‌های نوار پیشرفت برای سیستم امین اتوپارس */

/* انیمیشن ورود مراحل */
@keyframes stepEnter {
    0% {
        opacity: 0;
        transform: scale(0.8) translateY(20px);
    }
    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.step-enter {
    animation: stepEnter 0.6s ease-out forwards;
}

/* انیمیشن تکمیل مرحله */
@keyframes stepComplete {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.2);
    }
    100% {
        transform: scale(1);
    }
}

.step-complete {
    animation: stepComplete 0.8s ease-out;
}

/* انیمیشن فعال شدن مرحله */
@keyframes stepActive {
    0% {
        box-shadow: 0 0 0 0 rgba(222, 43, 49, 0.7);
    }
    70% {
        box-shadow: 0 0 0 10px rgba(222, 43, 49, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(222, 43, 49, 0);
    }
}

.step-active {
    animation: stepActive 2s infinite;
}

/* انیمیشن نوار پیشرفت */
@keyframes progressFill {
    0% {
        width: 0%;
    }
    100% {
        width: var(--progress-width);
    }
}

.progress-animate {
    animation: progressFill 1s ease-out forwards;
}

/* انیمیشن hover برای دکمه‌ها */
.btn-hover-effect {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-hover-effect:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}

/* انیمیشن pulse برای مرحله فعال */
.pulse-custom {
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.8;
    }
}

/* انیمیشن slide برای خطوط اتصال */
@keyframes slideIn {
    0% {
        width: 0%;
    }
    100% {
        width: 100%;
    }
}

.line-slide {
    animation: slideIn 0.8s ease-out forwards;
}

/* انیمیشن fade برای عناوین مراحل */
@keyframes fadeInUp {
    0% {
        opacity: 0;
        transform: translateY(10px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.title-fade {
    animation: fadeInUp 0.5s ease-out forwards;
}

/* انیمیشن bounce برای دکمه‌های کوچک */
@keyframes bounce {
    0%, 20%, 53%, 80%, 100% {
        transform: translate3d(0, 0, 0);
    }
    40%, 43% {
        transform: translate3d(0, -8px, 0);
    }
    70% {
        transform: translate3d(0, -4px, 0);
    }
    90% {
        transform: translate3d(0, -2px, 0);
    }
}

.bounce-hover:hover {
    animation: bounce 0.6s ease-in-out;
}

/* انیمیشن glow برای مرحله فعال */
@keyframes glow {
    0%, 100% {
        box-shadow: 0 0 5px rgba(222, 43, 49, 0.5);
    }
    50% {
        box-shadow: 0 0 20px rgba(222, 43, 49, 0.8), 0 0 30px rgba(222, 43, 49, 0.6);
    }
}

.glow-active {
    animation: glow 2s ease-in-out infinite alternate;
}

/* انیمیشن ripple برای کلیک */
@keyframes ripple {
    0% {
        transform: scale(0);
        opacity: 1;
    }
    100% {
        transform: scale(4);
        opacity: 0;
    }
}

.ripple {
    position: relative;
    overflow: hidden;
}

.ripple::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 5px;
    height: 5px;
    background: rgba(255, 255, 255, 0.5);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    animation: ripple 0.6s ease-out;
}

/* انیمیشن shake برای خطا */
@keyframes shake {
    0%, 100% {
        transform: translateX(0);
    }
    10%, 30%, 50%, 70%, 90% {
        transform: translateX(-5px);
    }
    20%, 40%, 60%, 80% {
        transform: translateX(5px);
    }
}

.shake-error {
    animation: shake 0.6s ease-in-out;
}

/* انیمیشن success برای تکمیل */
@keyframes success {
    0% {
        transform: scale(0.8);
        opacity: 0;
    }
    50% {
        transform: scale(1.1);
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.success-animation {
    animation: success 0.8s ease-out;
}

/* انیمیشن loading برای نوار پیشرفت */
@keyframes loading {
    0% {
        background-position: -200px 0;
    }
    100% {
        background-position: calc(200px + 100%) 0;
    }
}

.loading-bar {
    background: linear-gradient(90deg, 
        rgba(255, 255, 255, 0.1) 25%, 
        rgba(255, 255, 255, 0.3) 50%, 
        rgba(255, 255, 255, 0.1) 75%);
    background-size: 200px 100%;
    animation: loading 2s infinite;
}