/* Mascot — refined two-tone theming + sophisticated, "knowing" motion (not childish) */
.mascot{position:relative;display:inline-block;line-height:0}
.mascot svg{position:relative;z-index:1;overflow:visible}

/* two-tone: body adapts to theme; gold accents are the signature */
.m-body{fill:#233a63}
[data-theme="dark"] .m-body{fill:#E7EDF8}
.m-tusk{fill:var(--gold-light)}
.m-trunk{stroke:#233a63;stroke-width:6.5}
[data-theme="dark"] .m-trunk{stroke:#E7EDF8}
.m-eye{fill:#1c2c4d}
[data-theme="dark"] .m-eye{fill:#0E1726}
.m-lid-arc{fill:none;stroke:#1c2c4d;stroke-width:2.4;stroke-linecap:round;opacity:.55}
[data-theme="dark"] .m-lid-arc{stroke:#0E1726;opacity:.5}
.m-jewel{fill:var(--gold)}
.m-think-dots circle{fill:var(--ai);opacity:0}

/* glow ring (attentive) */
.m-glow{position:absolute;inset:-10%;border-radius:50%;background:radial-gradient(circle,var(--gold) 0%,transparent 60%);
  opacity:0;transform:scale(.7);transition:opacity var(--t2) var(--ease),transform var(--t2) var(--ease);z-index:0}

/* notification pip */
.m-pip{position:absolute;top:4%;left:6%;width:15%;height:15%;min-width:11px;min-height:11px;border-radius:50%;
  background:var(--conflict);border:2px solid var(--surface);z-index:2;animation:mpip 1.6s var(--ease) infinite}
@keyframes mpip{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.14);opacity:.85}}

/* ===== CALM: slow contemplative breathing + knowing half-blink + subtle ear listen ===== */
@media (prefers-reduced-motion: no-preference){
  .mascot-calm .m-head{animation:mbreath 5.4s var(--ease-soft) infinite;transform-origin:60px 72px}
  .mascot-calm .m-ear-l{animation:mlistenL 7s var(--ease-soft) infinite;transform-origin:34px 44px}
  .mascot-calm .m-ear-r{animation:mlistenR 7s var(--ease-soft) infinite;transform-origin:86px 44px}
  .mascot-calm .m-eyes{animation:mblink 6.5s var(--ease) infinite;transform-origin:60px 53px}
}
@keyframes mbreath{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-2px) scale(1.008)}}
@keyframes mlistenL{0%,100%{transform:rotate(0)}50%{transform:rotate(-3deg)}}
@keyframes mlistenR{0%,100%{transform:rotate(0)}50%{transform:rotate(3deg)}}
@keyframes mblink{0%,93%,100%{transform:scaleY(1)}96%{transform:scaleY(.12)}}

/* ===== ACTIVE: attentive — leans in, glow on, ears listen forward, eyes alert (no toy bounce) ===== */
.mascot-active .m-glow{opacity:.28;transform:scale(1)}
@media (prefers-reduced-motion: no-preference){
  .mascot-active .m-head{animation:mlean 2.4s var(--ease-soft) infinite;transform-origin:60px 80px}
  .mascot-active .m-ear-l{animation:mperkL 2.4s var(--ease-soft) infinite;transform-origin:34px 50px}
  .mascot-active .m-ear-r{animation:mperkR 2.4s var(--ease-soft) infinite;transform-origin:86px 50px}
}
.mascot-active .m-eye{transform:translateY(-.5px)}
@keyframes mlean{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-3px) scale(1.025)}}
@keyframes mperkL{0%,100%{transform:rotate(-2deg)}50%{transform:rotate(-9deg)}}
@keyframes mperkR{0%,100%{transform:rotate(2deg)}50%{transform:rotate(9deg)}}

/* ===== THINK: pondering — slow tilt + recall dots rising ===== */
@media (prefers-reduced-motion: no-preference){
  .mascot-think .m-think-dots circle{animation:mthink 1.8s var(--ease) infinite}
  .mascot-think .m-think-dots circle:nth-child(2){animation-delay:.22s}
  .mascot-think .m-think-dots circle:nth-child(3){animation-delay:.44s}
  .mascot-think .m-head{animation:mtilt 3.6s var(--ease-soft) infinite;transform-origin:60px 74px}
}
@keyframes mthink{0%,100%{opacity:0;transform:translateY(4px)}50%{opacity:1;transform:translateY(0)}}
@keyframes mtilt{0%,100%{transform:rotate(0)}50%{transform:rotate(-2.5deg)}}

/* ============ ELEPHANT COMPANION (على MascotRig المفصّل) ============ */
.mc{position:relative;display:inline-block;line-height:0}
.mc-art{position:relative;z-index:1;width:100%;height:100%;display:flex;align-items:flex-end;justify-content:center}
.mc-img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block;-webkit-user-drag:none}
.mc-img.navy{display:block}.mc-img.gold{display:none}
[data-theme="dark"] .mc-img.navy{display:none}[data-theme="dark"] .mc-img.gold{display:block}
.mc-steam{position:absolute;top:-6%;right:14%;z-index:2}
.mc-steam i{position:absolute;width:7px;height:7px;border-radius:2px;background:var(--conflict);opacity:0}
.mc-steam i:nth-child(1){right:0;top:8px}.mc-steam i:nth-child(2){right:8px;top:0}.mc-steam i:nth-child(3){right:15px;top:-7px}
.mc-glow{position:absolute;inset:-14% -8%;border-radius:50%;background:radial-gradient(circle,var(--gold) 0%,transparent 62%);
  opacity:0;transform:scale(.7);transition:opacity var(--t2) var(--ease),transform var(--t2) var(--ease),background var(--t2);z-index:0}
.m-pip{position:absolute;top:0;left:4%;width:24%;height:24%;min-width:10px;min-height:10px;border-radius:50%;
  background:var(--conflict);border:2px solid var(--surface);z-index:2;animation:mpip 1.6s var(--ease) infinite}
@keyframes mpip{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.14);opacity:.85}}

/* CALM: gentle bob */
@media (prefers-reduced-motion: no-preference){ .mc-calm .mc-art{animation:eBob 4.6s var(--ease-soft) infinite} }
@keyframes eBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-2px)}}

/* WALK: المشية نفسها بقت من أرجل الـrig (mr-walk) — مفيش انزلاق للجسم كله */

/* HEATED: disagreement — warms toward red, jitters, coral glow + steam */
.mc-heated .mc-img,.mc-heated .mr svg{filter:drop-shadow(0 0 5px var(--conflict)) drop-shadow(0 0 2px var(--conflict))}
.mc-heated .mc-glow{opacity:.42;transform:scale(1);background:radial-gradient(circle,var(--conflict) 0%,transparent 60%)}
@media (prefers-reduced-motion: no-preference){
  .mc-heated .mc-art{animation:eJitter .26s steps(2) infinite}
  .mc-heated .mc-steam i{animation:eSteam 1s var(--ease) infinite}
  .mc-heated .mc-steam i:nth-child(2){animation-delay:.16s}
  .mc-heated .mc-steam i:nth-child(3){animation-delay:.32s}
}
@keyframes eJitter{0%{transform:translate(0,0)}33%{transform:translate(-2px,-1px)}66%{transform:translate(2px,1px)}100%{transform:translate(0,0)}}
@keyframes eSteam{0%{opacity:0;transform:translateY(6px)}45%{opacity:.85}100%{opacity:0;transform:translateY(-12px)}}

/* ALERT: glow + attentive lift */
.mc-alert .mc-glow{opacity:.3;transform:scale(1)}
@media (prefers-reduced-motion: no-preference){ .mc-alert .mc-art{animation:eAlert 2s var(--ease-soft) infinite} }
@keyframes eAlert{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-3px) scale(1.04)}}

/* NOTIFY: هالة ذهبية هادية والخرطوم (في الـrig) هو اللي بيعلن الإشعار */
.mc-notify .mc-glow{opacity:.26;transform:scale(1)}