/* =========================================================
   Next Star — طبقة الحركة واللمسات
   شهب في الخلفية + تفاعل احترافي مع الماوس واللمس
   كل حاجة هنا مربوطة بمفتاح الحركة: html[data-motion='off'] = سكون تام
   ========================================================= */

/* ---------- ١. سماء الشهب (canvas — الرسم من sky.js) ---------- */
.sky {
  position: fixed;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0.9;
}

html[data-motion='off'] .sky {
  display: none !important;
}

/* ---------- ٢. أساس الحركة (مرة واحدة لكل العناصر) ---------- */
html[data-motion='on'] :is(
    .btn,
    .icon-btn,
    .step-btn,
    .chip,
    .card,
    .card-ic,
    .title-list li,
    .mission-item,
    .scene,
    .req-list li,
    .plain-list li,
    .note-list li,
    .model-row,
    .banner .btn,
    .mi-del,
    .hook-box
  ) {
  transition:
    transform 0.22s var(--ease),
    border-color 0.22s var(--ease),
    background-color 0.22s var(--ease),
    background 0.22s var(--ease),
    color 0.18s var(--ease),
    box-shadow 0.28s var(--ease) !important;
}

/* الأيقونات جوه أي عنصر بيتفاعل: نبضة خفيفة جدًا */
html[data-motion='on'] :is(.btn, .icon-btn, .step-btn, .chip, .card-ic) .ic,
html[data-motion='on'] :is(.btn, .icon-btn, .step-btn, .chip, .card-ic) [data-icon] {
  transition: transform 0.24s var(--ease), opacity 0.24s var(--ease) !important;
}

/* ---------- ٣. الثانوي (ماوس حقيقي فقط) ---------- */
@media (hover: hover) and (pointer: fine) {
  html[data-motion='on'] .btn:hover .ic,
  html[data-motion='on'] .btn:hover [data-icon] {
    transform: translateY(-1px) scale(1.06);
  }

  html[data-motion='on'] .icon-btn:hover .ic,
  html[data-motion='on'] .icon-btn:hover [data-icon] {
    transform: scale(1.1);
  }

  html[data-motion='on'] .step-btn:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 10px 22px -16px rgba(0, 0, 0, 0.9);
  }

  html[data-motion='on'] .step-btn:hover:not(:disabled) .n {
    transform: translateY(-1px);
  }

  html[data-motion='on'] .step-btn:hover .t,
  html[data-motion='on'] .step-btn:hover .n .ic {
    opacity: 1;
  }

  /* عناصر القوايم: إزاحة بسيطة + خط ذهبي */
  html[data-motion='on'] .title-list li:hover,
  html[data-motion='on'] .mission-item:hover {
    transform: translateX(-2px);
  }

  html[data-motion='on'] .req-list li:hover,
  html[data-motion='on'] .plain-list li:hover,
  html[data-motion='on'] .note-list li:hover {
    background: rgba(255, 255, 255, 0.022);
  }

  html[data-motion='on'] .scene:hover {
    border-color: rgba(255, 198, 63, 0.32);
  }

  /* الكروت: رفع خفيف جدًا + توهّج يتبع الماوس (بيتحسب في app.js) */
  html[data-motion='on'] .card {
    transform: translateY(0);
  }

  html[data-motion='on'] .card:hover {
    border-color: var(--line-2);
    box-shadow: var(--shadow-md), 0 0 0 1px rgba(255, 198, 63, 0.05);
  }

  html[data-motion='on'] .card::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s var(--ease) !important;
    background: radial-gradient(
      260px circle at var(--mx, 50%) var(--my, 0%),
      rgba(255, 198, 63, 0.1),
      transparent 70%
    );
  }

  html[data-motion='on'] .card:hover::after {
    opacity: 1;
  }
}

/* ---------- ٤. اللمس (موبايل) — إحساس مضغوط مش هوفر مزيّف ---------- */
@media (hover: none) {
  html[data-motion='on'] :is(.btn, .icon-btn, .step-btn, .chip, .mission-item, .title-list li):active {
    transform: scale(0.975);
    transition-duration: 0.08s !important;
  }

  html[data-motion='on'] .card:active {
    border-color: rgba(255, 198, 63, 0.2);
  }
}

/* منع وميض اللمس الأزرق على أندرويد */
.btn,
.icon-btn,
.step-btn,
.chip,
.card,
.mission-item,
.title-list li {
  -webkit-tap-highlight-color: transparent;
}

/* ---------- ٥. إيقاف الحركة من الإعدادات ---------- */
html[data-motion='off'] :is(
    .btn,
    .icon-btn,
    .step-btn,
    .chip,
    .card,
    .card-ic,
    .title-list li,
    .mission-item,
    .scene,
    .req-list li
  ) {
  transform: none !important;
}

html[data-motion='off'] .card::after {
  display: none !important;
}