/* ============================================================
   الحركات والانيميشن — كل الـ keyframes ومحفزات الحركة
   ============================================================ */

header.site-header{ transition:box-shadow .3s ease; }

.ring-rotate{ animation:spin 40s linear infinite; transform-origin:center; }
.ring-rotate-rev{ animation:spin-rev 55s linear infinite; transform-origin:center; }
.flame-flicker{ animation:flicker 1.8s ease-in-out infinite; transform-origin:center bottom; }
.hotline-chip svg{ animation:ring 2.4s ease-in-out infinite; }
.float-wa{ animation:pulse-wa 2.6s ease-in-out infinite; }
.badge-spin{ animation:spin 30s linear infinite; }

@keyframes spin{ to{ transform:rotate(360deg); } }
@keyframes spin-rev{ to{ transform:rotate(-360deg); } }
@keyframes flicker{
  0%,100%{ transform:scaleY(1) scaleX(1); }
  50%{ transform:scaleY(1.08) scaleX(.95); }
}
@keyframes ring{
  0%,100%{ transform:rotate(0); }
  10%{ transform:rotate(-15deg); }
  20%{ transform:rotate(12deg); }
  30%{ transform:rotate(-8deg); }
  40%{ transform:rotate(0); }
}
@keyframes pulse-wa{
  0%,100%{ box-shadow:0 10px 26px rgba(37,211,102,.5); }
  50%{ box-shadow:0 10px 26px rgba(37,211,102,.85),0 0 0 10px rgba(37,211,102,.12); }
}
@keyframes fadeInUp{
  from{ opacity:0; transform:translateY(28px); }
  to{ opacity:1; transform:translateY(0); }
}

/* عناصر الظهور التدريجي عند التمرير (يتحكم فيها animation.js) */
.reveal{ opacity:0; transform:translateY(28px); transition:opacity .7s ease, transform .7s ease; }
.reveal.in{ opacity:1; transform:none; }
.reveal-delay-1{ transition-delay:.08s; }
.reveal-delay-2{ transition-delay:.16s; }
.reveal-delay-3{ transition-delay:.24s; }
.reveal-delay-4{ transition-delay:.32s; }

.card, .area-chip, .post-card, .btn{ will-change:transform; }