/* أنميشن نبض القلب بجانب اسم التطبيق */
.animate-heartbeat {
  animation: heartbeat 1.2s infinite;
  transform-origin: center;
}
@keyframes heartbeat {
  0%, 100% { transform: scale(1); }
  10% { transform: scale(1.1); }
  20% { transform: scale(0.95); }
  30% { transform: scale(1.15); }
  40% { transform: scale(0.92); }
  50% { transform: scale(1.1); }
  60%, 90% { transform: scale(1); }
}
/* أنميشن للأزرار الصغيرة في صفحة تسجيل الدخول */
.animate-bounce-slow {
  animation: bounce-slow 2.2s infinite;
}
@keyframes bounce-slow {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}
body {
  background: #fff;
}

/* Landing page logo float animation */
.logo-float {
  animation: logoFloat 3s ease-in-out infinite;
}
@keyframes logoFloat {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-10px); }
}
html {
  scroll-behavior: smooth;
}

/* ──── Landing page reveal-on-scroll ──── */
.reveal-on-scroll {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.reveal-on-scroll.revealed {
  opacity: 1;
  transform: translateY(0);
}

/* ──── Modal animations ──── */
.modal-backdrop-enter {
  animation: backdropFadeIn 0.3s ease-out forwards;
}
@keyframes backdropFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.modal-card-enter {
  animation: modalSlideUp 0.4s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
@keyframes modalSlideUp {
  from { opacity: 0; transform: translateY(40px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ──── Modal detail items stagger ──── */
.detail-item {
  opacity: 0;
  animation: detailFadeIn 0.4s ease-out forwards;
}
@keyframes detailFadeIn {
  from { opacity: 0; transform: translateX(12px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* ──── WhatsApp pulse ring ──── */
.whatsapp-pulse {
  position: relative;
}
.whatsapp-pulse::before {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 2px solid rgba(34, 197, 94, 0.4);
  animation: whatsappRing 2s ease-out infinite;
}
@keyframes whatsappRing {
  0%   { transform: scale(1); opacity: 1; }
  100% { transform: scale(1.5); opacity: 0; }
}

/* ═══════════════════════════════════════════════════════════════
   CINEMATIC LANDING PAGE — HERO & FLOW ANIMATIONS
   ═══════════════════════════════════════════════════════════════ */

/* ── Animated grid background ── */
.hero-grid {
  background-size: 60px 60px;
  background-image:
    linear-gradient(to right, rgba(148,163,184,0.08) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(148,163,184,0.08) 1px, transparent 1px);
  animation: heroGridShift 40s linear infinite;
}
@keyframes heroGridShift {
  0%   { background-position: 0 0; }
  100% { background-position: 60px 60px; }
}

/* ── Floating decorative orbs ── */
.orb-drift {
  animation: orbDrift 18s ease-in-out infinite;
}
.orb-drift-reverse {
  animation: orbDriftReverse 22s ease-in-out infinite;
}
@keyframes orbDrift {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33%      { transform: translate(30px, -20px) scale(1.05); }
  66%      { transform: translate(-15px, 15px) scale(0.97); }
}
@keyframes orbDriftReverse {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33%      { transform: translate(-25px, 15px) scale(0.96); }
  66%      { transform: translate(20px, -25px) scale(1.04); }
}

/* ── Hero text entrance ── */
.hero-text-enter {
  animation: heroTextEnter 1s cubic-bezier(0.22, 1, 0.36, 1) 0.2s both;
}
@keyframes heroTextEnter {
  from { opacity: 0; transform: translateY(40px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Hero dashboard entrance ── */
.hero-dashboard-enter {
  animation: heroDashboardEnter 1.1s cubic-bezier(0.22, 1, 0.36, 1) 0.5s both;
}
@keyframes heroDashboardEnter {
  from { opacity: 0; transform: translateY(50px) scale(0.95); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ── Subtle 3D tilt on dashboard card ── */
.dashboard-tilt {
  transform: perspective(1000px) rotateY(-2deg) rotateX(1deg);
  transition: transform 0.5s ease;
}
.dashboard-tilt:hover {
  transform: perspective(1000px) rotateY(0deg) rotateX(0deg);
}

/* ── Chart bar growing animation ── */
.chart-bar-grow {
  animation: chartBarGrow 0.8s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes chartBarGrow {
  from { transform: scaleY(0); transform-origin: bottom; }
  to   { transform: scaleY(1); transform-origin: bottom; }
}

/* ── Patient row stagger entrance ── */
.patient-row-enter {
  animation: patientRowEnter 0.5s ease-out both;
}
@keyframes patientRowEnter {
  from { opacity: 0; transform: translateX(15px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* ── Automation flow active indicator pulse ── */
.flow-indicator {
  animation: flowPulse 1.4s ease-in-out infinite;
}
@keyframes flowPulse {
  0%, 100% { opacity: 1; transform: translateX(-50%) scaleX(1); }
  50%      { opacity: 0.5; transform: translateX(-50%) scaleX(1.4); }
}