/* ==========================================================================
   طبقة الحيوية والحركة — شمس العراق
   المبدأ: حركات قصيرة وسريعة على transform/opacity فقط (خفيفة على الهاتف)،
   وكلها تتوقّف تلقائياً لمن فعّل «تقليل الحركة» في جهازه.
   ========================================================================== */
:root {
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --spring: cubic-bezier(.34, 1.56, .64, 1);
}

/* 1) دخول الصفحة — شفافية فقط (التحويل كان سيكسر العناصر الثابتة داخلها) */
@keyframes pageIn { from { opacity: 0; } to { opacity: 1; } }
main { animation: pageIn .35s ease both; }

/* 2) الظهور عند التمرير — يضيف motion.js الصنف rv؛ بدون JS يبقى كل شيء ظاهراً */
.rv { opacity: 0; transform: translateY(18px) scale(.98);
  transition: opacity .55s var(--ease-out), transform .55s var(--ease-out);
  transition-delay: var(--rv-d, 0ms); }
.rv.in { opacity: 1; transform: none; }

/* 3) الهيدر: تدرّج شمسي يتحرّك ببطء + شعار يدور عند الدخول */
.topbar { background-size: 220% 220%; animation: sunDrift 14s ease-in-out infinite; }
@keyframes sunDrift { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
.brand .logo { animation: logoIn .9s var(--spring) both; transition: transform .5s var(--spring); }
@keyframes logoIn { from { transform: rotate(-120deg) scale(.4); opacity: 0; } to { transform: none; opacity: 1; } }
@media (hover: hover) { .brand:hover .logo { transform: rotate(18deg) scale(1.08); } }

/* 4) بطاقة المنتج */
.product-card { transition: transform .3s var(--ease-out), box-shadow .3s var(--ease-out), border-color .2s ease; }
.product-card .img img { transition: transform .55s var(--ease-out), opacity .45s ease; }
@media (hover: hover) {
  .product-card:hover { transform: translateY(-6px); box-shadow: 0 18px 36px rgba(230, 119, 0, .22); }
  .product-card:hover .img img { transform: scale(1.07); }
}
.product-card:active { transform: scale(.98); transition-duration: .12s; }
/* وميض هيكلي أثناء تحميل الصورة، ثم تظهر الصورة بنعومة */
.img.loading, .tile-thumb.loading {
  background: linear-gradient(100deg, #f6efe6 30%, #fffaf3 50%, #f6efe6 70%);
  background-size: 300% 100%; animation: shimmer 1.15s linear infinite; }
.img.loading img, .tile-thumb.loading img { opacity: 0; }
@keyframes shimmer { to { background-position: -150% 0; } }
/* لمعة تعبر شارتي الخصم والتقسيط */
.discount-badge, .installment-badge { overflow: hidden; }
.discount-badge::after, .installment-badge::after {
  content: ""; position: absolute; inset: 0; transform: translateX(-130%);
  background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .6) 50%, transparent 70%); }
@media (hover: hover) {
  .product-card:hover .discount-badge::after,
  .product-card:hover .installment-badge::after { transform: translateX(130%); transition: transform .75s ease; }
}
.rv.in .discount-badge { animation: badgePop .5s var(--spring) .2s both; }
/* زر الإضافة بعد النجاح */
.add-btn.added, .btn.added { background: var(--success) !important; border-color: var(--success) !important; color: #fff !important; }

/* 5) الأزرار: ضغطة نابضة + تموّج من مكان اللمس */
.btn { position: relative; overflow: hidden; transition: transform .2s var(--spring), box-shadow .2s ease, background .2s ease; }
.btn:active { transform: scale(.95); }
.ripple { position: absolute; border-radius: 50%; pointer-events: none; transform: scale(0);
  background: rgba(255, 255, 255, .55); animation: ripple .6s var(--ease-out) forwards; }
.btn-ghost .ripple, .btn-yellow .ripple { background: rgba(255, 140, 0, .3); }
@keyframes ripple { to { transform: scale(4); opacity: 0; } }

/* 6) الأرقام الحمراء: تقفز عند ظهورها ثم نبضتان لطيفتان */
@keyframes badgePop { 0% { transform: scale(0); } 65% { transform: scale(1.28); } 100% { transform: scale(1); } }
@keyframes badgeRing { 0% { box-shadow: 0 0 0 0 rgba(198, 40, 40, .55); } 100% { box-shadow: 0 0 0 9px rgba(198, 40, 40, 0); } }
.bn-badge, .badge-count, .hub-badge { animation: badgePop .45s var(--spring) both, badgeRing 1.6s ease-out .6s 2; }
.badge-bump { animation: badgePop .45s var(--spring) both !important; }

/* 7) مربّعات الرئيسية */
.tile { transition: transform .3s var(--spring), box-shadow .25s ease; }
@media (hover: hover) { .tile:hover { transform: translateY(-5px) rotate(-.5deg); } }
.tile:active { transform: scale(.97); }
.tile-thumb img { transition: transform .5s var(--ease-out), opacity .4s ease; }
@media (hover: hover) { .tile:hover .tile-thumb img { transform: scale(1.06); } }

/* 8) اختصارات «حسابي» */
.hub-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 12px; }
.hub-tile { position: relative; display: flex; flex-direction: column; align-items: center; gap: 7px;
  padding: 18px 8px 14px; background: #fff; border: 2px solid var(--ink); border-radius: var(--radius);
  box-shadow: var(--shadow); color: var(--ink); font-weight: 800; text-decoration: none;
  transition: transform .28s var(--spring), box-shadow .25s ease; }
.hub-tile:hover { transform: translateY(-4px); box-shadow: var(--shadow-hover); color: var(--ink); }
.hub-tile:active { transform: scale(.95); }
.hub-ic { font-size: 30px; line-height: 1; transition: transform .4s var(--spring); }
@media (hover: hover) { .hub-tile:hover .hub-ic { transform: scale(1.18) rotate(-8deg); } }
.hub-label { font-size: 14px; }
.hub-badge { position: absolute; top: -9px; left: -9px; min-width: 25px; height: 25px; padding: 0 7px;
  border-radius: 13px; background: var(--danger); color: #fff; font-size: 12.5px; font-weight: 800;
  display: flex; align-items: center; justify-content: center; border: 2px solid #fff; }
.hub-badge-soft { background: var(--sun-orange); }

/* 9) وسم «جديد» على الطلبات */
.new-pill { display: inline-block; background: var(--danger); color: #fff; font-size: 11px; font-weight: 800;
  padding: 2px 9px; border-radius: 999px; margin-inline-end: 6px; vertical-align: middle;
  animation: badgePop .45s var(--spring) both; }
.card.is-new { border-color: var(--sun-orange); box-shadow: 0 0 0 3px rgba(255, 140, 0, .16); animation: newGlow 2.4s ease-out 1; }
@keyframes newGlow { 0% { box-shadow: 0 0 0 0 rgba(255, 140, 0, .55); } 100% { box-shadow: 0 0 0 3px rgba(255, 140, 0, .16); } }

/* 10) رسائل منبثقة (بدل الشريط الثابت أعلى الصفحة) */
.toast-stack { position: fixed; top: calc(var(--header-h, 60px) + 10px); left: 50%; transform: translateX(-50%);
  z-index: 300; display: flex; flex-direction: column; gap: 8px; width: min(92vw, 440px); pointer-events: none; }
.toast { pointer-events: auto; position: relative; display: flex; align-items: center; gap: 10px; cursor: pointer;
  padding: 12px 14px; border-radius: 14px; background: #fff; border: 2px solid var(--ink);
  box-shadow: 0 14px 32px rgba(0, 0, 0, .18); font-weight: 700; font-size: 14px; line-height: 1.5;
  animation: toastIn .45s var(--spring) both; overflow: hidden; color: var(--ink); }
.toast .t-ic { font-size: 20px; flex: none; }
.toast.success { border-color: var(--success); }
.toast.danger, .toast.error { border-color: var(--danger); }
.toast.warning { border-color: var(--sun-yellow); }
.toast.info { border-color: #1565c0; }
.toast .t-life { position: absolute; bottom: 0; right: 0; height: 3px; width: 100%; background: var(--sun-orange); opacity: .5;
  transform-origin: right; animation: tLife var(--life, 4s) linear forwards; }
.toast.success .t-life { background: var(--success); }
@keyframes tLife { to { transform: scaleX(0); } }
.toast.out { animation: toastOut .35s var(--ease-out) forwards; }
@keyframes toastIn { from { opacity: 0; transform: translateY(-16px) scale(.94); } to { opacity: 1; transform: none; } }
@keyframes toastOut { to { opacity: 0; transform: translateY(-10px) scale(.96); } }

/* 11) طيران المنتج إلى السلة + اهتزاز السلة */
.fly-img { position: fixed; z-index: 400; border-radius: 14px; pointer-events: none; object-fit: cover;
  box-shadow: 0 12px 30px rgba(0, 0, 0, .28);
  transition: transform .75s cubic-bezier(.55, -.35, .65, 1.25), opacity .75s ease; }
@keyframes cartShake { 0%, 100% { transform: rotate(0); } 20% { transform: rotate(-16deg) scale(1.2); }
  45% { transform: rotate(12deg) scale(1.15); } 70% { transform: rotate(-6deg); } }
.cart-shake { display: inline-block; animation: cartShake .6s ease; }

/* 12) الشريط السفلي: الأيقونة النشطة تنبض عند الوصول */
.bn-item.active .bn-ic { animation: bnActive .55s var(--spring); }
@keyframes bnActive { 0% { transform: scale(.65); } 100% { transform: scale(1); } }

/* 13) عناوين الأقسام: الشريط الملوّن ينمو عند الظهور */
.section-title.rv::before { transform: translateY(-50%) scaleY(0); transition: transform .5s var(--spring) .15s; }
.section-title.rv.in::before { transform: translateY(-50%) scaleY(1); }

/* إمكانية الوصول: إيقاف الحركة لمن طلب ذلك */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .rv { opacity: 1 !important; transform: none !important; }
  .topbar { animation: none; }
}