/* الحركة — خفيفة وهادئة، وكلها تنطفي مع «تقليل الحركة» (base.css).
   الحالة الافتراضية «ظاهر»: الإخفاء الأولي بس لما JS يشتغل (initReveal يحط .reveal و --i للترتيب). */

/* ظهور متدرّج عند التمرير: البطاقات تطلع وحدة ورا الثانية */
html.js .reveal:not(.is-in) { opacity: 0; transform: translateY(28px) scale(.97); }
html.js .reveal {
  transition: opacity .55s var(--ease-out), transform .7s var(--ease-spring);
  transition-delay: calc(var(--i, 0) * 90ms);
}

/* رفعة عند المرور بالماوس (الحاسبة بس — باللمس ما تفيد) */
@media (hover: hover) {
  .pkg, .addon, .album-card, .hall-addon, .cat-card {
    transition: transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out), border-color var(--dur-2);
  }
  .pkg:hover { transform: translateY(-6px); box-shadow: var(--sh-float); }
  .pkg--rec:hover { box-shadow: var(--sh-glow), var(--sh-float); }
  .addon:hover, .album-card:hover, .hall-addon:hover { transform: translateY(-3px); box-shadow: var(--sh-float); }
  .item__ico { transition: transform var(--dur-2) var(--ease-spring); }
  .pkg:hover .item__ico { transform: scale(1.08) rotate(-5deg); }
  .btn--wa:hover .i { animation: nudge .5s var(--ease-out); }
}
/* ضغطة باللمس: البطاقة تنضغط شوية */
.pkg:active { transform: scale(.995); }

/* الباقة المنصوح بيها: لمعة تمر على السعر كل كم ثانية + نبضة خفيفة للشارة */
.pkg--rec .pkg__price { position: relative; overflow: hidden; }
.pkg--rec .pkg__price::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .6) 50%, transparent 70%);
  transform: translateX(110%); animation: shine 5s var(--ease-out) 1.5s infinite;
}
.pkg--rec .badge--rec { animation: pulse 2.8s ease-in-out infinite; }

/* البنود اللي تنفتح بـ«شوف كل التفاصيل» تنزل بنعومة */
html.js .pkg--collapsible:not(.is-collapsed) .item:nth-child(n+4) { animation: rise .4s var(--ease-out) both; }

/* أرقام خطوات الحجز تنطّ لما تظهر */
html.js .steps__list li.is-in::before { animation: pop .5s var(--ease-spring) both; animation-delay: calc(var(--i, 0) * 90ms + .2s); }

@keyframes shine { 0% { transform: translateX(110%); } 35%, 100% { transform: translateX(-110%); } }
@keyframes pulse { 0%, 100% { box-shadow: 0 0 0 0 var(--accent-24); } 50% { box-shadow: 0 0 0 6px transparent; } }
@keyframes rise { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@keyframes pop { from { transform: scale(.4); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes nudge { 0%, 100% { transform: none; } 30% { transform: rotate(-12deg) scale(1.1); } 60% { transform: rotate(8deg); } }