/* ============================================
   وصال — أنيميشن هادئ (ظهور تدريجي مع التمرير)
   - يُفعّل فقط عند إضافة html.wesal-anim (سكربت في الهيدر) لمنع أي وميض.
   - يُعطّل تلقائيًا مع تفضيل تقليل الحركة، وبدون جافاسكربت كل شيء يظهر طبيعي.
   ============================================ */

@media (prefers-reduced-motion: no-preference) {

  html.wesal-anim :is(
    .section-head,
    .step-card,
    .category-card,
    .product-card,
    .promise-item,
    .cta-strip,
    .page-hero > *,
    .hero-copy > *,
    .hero-photos .ph,
    .about-body > *,
    .policy-card,
    .contact-card,
    .faq details,
    .note-strip,
    .p-info,
    .breadcrumb,
    .empty-state,
    .order-card,
    .confirm-icon,
    .mini-item,
    .cart-item
  ) {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.7s cubic-bezier(0.2, 0.8, 0.2, 1),
                transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1);
  }

  /* المعرض مثبّت (sticky) — تلاشٍ فقط بدون إزاحة حتى لا يتأثر التثبيت */
  html.wesal-anim .p-gallery {
    opacity: 0;
    transition: opacity 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
  }

  /* عند الدخول إلى نطاق الرؤية */
  html.wesal-anim .wesal-in {
    opacity: 1 !important;
    transform: none !important;
  }
}