/**
 * Alaisai Animations - تأثيرات حركية متقدمة
 * @version 2.0.0
 */

/* ===== تأثيرات الظهور ===== */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

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

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

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

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

/* ===== تأثيرات التكبير ===== */
@keyframes scaleIn {
    from { opacity: 0; transform: scale(0.9); }
    to { opacity: 1; transform: scale(1); }
}

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

/* ===== تأثيرات الدوران ===== */
@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

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

/* ===== تأثيرات النبض ===== */
@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

@keyframes pulseGlow {
    0% { box-shadow: 0 0 0 0 rgba(76, 201, 240, 0.4); }
    70% { box-shadow: 0 0 0 10px rgba(76, 201, 240, 0); }
    100% { box-shadow: 0 0 0 0 rgba(76, 201, 240, 0); }
}

/* ===== تأثيرات الاهتزاز ===== */
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
    20%, 40%, 60%, 80% { transform: translateX(5px); }
}

@keyframes shakeVertical {
    0%, 100% { transform: translateY(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateY(-5px); }
    20%, 40%, 60%, 80% { transform: translateY(5px); }
}

/* ===== تأثيرات عائمة ===== */
@keyframes float {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-10px); }
    100% { transform: translateY(0px); }
}

@keyframes floatRotate {
    0% { transform: translateY(0px) rotate(0deg); }
    50% { transform: translateY(-10px) rotate(5deg); }
    100% { transform: translateY(0px) rotate(0deg); }
}

/* ===== تأثيرات الموج ===== */
@keyframes wave {
    0% { transform: rotate(0deg); }
    10% { transform: rotate(14deg); }
    20% { transform: rotate(-8deg); }
    30% { transform: rotate(14deg); }
    40% { transform: rotate(-4deg); }
    50% { transform: rotate(10deg); }
    60% { transform: rotate(0deg); }
    100% { transform: rotate(0deg); }
}

/* ===== تأثيرات التحميل ===== */
@keyframes loaderDots {
    0%, 80%, 100% { transform: scale(0); }
    40% { transform: scale(1); }
}

@keyframes loaderRipple {
    0% { transform: scale(0); opacity: 1; }
    100% { transform: scale(2); opacity: 0; }
}

@keyframes loaderSpinner {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* ===== تأثيرات الانزلاق ===== */
@keyframes slideInLeft {
    from { transform: translateX(-100%); }
    to { transform: translateX(0); }
}

@keyframes slideInRight {
    from { transform: translateX(100%); }
    to { transform: translateX(0); }
}

@keyframes slideOutLeft {
    from { transform: translateX(0); }
    to { transform: translateX(-100%); }
}

@keyframes slideOutRight {
    from { transform: translateX(0); }
    to { transform: translateX(100%); }
}

/* ===== كلاسات جاهزة ===== */
.animate-fade-in { animation: fadeIn 0.3s ease; }
.animate-fade-in-up { animation: fadeInUp 0.4s ease; }
.animate-fade-in-down { animation: fadeInDown 0.4s ease; }
.animate-fade-in-left { animation: fadeInLeft 0.4s ease; }
.animate-fade-in-right { animation: fadeInRight 0.4s ease; }
.animate-scale-in { animation: scaleIn 0.3s ease; }
.animate-scale-out { animation: scaleOut 0.3s ease; }
.animate-spin { animation: spin 1s linear infinite; }
.animate-spin-slow { animation: spinSlow 3s linear infinite; }
.animate-pulse { animation: pulse 2s ease infinite; }
.animate-pulse-glow { animation: pulseGlow 2s ease infinite; }
.animate-shake { animation: shake 0.5s ease; }
.animate-shake-vertical { animation: shakeVertical 0.5s ease; }
.animate-float { animation: float 3s ease infinite; }
.animate-float-rotate { animation: floatRotate 3s ease infinite; }
.animate-wave { animation: wave 2s ease infinite; }
.animate-slide-in-left { animation: slideInLeft 0.3s ease; }
.animate-slide-in-right { animation: slideInRight 0.3s ease; }
.animate-slide-out-left { animation: slideOutLeft 0.3s ease; }
.animate-slide-out-right { animation: slideOutRight 0.3s ease; }

/* ===== تحكم في المدة ===== */
.animate-duration-100 { animation-duration: 0.1s; }
.animate-duration-200 { animation-duration: 0.2s; }
.animate-duration-300 { animation-duration: 0.3s; }
.animate-duration-500 { animation-duration: 0.5s; }
.animate-duration-1000 { animation-duration: 1s; }
.animate-duration-2000 { animation-duration: 2s; }
.animate-duration-3000 { animation-duration: 3s; }

/* ===== تحكم في التكرار ===== */
.animate-iteration-1 { animation-iteration-count: 1; }
.animate-iteration-2 { animation-iteration-count: 2; }
.animate-iteration-3 { animation-iteration-count: 3; }
.animate-iteration-infinite { animation-iteration-count: infinite; }

/* ===== تحكم في التأخير ===== */
.animate-delay-100 { animation-delay: 0.1s; }
.animate-delay-200 { animation-delay: 0.2s; }
.animate-delay-300 { animation-delay: 0.3s; }
.animate-delay-500 { animation-delay: 0.5s; }
.animate-delay-1000 { animation-delay: 1s; }

/* ===== مكونات متحركة مخصصة ===== */
.loader-dots {
    display: inline-flex;
    gap: 5px;
}
.loader-dots div {
    width: 10px; height: 10px;
    border-radius: 50%;
    background: var(--primary, #4cc9f0);
    animation: loaderDots 1.4s infinite ease-in-out;
}
.loader-dots div:nth-child(1) { animation-delay: -0.32s; }
.loader-dots div:nth-child(2) { animation-delay: -0.16s; }

.loader-ripple {
    position: relative;
    width: 40px; height: 40px;
}
.loader-ripple div {
    position: absolute;
    border: 2px solid var(--primary, #4cc9f0);
    border-radius: 50%;
    animation: loaderRipple 1s ease-out infinite;
}
.loader-ripple div:nth-child(2) { animation-delay: -0.5s; }

.loader-spinner {
    width: 40px; height: 40px;
    border: 3px solid rgba(76, 201, 240, 0.2);
    border-top-color: var(--primary, #4cc9f0);
    border-radius: 50%;
    animation: loaderSpinner 0.8s linear infinite;
}

/* ===== تأثيرات hover ===== */
.hover-scale {
    transition: transform 0.3s ease;
}
.hover-scale:hover {
    transform: scale(1.05);
}

.hover-lift {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.hover-lift:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
}

.hover-glow {
    transition: box-shadow 0.3s ease;
}
.hover-glow:hover {
    box-shadow: 0 0 15px var(--primary, #4cc9f0);
}

/* ===== تأثيرات الصفحة ===== */
.page-transition {
    animation: fadeIn 0.5s ease;
}
.page-slide {
    animation: slideInRight 0.4s ease;
}

/* ===== دعم RTL ===== */
[dir="rtl"] .animate-fade-in-left {
    animation-name: fadeInRight;
}
[dir="rtl"] .animate-fade-in-right {
    animation-name: fadeInLeft;
}
[dir="rtl"] .animate-slide-in-left {
    animation-name: slideInRight;
}
[dir="rtl"] .animate-slide-in-right {
    animation-name: slideInLeft;
}