/* =========================================================
   static/css/animations.css
   تمام انیمیشن‌ها و keyframeهای سایت. این فایل عمداً از style.css
   جدا نگه داشته شده تا استایل ساختاری از حرکت/زمان‌بندی جدا باشد.
========================================================= */

/* ---------------- لودر اولیه صفحه ---------------- */
.site-loader--hidden {
    opacity: 0;
    pointer-events: none;
}

.site-loader__ring {
    animation: loaderSpin 0.9s linear infinite;
}

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

/* ---------------- انیمیشن ظاهر شدن هنگام اسکرول (data-aos="fade-up") ---------------- */
[data-aos] {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: opacity, transform;
}
[data-aos].aos-visible {
    opacity: 1;
    transform: translateY(0);
}

/* ---------------- محو و بسته شدن پیام‌های سیستم ---------------- */
.site-message {
    animation: messageSlideIn 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.site-message--closing {
    animation: messageFadeOut 0.3s ease forwards;
}

@keyframes messageSlideIn {
    from { opacity: 0; transform: translateY(-12px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes messageFadeOut {
    to { opacity: 0; transform: translateY(-12px); }
}

/* ---------------- درخشش ظریف طلایی روی دکمه‌های اصلی ---------------- */
.btn-gold {
    position: relative;
    overflow: hidden;
}
.btn-gold::after {
    content: '';
    position: absolute;
    top: 0;
    right: -60%;
    width: 40%;
    height: 100%;
    background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.35), transparent);
    transform: skewX(-20deg);
    transition: right 0.6s ease;
}
.btn-gold:hover::after { right: 130%; }

/* ---------------- پالس ملایم روی نشان‌های وضعیت «در انتظار» ---------------- */
.status-badge--pending {
    animation: pendingPulse 2s ease-in-out infinite;
}
@keyframes pendingPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}

/* ---------------- ورود حباب‌های چت ---------------- */
.chat-bubble {
    animation: bubbleIn 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes bubbleIn {
    from { opacity: 0; transform: translateY(10px) scale(0.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

/* ---------------- احترام به تنظیم کاهش انیمیشن کاربر ---------------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}