/* ================================================================
   Dawaei Motion & Spring Micro-Physics (v1.0.0)
   نظام الحركة الفيزيائية والمؤثرات التفاعلية للتطبيقات الهجينة
   ================================================================ */

/* ── 1. فيزياء اللمس التفاعلي (Spring Touch Feedback) ── */
button, 
.btn, 
.nav-btn, 
.quick-action-btn, 
.chip, 
.category-card, 
.profile-menu-item,
.card-interactive {
  transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1), 
              box-shadow 0.18s ease, 
              background-color 0.18s ease !important;
  will-change: transform;
  -webkit-tap-highlight-color: transparent !important;
}

button:active, 
.btn:active, 
.nav-btn:active, 
.quick-action-btn:active, 
.chip:active, 
.category-card:active, 
.profile-menu-item:active {
  transform: scale(0.965) !important;
}

/* ── 2. تأثير الموجة السائلة (Liquid Ripple Keyframes) ── */
@keyframes dawaeiRipple {
  0% {
    transform: scale(0);
    opacity: 0.6;
  }
  100% {
    transform: scale(3.5);
    opacity: 0;
  }
}

/* ── 3. هياكل التحميل المتلألئة (Skeleton Shimmer) ── */
.skeleton-shimmer {
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.03) 0%,
    rgba(255, 255, 255, 0.12) 50%,
    rgba(255, 255, 255, 0.03) 100%
  );
  background-size: 200% 100%;
  animation: skeletonPulse 1.5s infinite ease-in-out;
  border-radius: 12px;
}

@keyframes skeletonPulse {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

/* ── 4. ظهور الشاشات بالشفافية فقط (بدون transform لعدم حجب التمرير) ── */
.app-section:not(.hidden) {
  animation: sectionFadeIn 0.2s ease-out both;
}

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

/* ── 5. ظهور النوافذ المنبثقة بطريقة مرنة (Elastic Modal Entrance) ── */
.overlay:not(.hidden) .modal {
  animation: modalElasticEnter 0.32s cubic-bezier(0.34, 1.3, 0.64, 1) forwards;
}

@keyframes modalElasticEnter {
  0% {
    opacity: 0;
    transform: scale(0.92) translateY(20px);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

/* ── 6. نبض التوهج للطلبات الحية (Ambient Order Pulse) ── */
.active-order-badge {
  position: relative;
}

.active-order-badge::after {
  content: '';
  position: absolute;
  top: -2px; left: -2px; right: -2px; bottom: -2px;
  border-radius: inherit;
  border: 1.5px solid var(--color-primary, #10b981);
  animation: badgeGlowPulse 2s infinite cubic-bezier(0.4, 0, 0.6, 1);
  pointer-events: none;
}

@keyframes badgeGlowPulse {
  0%, 100% { opacity: 0.8; transform: scale(1); }
  50% { opacity: 0; transform: scale(1.1); }
}

/* ── 7. تحسينات الشريط السفلي (Glass Bottom Bar Glow) ── */
.bottom-nav .nav-btn.active .nav-icon-wrapper {
  background: var(--color-primary-bg, rgba(16, 185, 129, 0.18)) !important;
  color: var(--color-primary, #10b981) !important;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.25);
  border-radius: 12px;
  transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ── 8. حركات الدخول المتتالية العالمية (Staggered Cascade Animations) ── */
@keyframes staggerFadeUp {
  0% {
    opacity: 0;
    transform: translateY(14px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.stagger-1 { animation: staggerFadeUp 0.35s cubic-bezier(0.16, 1, 0.3, 1) 0.04s both; }
.stagger-2 { animation: staggerFadeUp 0.35s cubic-bezier(0.16, 1, 0.3, 1) 0.08s both; }
.stagger-3 { animation: staggerFadeUp 0.35s cubic-bezier(0.16, 1, 0.3, 1) 0.12s both; }
.stagger-4 { animation: staggerFadeUp 0.35s cubic-bezier(0.16, 1, 0.3, 1) 0.16s both; }
.stagger-5 { animation: staggerFadeUp 0.35s cubic-bezier(0.16, 1, 0.3, 1) 0.20s both; }

/* ── 9. التوهج الحيوي النابض للأزرار الرئيسية (Pulsing Glow Beacons) ── */
@keyframes emeraldBeaconPulse {
  0% {
    box-shadow: 0 0 0 0 rgba(0, 229, 153, 0.5), 0 8px 25px rgba(0, 0, 0, 0.3);
  }
  70% {
    box-shadow: 0 0 0 14px rgba(0, 229, 153, 0), 0 8px 30px rgba(0, 229, 153, 0.25);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(0, 229, 153, 0), 0 8px 25px rgba(0, 0, 0, 0.3);
  }
}

.pulse-beacon-emerald {
  animation: emeraldBeaconPulse 2.4s infinite cubic-bezier(0.4, 0, 0.6, 1) !important;
}

@keyframes amberBeaconPulse {
  0% {
    box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.5), 0 6px 20px rgba(0, 0, 0, 0.25);
  }
  70% {
    box-shadow: 0 0 0 12px rgba(245, 158, 11, 0), 0 6px 25px rgba(245, 158, 11, 0.25);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(245, 158, 11, 0), 0 6px 20px rgba(0, 0, 0, 0.25);
  }
}

.pulse-beacon-amber {
  animation: amberBeaconPulse 2.4s infinite cubic-bezier(0.4, 0, 0.6, 1) !important;
}

/* ── 10. بطاقات تفاعلية ثلاثية الأبعاد بلمسات هيدروليكية (3D Kinetic Cards) ── */
.card-3d-interactive {
  transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1),
              box-shadow 0.22s ease,
              border-color 0.22s ease !important;
  will-change: transform, box-shadow;
}

.card-3d-interactive:hover {
  transform: translateY(-3px) scale(1.01);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35), 0 0 16px rgba(0, 229, 153, 0.15) !important;
  border-color: rgba(52, 216, 158, 0.35) !important;
}

.card-3d-interactive:active {
  transform: translateY(0) scale(0.975) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
}

/* ── 11. هيكل عظمي زجاجي متدفق فائق الأناقة (Shimmer Skeleton Glass) ── */
.skeleton-shimmer-glass {
  background: linear-gradient(
    110deg,
    rgba(255, 255, 255, 0.03) 0%,
    rgba(255, 255, 255, 0.08) 35%,
    rgba(52, 216, 158, 0.12) 50%,
    rgba(255, 255, 255, 0.08) 65%,
    rgba(255, 255, 255, 0.03) 100%
  );
  background-size: 250% 100%;
  animation: shimmerGlassFlow 1.8s infinite linear;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.06);
}

@keyframes shimmerGlassFlow {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}