/* =====================================================================
   animations.css — الحركات والتأثيرات الدقيقة
   كل الحركات تُعطَّل تلقائيًا لمن يفضّل تقليل الحركة (prefers-reduced-motion)
   ===================================================================== */

@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.08); opacity: .85; } }
@keyframes slide { 0% { transform: translateX(-120%); } 100% { transform: translateX(350%); } }
@keyframes dropIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
@keyframes pop { 0% { transform: scale(.4); opacity: 0; } 70% { transform: scale(1.12); } 100% { transform: scale(1); opacity: 1; } }
@keyframes ring { 0% { transform: scale(1); opacity: .7; } 100% { transform: scale(1.35); opacity: 0; } }
@keyframes scrollDot { 0% { opacity: 0; transform: translateY(0); } 30% { opacity: 1; } 100% { opacity: 0; transform: translateY(14px); } }
@keyframes floatY { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes fadeUp { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
@keyframes shimmer { 0% { transform: translateX(120%) skewX(-20deg); } 100% { transform: translateX(-220%) skewX(-20deg); } }
@keyframes twinkle { 0%, 100% { opacity: .3; } 50% { opacity: 1; } }

/* ---- الظهور عند التمرير (يعمل فقط عند وجود JS) ---- */
.js [data-reveal] { opacity: 0; transform: translateY(32px); transition: opacity .8s var(--ease), transform .8s var(--ease); transition-delay: var(--d, 0ms); }
.js [data-reveal].is-visible { opacity: 1; transform: none; }

/* ---- Hero: دخول متتابع ---- */
.hero__kicker, .hero h1, .hero__lead, .hero__cta, .hero__points { opacity: 0; animation: fadeUp .9s var(--ease) forwards; }
.hero__kicker { animation-delay: .25s; }
.hero h1 { animation-delay: .4s; }
.hero__lead { animation-delay: .55s; }
.hero__cta { animation-delay: .7s; }
.hero__points { animation-delay: .85s; }
.hero__art { animation: floatY 7s ease-in-out infinite; }
.hero__art .twinkle { animation: twinkle 3s ease-in-out infinite; }
.hero__art .twinkle:nth-child(2n) { animation-delay: 1.2s; }
.hero__art .twinkle:nth-child(3n) { animation-delay: 2s; }

/* ---- لمعان على زر الذهب ---- */
.btn--gold::after { content: ''; position: absolute; inset-block: 0; inset-inline-start: 0; width: 40%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .55), transparent); transform: translateX(120%) skewX(-20deg); pointer-events: none; }
.btn--gold:hover::after { animation: shimmer 1s; }

/* تأثير دوران بسيط للأيقونات عند التحويم */
.service-card:hover .icon-badge--lg { animation: pop .5s var(--ease); }

/* ---- تقليل الحركة ---- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; transition-delay: 0ms !important; }
  .js [data-reveal] { opacity: 1; transform: none; }
  .hero__kicker, .hero h1, .hero__lead, .hero__cta, .hero__points { opacity: 1; }
}