/* ===== ANIMATIONS & TRANSITIONS ===== */

/* تأثيرات الحركة الأساسية */
:root {
  --animation-speed-fast: 0.2s;
  --animation-speed-normal: 0.3s;
  --animation-speed-slow: 0.5s;
  --animation-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --animation-ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
  --animation-ease-elastic: cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* ===== INACTIVITY WARNING ANIMATIONS ===== */

.animate-fadeIn {
  animation: fadeIn 0.3s ease-out forwards;
}

.animate-scaleIn {
  animation: scaleIn 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* ===== MENU ANIMATIONS ===== */

/* انزلاق القوائم */
.menu-slide-in {
  animation: menuSlideIn var(--animation-speed-normal) var(--animation-ease) forwards;
}

.menu-slide-out {
  animation: menuSlideOut var(--animation-speed-normal) var(--animation-ease) forwards;
}

.menu-fade-in {
  animation: menuFadeIn var(--animation-speed-normal) var(--animation-ease) forwards;
}

.menu-fade-out {
  animation: menuFadeOut var(--animation-speed-fast) var(--animation-ease) forwards;
}

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

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

@keyframes menuFadeIn {
  from {
    opacity: 0;
    backdrop-filter: blur(0px);
  }
  to {
    opacity: 1;
    backdrop-filter: blur(12px);
  }
}

@keyframes menuFadeOut {
  from {
    opacity: 1;
    backdrop-filter: blur(12px);
  }
  to {
    opacity: 0;
    backdrop-filter: blur(0px);
  }
}

/* ===== SLIDE ANIMATIONS ===== */

/* انتقال السلايدات */
.slide-left {
  animation: slideLeft var(--animation-speed-normal) var(--animation-ease) forwards;
}

.slide-right {
  animation: slideRight var(--animation-speed-normal) var(--animation-ease) forwards;
}

.slide-up {
  animation: slideUp var(--animation-speed-normal) var(--animation-ease) forwards;
}

.slide-down {
  animation: slideDown var(--animation-speed-normal) var(--animation-ease) forwards;
}

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

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

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

@keyframes slideDown {
  from { transform: translateY(-100%); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

/* شريط التقدم للانتقالات */
.progress-bar {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  background: linear-gradient(90deg, #3b82f6, #8b5cf6, #ec4899);
  z-index: 9999;
  transition: width var(--animation-speed-normal) var(--animation-ease);
}

.progress-animation {
  animation: progressPulse 1.5s ease-in-out infinite;
}

@keyframes progressPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

/* ===== BUTTON ANIMATIONS ===== */

/* تأثير الضغط والتمرير */
.btn-animated {
  position: relative;
  overflow: hidden;
  transition: all var(--animation-speed-fast) var(--animation-ease);
  transform: translateZ(0);
}

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

.btn-animated:active {
  transform: translateY(0) scale(0.98);
  transition: all 0.1s var(--animation-ease);
}

/* تأثير Ripple */
.btn-ripple {
  position: relative;
  overflow: hidden;
}

.btn-ripple::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
  transform: translate(-50%, -50%);
  transition: width 0.6s, height 0.6s;
  pointer-events: none;
}

.btn-ripple:active::before {
  width: 300px;
  height: 300px;
}

/* تدرج الألوان عند التمرير */
.btn-gradient-hover {
  background: linear-gradient(45deg, #3b82f6, #1d4ed8);
  transition: all var(--animation-speed-normal) var(--animation-ease);
}

.btn-gradient-hover:hover {
  background: linear-gradient(45deg, #1d4ed8, #3b82f6);
  box-shadow: 0 10px 30px rgba(59, 130, 246, 0.3);
}

/* ===== MODAL ANIMATIONS ===== */

/* تكبير وتصغير النوافذ المنبثقة */
.modal-zoom-in {
  animation: modalZoomIn var(--animation-speed-normal) var(--animation-ease-bounce) forwards;
}

.modal-zoom-out {
  animation: modalZoomOut var(--animation-speed-fast) var(--animation-ease) forwards;
}

.modal-backdrop-in {
  animation: backdropFadeIn var(--animation-speed-normal) var(--animation-ease) forwards;
}

.modal-backdrop-out {
  animation: backdropFadeOut var(--animation-speed-fast) var(--animation-ease) forwards;
}

@keyframes modalZoomIn {
  from {
    transform: scale(0.7) translateY(-50px);
    opacity: 0;
  }
  to {
    transform: scale(1) translateY(0);
    opacity: 1;
  }
}

@keyframes modalZoomOut {
  from {
    transform: scale(1) translateY(0);
    opacity: 1;
  }
  to {
    transform: scale(0.8) translateY(50px);
    opacity: 0;
  }
}

@keyframes backdropFadeIn {
  from {
    opacity: 0;
    backdrop-filter: blur(0px);
  }
  to {
    opacity: 1;
    backdrop-filter: blur(8px);
  }
}

@keyframes backdropFadeOut {
  from {
    opacity: 1;
    backdrop-filter: blur(8px);
  }
  to {
    opacity: 0;
    backdrop-filter: blur(0px);
  }
}

/* ===== NOTIFICATION ANIMATIONS ===== */

/* انزلاق التنبيهات */
.notification-slide-in-right {
  animation: notificationSlideInRight var(--animation-speed-normal) var(--animation-ease-bounce) forwards;
}

.notification-slide-in-bottom {
  animation: notificationSlideInBottom var(--animation-speed-normal) var(--animation-ease-bounce) forwards;
}

.notification-fade-out {
  animation: notificationFadeOut var(--animation-speed-normal) var(--animation-ease) forwards;
}

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

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

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

/* ===== PAGE TRANSITION ANIMATIONS ===== */

/* انتقال الصفحات */
.page-fade-in {
  animation: pageFadeIn var(--animation-speed-slow) var(--animation-ease) forwards;
}

.page-fade-out {
  animation: pageFadeOut var(--animation-speed-fast) var(--animation-ease) forwards;
}

.page-slide-in {
  animation: pageSlideIn var(--animation-speed-slow) var(--animation-ease) forwards;
}

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

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

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

/* ===== FORM & INPUT ANIMATIONS ===== */

/* تأثيرات الحقول */
.input-focus {
  transition: all var(--animation-speed-normal) var(--animation-ease);
  position: relative;
}

.input-focus:focus {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(59, 130, 246, 0.15);
  border-color: #3b82f6;
}

.input-focus::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0;
  height: 2px;
  background: linear-gradient(90deg, #3b82f6, #8b5cf6);
  transition: all var(--animation-speed-normal) var(--animation-ease);
  transform: translateX(-50%);
}

.input-focus:focus::after {
  width: 100%;
}

/* تأثير التوهج */
.input-glow {
  transition: all var(--animation-speed-normal) var(--animation-ease);
}

.input-glow:focus {
  box-shadow:
    0 0 0 3px rgba(59, 130, 246, 0.1),
    0 0 20px rgba(59, 130, 246, 0.2);
  border-color: #3b82f6;
}

/* ===== TAB ANIMATIONS ===== */

/* انتقال التبويبات */
.tab-slide {
  transition: all var(--animation-speed-normal) var(--animation-ease);
}

.tab-content-enter {
  animation: tabContentEnter var(--animation-speed-normal) var(--animation-ease) forwards;
}

.tab-content-exit {
  animation: tabContentExit var(--animation-speed-fast) var(--animation-ease) forwards;
}

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

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

/* مؤشر التبويب المتحرك */
.tab-indicator {
  position: absolute;
  bottom: 0;
  height: 3px;
  background: linear-gradient(90deg, #3b82f6, #8b5cf6);
  border-radius: 2px;
  transition: all var(--animation-speed-normal) var(--animation-ease);
}

/* ===== LOADING ANIMATIONS ===== */

/* دوران التحميل */
.loading-spin {
  animation: loadingSpin 1s linear infinite;
}

.loading-pulse {
  animation: loadingPulse 1.5s ease-in-out infinite;
}

.loading-dots {
  animation: loadingDots 1.4s ease-in-out infinite;
}

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

@keyframes loadingPulse {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.5;
    transform: scale(1.05);
  }
}

@keyframes loadingDots {
  0%, 80%, 100% {
    transform: scale(0);
    opacity: 0.5;
  }
  40% {
    transform: scale(1);
    opacity: 1;
  }
}

/* ===== HOVER EFFECTS ===== */

/* تأثيرات التمرير المتقدمة */
.hover-lift {
  transition: all var(--animation-speed-normal) var(--animation-ease);
}

.hover-lift:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
}

.hover-glow {
  transition: all var(--animation-speed-normal) var(--animation-ease);
}

.hover-glow:hover {
  box-shadow: 0 0 30px rgba(59, 130, 246, 0.3);
  border-color: #3b82f6;
}

.hover-scale {
  transition: all var(--animation-speed-fast) var(--animation-ease);
}

.hover-scale:hover {
  transform: scale(1.05);
}

/* ===== STAGGER ANIMATIONS ===== */

/* تأثيرات متتالية للقوائم */
.stagger-item {
  opacity: 0;
  transform: translateY(20px);
  animation: staggerFadeIn var(--animation-speed-normal) var(--animation-ease) forwards;
}

.stagger-item:nth-child(1) { animation-delay: 0.1s; }
.stagger-item:nth-child(2) { animation-delay: 0.2s; }
.stagger-item:nth-child(3) { animation-delay: 0.3s; }
.stagger-item:nth-child(4) { animation-delay: 0.4s; }
.stagger-item:nth-child(5) { animation-delay: 0.5s; }
.stagger-item:nth-child(6) { animation-delay: 0.6s; }

@keyframes staggerFadeIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ===== UTILITY CLASSES ===== */

/* فئات مساعدة للرسوم المتحركة */
.animate-bounce-in {
  animation: bounceIn var(--animation-speed-normal) var(--animation-ease-bounce) forwards;
}

.animate-shake {
  animation: shake 0.5s var(--animation-ease) forwards;
}

.animate-flash {
  animation: flash 1s var(--animation-ease) forwards;
}

@keyframes bounceIn {
  from {
    opacity: 0;
    transform: scale(0.3);
  }
  50% {
    opacity: 1;
    transform: scale(1.05);
  }
  70% {
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

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

@keyframes flash {
  0%, 50%, 100% { opacity: 1; }
  25%, 75% { opacity: 0.5; }
}

/* ===== RESPONSIVE ANIMATIONS ===== */

/* تقليل الرسوم المتحركة للأجهزة الضعيفة */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* تحسين الأداء للأجهزة المحمولة */
@media (max-width: 768px) {
  :root {
    --animation-speed-fast: 0.15s;
    --animation-speed-normal: 0.25s;
    --animation-speed-slow: 0.4s;
  }
}