/* mascotrig.css — «ذاكرة» = اللوجو الرسمي نفسه (سيلويت مُتتبَّع بكسل-بكسل من ملف اللوجو).
   قاعدة الهوية (طلب صاحب المشروع): ممنوع أي تغيير في الشكل — الحركة الوحيدة المسموحة
   هي العين (رمشة) والخرطوم (ميل بسيط جدًا). لا تنفّس، لا مشي أرجل، لا حركة أذن.
   درس ثابت: keyframes transform-only و opacity للقطع الأساسية = 1 دايمًا،
   والوضع الأساسي (بلا أنيميشن) = اللوجو الأصلي بالظبط — لو الـwebview وقّف
   الأنيميشن الفيل يفضل ظاهر بشكل اللوجو الصحيح. كل الحركة خلف prefers-reduced-motion. */

.mr{position:relative;display:inline-block;line-height:0;
  --mr-fill:var(--mascot,#9E2B4E);--mr-gap:var(--surface,#fff)}
[data-theme="dark"] .mr{--mr-fill:var(--mascot,#D6537A)}
.mr svg{display:block;overflow:visible}
.mr-flip svg{transform:scaleX(-1)}

/* ===== الأجزاء (إحداثيات viewBox 798×588 = اللوجو) ===== */
.mr-body{fill:var(--mr-fill)}
.mr-gapline{fill:none;stroke:var(--mr-gap);stroke-width:14;stroke-linecap:butt}
.mr-eye{fill:var(--mr-gap);transform-box:fill-box;transform-origin:center}
.mr-notif rect,.mr-notif circle{fill:var(--memory,#6E59C7)}

/* المفصل الوحيد: الخرطوم — دوران بسيط حول نقطة اتصاله بالرأس */
.mr-trunk{transform-origin:718px 348px;transition:transform .7s cubic-bezier(.34,1.3,.42,1)}

/* ===== الرمشة (كل الحالات) + ميل الخرطوم الميكرو ===== */
@media (prefers-reduced-motion: no-preference){
  .mr-still .mr-eye,.mr-walk .mr-eye,.mr-idlewave .mr-eye,
  .mr-greet .mr-eye,.mr-salute .mr-eye,.mr-notify .mr-eye{animation:mrBlink 6.4s ease-in-out infinite}
  .mr-still .mr-trunk,.mr-walk .mr-trunk{animation:mrTrunkIdle 7s ease-in-out infinite}
  .mr-idlewave .mr-trunk{animation:mrTrunkWave 7s ease-in-out infinite}
}
@keyframes mrBlink{0%,92%,100%{transform:scaleY(1)}95%{transform:scaleY(.12)}}
/* ميل ميكرو — بالكاد محسوس */
@keyframes mrTrunkIdle{0%,100%{transform:rotate(0)}50%{transform:rotate(-1.6deg)}}
/* رفعة خفيفة كل ٧ ثواني — تحية صامتة بلا كسر للسيلويت */
@keyframes mrTrunkWave{0%,58%,100%{transform:rotate(0)}68%,84%{transform:rotate(-9deg)}}

/* ===== NOTIFY: ميل خرطوم خفيف + الختم يطلع فوق طرفه ===== */
.mr-notify .mr-trunk{transform:rotate(-10deg)}
.mr-notif-pos{transform:translate(812px,396px)}
.mr-notif{opacity:0;transform-box:fill-box;transform-origin:center}
.mr-notify .mr-notif{opacity:1}
@media (prefers-reduced-motion: no-preference){
  .mr-notify .mr-notif{animation:mrPop 2.4s ease-in-out infinite .6s}
}
@keyframes mrPop{
  0%{opacity:0;transform:translateY(25px) scale(.2)}
  13%{opacity:1;transform:translateY(0) scale(1.18)}
  22%{opacity:1;transform:translateY(-7px) scale(1)}
  58%{opacity:1;transform:translateY(-54px) scale(.95) rotate(8deg)}
  82%,100%{opacity:0;transform:translateY(-94px) scale(.78) rotate(14deg)}
}

/* ===== SALUTE: ميلة خرطوم ثابتة ===== */
.mr-salute .mr-trunk{transform:rotate(-10deg)}

/* ===== GREET: ميلة خرطوم مرة واحدة ثم رجوع ===== */
@media (prefers-reduced-motion: no-preference){
  .mr-greet .mr-trunk{animation:mrGreet 2.1s cubic-bezier(.4,1.3,.5,1) .35s 1 both}
}
@keyframes mrGreet{0%{transform:rotate(0)}30%,62%{transform:rotate(-10deg)}100%{transform:rotate(0)}}

/* ===== ALERT: انتباه — ميلة خرطوم أخف ===== */
.mr-alert .mr-trunk{transform:rotate(-5deg)}

/* ===== القطيع: الكبير ثابت يمين، والصغير ينزلق داخل من الشمال ويوقف وراه يقلّده =====
   الترجمة بالـrAF من React؛ الوضع الأساسي = المكان النهائي. */
.mherd{position:relative;pointer-events:none}
.mherd-lead{position:absolute;right:0;bottom:0}
.mherd-calf{position:absolute;left:0;bottom:0;will-change:transform,opacity}
/* الصغير بيقلّد متأخّر شوية عن الكبير (إيقاع التتابع) */
.mherd-echo .mr-idlewave .mr-trunk{animation-delay:-3.4s}