/* ════════════════════════════════════════════════════════════════════
 * HOME TILES RENDER — أنميشن الدخول الناعم للمربعات + ضمان الأيقونات
 * ────────────────────────────────────────────────────────────────────
 * ملف منفصل قابل للحذف. يحوي:
 *   • أنميشن tileEnter — fade-in تدريجي ناعم (animation-delay من JS).
 *   • احترام prefers-reduced-motion (إلغاء كامل للأنميشن).
 *   • ضمان opacity:1 للأيقونات في كل الحالات (يحمي ضد bug الأيقونات
 *     الفاضية لو تأخر تحميل Font Awesome).
 *   • لا حركة عبثية على .tile-icon عند الـ hover (الحركة الجمالية تبقى
 *     على المربع نفسه — translateY — فقط).
 * ════════════════════════════════════════════════════════════════════ */

/* ── أنميشن الدخول — fade-in + رفع خفيف ── */
@keyframes hmTileEnter {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.grid-tile.tile-enter {
  /* animation-delay يأتي من JS عبر inline style — 30ms × index */
  animation: hmTileEnter 0.36s cubic-bezier(0.22, 0.61, 0.36, 1) both;
  /* both = يبقى في الحالة النهائية بعد الانتهاء */
}

/* ── ضمان أن الأيقونة ظاهرة دائماً — لا اعتماد على hover ── */
.grid-tile .tile-icon {
  opacity: 1;
}
.grid-tile .tile-icon i {
  opacity: 1;
  /* font-display للمتصفحات اللي تدعمه على عناصر — احتياط */
  font-display: swap;
}

/* ── احترام prefers-reduced-motion ── */
@media (prefers-reduced-motion: reduce) {
  .grid-tile.tile-enter {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ── على الجوّال (شبكة عمودين) — تأخير أقل بين المربعات لئلا يحس بطء ── */
@media (max-width: 600px) {
  .grid-tile.tile-enter {
    animation-duration: 0.28s;
  }
}