/* ════════════════════════════════════════════════════════════
   حركات مخصّصة — بديل خفيف عن animate.css (75KB) + WOW.js
   تعتمد على animation (لا transition) حتى لا تتعارض مع تأثيرات
   الـ hover الخاصة بالكروت.
   ════════════════════════════════════════════════════════════ */

@keyframes fadeInUp    { from { opacity: 0; transform: translateY(40px);  } to { opacity: 1; transform: none; } }
@keyframes fadeInDown  { from { opacity: 0; transform: translateY(-40px); } to { opacity: 1; transform: none; } }
@keyframes fadeInRight { from { opacity: 0; transform: translateX(40px);  } to { opacity: 1; transform: none; } }
@keyframes fadeInLeft  { from { opacity: 0; transform: translateX(-40px); } to { opacity: 1; transform: none; } }
@keyframes zoomIn      { from { opacity: 0; transform: scale(.92);        } to { opacity: 1; transform: none; } }

/* ── شعار الـ hero = عنصر LCP ──
   حركة "انزلاق" فقط (transform) مع إبقاء opacity:1 طوال الوقت،
   فالشعار يُرسَم فوراً (LCP غير متأثر) ومع ذلك فيه حركة دخول. */
@keyframes heroSlideDown { from { transform: translateY(-24px); } to { transform: none; } }
@keyframes heroSlideUp   { from { transform: translateY(24px);  } to { transform: none; } }

.hero-logo-icon { animation: heroSlideDown .8s ease both; }
.hero-logo-txt  { animation: heroSlideUp   .8s ease .1s both; }
.hero-tagline   { animation: fadeInUp      .9s .2s both; }

/* ── الظهور بالتمرير: مخفي حتى يضيف IntersectionObserver صنف .animated ──
   نستخدم fill-mode: backwards (لا forwards) حتى لا تبقى قيمة transform
   مثبّتة بعد الحركة فتُعطّل تأثير الـ hover للكرت. */
.wow.to-animate   { opacity: 0; }
.wow.animated     { opacity: 1; }
.wow.animated.fadeInUp    { animation: fadeInUp    .7s ease backwards; }
.wow.animated.fadeInDown  { animation: fadeInDown  .7s ease backwards; }
.wow.animated.fadeInRight { animation: fadeInRight .7s ease backwards; }
.wow.animated.fadeInLeft  { animation: fadeInLeft  .7s ease backwards; }
.wow.animated.zoomIn      { animation: zoomIn      .7s ease backwards; }

/* احترام تفضيل تقليل الحركة (وصولية) */
@media (prefers-reduced-motion: reduce) {
  .hero-logo-icon,
  .hero-logo-txt,
  .hero-tagline { animation: none !important; }
  .wow.to-animate { opacity: 1 !important; animation: none !important; }
}