/* ══════════════════════════════════════ */
/*      KUBE-OPS ANIMATION STYLES         */
/* ══════════════════════════════════════ */

/* ── Easing Variables ── */
:root {
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-out-back: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-out-circ: cubic-bezier(0, 0.55, 0.45, 1);
}

/* ── الحالة الأولية قبل الأنيميشن ── */
.will-animate {
  will-change: transform, opacity;
}

/* Fade Up — الأكثر استخداماً */
.anim-fade-up {
  opacity: 0;
  transform: translateY(36px);
  transition: opacity 0.75s var(--ease-out-expo),
              transform 0.75s var(--ease-out-expo);
}

/* Fade Down */
.anim-fade-down {
  opacity: 0;
  transform: translateY(-24px);
  transition: opacity 0.65s var(--ease-out-quart),
              transform 0.65s var(--ease-out-quart);
}

/* Fade Right (جاي من الشمال) */
.anim-fade-right {
  opacity: 0;
  transform: translateX(-44px);
  transition: opacity 0.75s var(--ease-out-expo),
              transform 0.75s var(--ease-out-expo);
}

/* Fade Left (جاي من اليمين) */
.anim-fade-left {
  opacity: 0;
  transform: translateX(44px);
  transition: opacity 0.75s var(--ease-out-expo),
              transform 0.75s var(--ease-out-expo);
}

/* Zoom In — خفيف ومريح */
.anim-zoom {
  opacity: 0;
  transform: scale(0.92);
  transition: opacity 0.65s var(--ease-out-quart),
              transform 0.65s var(--ease-out-quart);
}

/* ── Hero-specific: دخول سلس من تحت مع bounce خفيف ── */
.anim-hero {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.9s var(--ease-out-expo),
              transform 0.9s var(--ease-out-back);
}

/* ── الحالة بعد الأنيميشن ── */
.animate-in {
  opacity: 1 !important;
  transform: translate(0, 0) scale(1) !important;
}

/* ── تأخيرات جاهزة ── */
.delay-50  { transition-delay:  50ms !important; }
.delay-100 { transition-delay: 100ms !important; }
.delay-150 { transition-delay: 150ms !important; }
.delay-200 { transition-delay: 200ms !important; }
.delay-250 { transition-delay: 250ms !important; }
.delay-300 { transition-delay: 300ms !important; }
.delay-400 { transition-delay: 400ms !important; }
.delay-500 { transition-delay: 500ms !important; }

/* ── إيقاف الأنيميشن لأصحاب الـ reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  .will-animate {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}