/* assets/css/animations.css */

/* ============= تأثيرات الحركة — متوافقة مع SVG وMCV2026 ============= */

/* ضروري لتشغيل الحركات على SVG */
svg.animate {
    display: inline-block;
    backface-visibility: hidden;
    transform-origin: center;
}

/* -----------------------------------------------------
   1. مجموعة الحركات الأساسية (aic-)
   ----------------------------------------------------- */

/* 1. اهتزاز (shake) */
@keyframes aic-shake {
    0%, 100% { transform: translateX(0); }
    20%, 60% { transform: translateX(-4px); }
    40%, 80% { transform: translateX(4px); }
}
.aic-shake {
    animation: aic-shake 0.82s cubic-bezier(.36,.07,.19,.97) both;
}

/* 2. نبض (pulse) */
@keyframes aic-pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); }
}
.aic-pulse {
    animation: aic-pulse 1.2s infinite cubic-bezier(0.4, 0, 0.6, 1);
}

/* 3. قفز (bounce) */
@keyframes aic-bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}
.aic-bounce {
    animation: aic-bounce 0.8s infinite;
    animation-timing-function: cubic-bezier(0.28, 0.84, 0.42, 1);
}

/* 4. دوران (rotate) */
@keyframes aic-rotate {
    to { transform: rotate(360deg); }
}
.aic-rotate {
    animation: aic-rotate 1.5s linear infinite;
}

/* 5. قلب (flip) */
@keyframes aic-flip {
    0% { transform: perspective(400px) rotateY(0); }
    100% { transform: perspective(400px) rotateY(180deg); }
}
.aic-flip {
    animation: aic-flip 1s infinite;
}

/* 6. تكبير/تصغير (zoom) */
@keyframes aic-zoom {
    0% { transform: scale(1); }
    50% { transform: scale(1.2); }
    100% { transform: scale(1); }
}
.aic-zoom {
    animation: aic-zoom 1.5s infinite;
}

/* 7. تلاشي (fade) */
@keyframes aic-fade {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}
.aic-fade {
    animation: aic-fade 1.8s infinite;
}

/* 8. تأرجح (swing) */
@keyframes aic-swing {
    20% { transform: rotate(12deg); }
    40% { transform: rotate(-8deg); }
    60% { transform: rotate(4deg); }
    80% { transform: rotate(-4deg); }
    to { transform: rotate(0deg); }
}
.aic-swing {
    animation: aic-swing 1s infinite;
    transform-origin: top center;
}

/* 9. تمايل (wobble) */
@keyframes aic-wobble {
    0% { transform: translateX(0%); }
    15% { transform: translateX(-12%) rotate(-4deg); }
    30% { transform: translateX(10%) rotate(3deg); }
    45% { transform: translateX(-6%) rotate(-2deg); }
    60% { transform: translateX(4%) rotate(1deg); }
    75% { transform: translateX(-2%) rotate(-0.5deg); }
    to { transform: translateX(0%); }
}
.aic-wobble {
    animation: aic-wobble 1s infinite;
}

/* 10. هلع (jello) */
@keyframes aic-jello {
    0%, 100% { transform: scale3d(1, 1, 1); }
    30% { transform: scale3d(1.2, 0.8, 1); }
    40% { transform: scale3d(0.8, 1.2, 1); }
    50% { transform: scale3d(1.1, 0.9, 1); }
    65% { transform: scale3d(0.95, 1.05, 1); }
    75% { transform: scale3d(1.05, 0.95, 1); }
}
.aic-jello {
    animation: aic-jello 1s infinite;
}

/* -----------------------------------------------------
   2. تأثيرات التفاعل (Interactions)
   ----------------------------------------------------- */

/* فئة مساعدة: تشغيل لمرة واحدة عند التمرير */
.hover-once svg {
    transition: transform 0.3s ease;
}
.hover-once:hover svg {
    animation-iteration-count: 1 !important;
}

/* تأثير عند التمرير — مثال: اهتزاز عند hover */
.icon-hover-shake:hover svg {
    animation: aic-shake 0.5s;
    animation-iteration-count: 1;
}

/* تأثير دوران عند التمرير */
.icon-hover-rotate:hover svg {
    animation: aic-rotate 0.8s linear;
    animation-iteration-count: 1;
}

/* تأثيرات حركية عامة للعناصر (مثل الرموز التعبيرية Emojis في القوائم) */
.hover-wobble:hover .menu-icon {
    animation: aic-wobble 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    display: inline-block;
}

.hover-bounce:hover .menu-icon {
    animation: aic-bounce 0.8s cubic-bezier(0.28, 0.84, 0.42, 1);
    display: inline-block;
}

.hover-pulse:hover .menu-icon {
    animation: aic-pulse 0.8s ease-in-out;
    display: inline-block;
}

/* -----------------------------------------------------
   3. كلاسات الربط (Aliases) لربط الـ JS بالـ CSS
   ----------------------------------------------------- */

/* ربط دالة addShakeEffect في functions.js مع aic-shake */
.shake-animation {
    animation: aic-shake 0.82s cubic-bezier(.36,.07,.19,.97) both;
}

/* -----------------------------------------------------
   4. حركات عناصر الواجهة (UI Components)
   (للاستخدام مع المودال، التوست، والتحميل)
   ----------------------------------------------------- */

/* Spinner - مؤشر التحميل */
.spinner {
    display: inline-block;
    width: 30px;
    height: 30px;
    border: 3px solid rgba(0, 0, 0, 0.1);
    border-radius: 50%;
    border-top-color: #007bff; /* يمكن تغيير اللون */
    /* نستخدم حركة aic-rotate الموجودة أعلاه */
    animation: aic-rotate 0.8s linear infinite;
}

/* Toast - رسائل التنبيه المنبثقة */
@keyframes slideInBottom {
    from { transform: translateY(100%); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

/* دالة showToast تستخدم هذا لتطبيق الحركة */
.toast-enter {
    animation: slideInBottom 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

/* Modal - النوافذ المنبثقة */
@keyframes fadeInScale {
    from { opacity: 0; transform: scale(0.9); }
    to { opacity: 1; transform: scale(1); }
}

.modal-enter {
    animation: fadeInScale 0.3s ease-out forwards;
}

@keyframes fadeOutScale {
    from { opacity: 1; transform: scale(1); }
    to { opacity: 0; transform: scale(0.9); }
}

.modal-close {
    animation: fadeOutScale 0.2s ease-in forwards;
}