/* =====================================================================
   noor.css — التنسيقات المشتركة لشخصية "نور" في كل صفحات المنصة
   يُستخدم في: الرئيسية، English، Math، Tilawa، ألعاب المستوى ١/٢/٣
   ===================================================================== */

/* --- حركة التنفس/التمايل الأساسية للشخصية --- */
@keyframes noorBob {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50%      { transform: translateY(-8px) rotate(2deg); }
}

/* --- رمش العين --- */
@keyframes noorBlink {
  0%, 90%, 100% { transform: scaleY(1); }
  94%           { transform: scaleY(.12); }
}
.noor-eye {
  transform-box: fill-box;
  transform-origin: center;
  animation: noorBlink 4.4s ease-in-out infinite;
}

/* --- تلويح اليد --- */
@keyframes noorWave {
  0%, 100% { transform: rotate(0deg); }
  50%      { transform: rotate(-16deg); }
}
.noor-arm-right {
  transform-box: fill-box;
  transform-origin: 70% 55%;
  animation: noorWave 2s ease-in-out infinite;
}

/* --- حركة الفم وقت الكلام --- */
@keyframes noorTalk {
  0%   { transform: scaleY(.55); }
  100% { transform: scaleY(1.15); }
}
.noor-mouth-open { opacity: 0; }

/* يشتغل مع أي حاوية شخصية: .nemnem (الصفحات الفرعية) أو .mascot (الرئيسية) */
.nemnem.talking,
.mascot.talking {
  animation: noorBob .45s ease-in-out infinite;
}
.nemnem.talking .noor-mouth-closed,
.mascot.talking .noor-mouth-closed {
  opacity: 0;
}
.nemnem.talking .noor-mouth-open,
.mascot.talking .noor-mouth-open {
  opacity: 1;
  transform-box: fill-box;
  transform-origin: center;
  animation: noorTalk .26s ease-in-out infinite alternate;
}

/* --- شارة الاسم فوق فقاعة الكلام --- */
.noor-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--orange, #FF8C42);
  color: #fff;
  font-size: 11px;
  font-weight: 900;
  padding: 3px 11px;
  border-radius: 999px;
  margin-bottom: 6px;
}

/* --- الهالة المضيئة خلف الشخصية وقت الكلام --- */
/* يشتغل مع أي حاوية: .nemnem-wrap (الصفحات الفرعية) أو .welcome (الرئيسية) */
.nemnem-wrap,
.welcome {
  position: relative;
}
.nemnem-wrap:before,
.welcome:before {
  content: "";
  position: absolute;
  inset-inline-start: -8px;
  bottom: -8px;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(92, 169, 163, .28), transparent 70%);
  z-index: 0;
  opacity: .55;
  transition: opacity .3s, transform .3s;
}
.nemnem-wrap:has(.talking):before,
.welcome:has(.talking):before {
  opacity: 1;
  transform: scale(1.08);
}
.nemnem-wrap > *,
.welcome > * {
  position: relative;
  z-index: 1;
}

/* --- زرار الخروج بجانب اسم الطفل --- */
.chip-logout {
  background: #FCE6E0;
  color: #A94434;
  border: none;
  border-radius: 999px;
  padding: 6px 13px;
  font-weight: 900;
  font-size: 12px;
  cursor: pointer;
  font-family: inherit;
}
.chip-logout:hover {
  background: #F8CFC4;
}