/* ==========================================================================
   Memo the elephant — colour, rig and state choreography.
   Loaded after quiz.css so it overrides the MixGames owl animations, whose
   keyframes reference parts (beak, wing, ear-tufts) that no longer exist.

   Behaviour is grounded in real elephant ethology:
     · slow rhythmic ear fanning is the calm default (thermoregulation)
     · rapid flapping means agitation, so it appears only on the timer state
     · ears spread forward = listening; ears back = relaxed or dejected
     · the tail tracks AROUSAL not mood — up when nervous or excited,
       hanging when calm or dejected
   ========================================================================== */

/* ---- palette --------------------------------------------------------------
   ONE ramp for both themes, and it is the lighter one that used to be
   dark-mode-only.

   The original pair followed the usual rule — darken the subject on a light
   background for contrast, lighten it on a dark one. That is right for text and
   wrong for an illustrated character: the near-black light-mode ramp
   (#23272f → #5f6774) collapsed the internal modelling, because shadow, body
   and mid sat within ~28 points of lightness of each other and read as one flat
   silhouette at the 26-76px sizes he actually ships at. The lighter ramp keeps
   the same steps but starts higher, so the ear fold, the head highlight and the
   rim light all stay legible while the body is still clearly a dark grey
   elephant against white.

   He is charcoal in both themes now. Only the drop shadow adapts — see below. */
.mg-owl{
  --sh:#2b3340; --bs:#454d5c; --md:#525b6b; --lt:#616a7b; --rim:#78818f;
  --ac:#a394ff; --ac2:#c4baff; --ac3:#8b7dff; --ac4:#b3a6ff;
  --iv:#f2e9d6; --iv2:#cfc7b6; --nl:#9aa3b0;
}
/* The contact shadow is the one thing that still has to flip: a black shadow
   under him on a #131318 surface just punches a hole in the card. */
.me-shadow{fill:#16161c;opacity:.10}
:root[data-theme="dark"] .me-shadow{fill:#000;opacity:.28}
.me-body,.me-head{fill:var(--bs)}
.me-body-sh{fill:var(--sh);opacity:.5}
.me-head-lit{fill:var(--md);opacity:.75}
.me-rim{fill:var(--rim);opacity:.8}
.me-ear,.me-foot{fill:var(--md)}
.me-ear-in{fill:var(--lt)}
.me-ear-far,.me-foot-far{fill:var(--sh)}
.me-ear-farin{fill:var(--md)}
.me-ear-fold,.me-brow{stroke:var(--sh);opacity:.7}
.me-tail{stroke:var(--sh)}
.me-nail{stroke:var(--nl)}
.me-tusk{fill:var(--iv)} .me-tusk-far{fill:var(--iv2)}
.me-trunk{stroke:var(--md)} .me-trunk-sh{stroke:var(--sh);opacity:.4}
.me-knot{fill:var(--ac)} .me-knot-b{fill:var(--ac3)}
.me-knot-l{fill:var(--ac2)} .me-knot-m{fill:var(--ac4)}
.me-sclera{fill:#fff} .me-sclera-far{fill:#eef0f4}
.me-iris{fill:#2a2550} .me-pupil{fill:#16161c} .me-glint{fill:#fff}
.me-lens{fill:var(--ac);opacity:.08}
.me-frame{stroke:var(--ac)}
.me-cheek{fill:var(--ac);opacity:.18}

/* ---- rig ----------------------------------------------------------------- */
.mg-owl .trA,.mg-owl .trB,.mg-owl .trC,.mg-owl .tlA,.mg-owl .tlB{
  transform-origin:0 0;transform-box:view-box;
  transition:transform .34s cubic-bezier(.34,1.3,.5,1);
}
.mg-owl .earN{transform-origin:54px 54px;transform-box:view-box;transition:transform .3s cubic-bezier(.34,1.3,.5,1)}
.mg-owl .earF{transform-origin:110px 58px;transform-box:view-box;transition:transform .3s cubic-bezier(.34,1.3,.5,1)}
.mg-owl .lidN,.mg-owl .lidF{transform-box:fill-box;transform-origin:50% 0;transform:scaleY(0);transition:transform .09s ease}
.mg-owl.is-blink .lidN,.mg-owl.is-blink .lidF{transform:scaleY(1)}
.mg-owl .pup{transition:transform .5s cubic-bezier(.3,1,.4,1)}
.mg-owl{transition:transform .34s cubic-bezier(.34,1.3,.5,1)}

/* ---- ambient: slow ear fan + tail swish + breath -------------------------- */
@keyframes meFanN{0%,100%{transform:rotate(-3deg) scaleX(1)}50%{transform:rotate(-11deg) scaleX(1.05)}}
@keyframes meFanF{0%,100%{transform:rotate(3deg) scaleX(1)}50%{transform:rotate(10deg) scaleX(1.05)}}
@keyframes meSwishA{0%,100%{transform:rotate(0)}50%{transform:rotate(15deg)}}
@keyframes meSwishB{0%,100%{transform:rotate(0)}50%{transform:rotate(20deg)}}
@keyframes meDrift{0%,100%{transform:rotate(0)}50%{transform:rotate(9deg)}}
@keyframes meBreath{0%,100%{transform:translateY(0)}50%{transform:translateY(-2px)}}
.mg-owl:not(.is-happy):not(.is-sad):not(.is-nervous):not([class*="is-react"]){animation:meBreath 3.6s ease-in-out infinite}
.mg-owl:not(.is-nervous):not(.is-sad):not(.is-think) .earN{animation:meFanN 2.6s ease-in-out infinite}
.mg-owl:not(.is-nervous):not(.is-sad):not(.is-think) .earF{animation:meFanF 2.6s ease-in-out .3s infinite}
.mg-owl:not(.is-nervous):not(.is-happy) .tlA{animation:meSwishA 3s ease-in-out infinite}
.mg-owl:not(.is-nervous):not(.is-happy) .tlB{animation:meSwishB 3s ease-in-out .25s infinite}
.mg-owl:not(.is-talking):not(.is-nervous) .trC{animation:meDrift 4s ease-in-out infinite}

/* ---- correct ------------------------------------------------------------- */
/* anticipation: dips before the lift (see the .is-antic pre-frame) */
.mg-owl.is-antic{transform:translateY(3px) scaleY(.97)}
.mg-owl.is-happy{animation:meBounce 1.1s ease-in-out 2}
@keyframes meBounce{0%,100%{transform:translateY(0)}30%{transform:translateY(-10px)}60%{transform:translateY(0)}}
.mg-owl.is-happy .trA{transform:rotate(-30deg)} .mg-owl.is-happy .trB{transform:rotate(-22deg)}
.mg-owl.is-happy .earN{transform:rotate(-20deg) scaleX(1.06);animation:none}
.mg-owl.is-happy .earF{transform:rotate(18deg) scaleX(1.06);animation:none}
.mg-owl.is-happy .tlA{transform:rotate(-60deg);animation:none}

/* ---- streak: full trumpet, ears SPREAD with slow flaps (not rapid — rapid
       flapping plus trumpeting plus stomping is a threat display) ----------- */
.mg-owl.is-streak{animation:meBig 1.25s ease-in-out 2}
@keyframes meBig{0%,100%{transform:translateY(0) scale(1)}22%{transform:translateY(-15px) scale(1.04)}55%{transform:translateY(0) scale(.97)}78%{transform:translateY(-6px)}}
.mg-owl.is-streak .trA{transform:rotate(-62deg)}
.mg-owl.is-streak .trB{transform:rotate(-42deg)}
.mg-owl.is-streak .trC{transform:rotate(-18deg);animation:none}
.mg-owl.is-streak .earN{transform:rotate(-22deg) scaleX(1.12);animation:none}
.mg-owl.is-streak .earF{transform:rotate(20deg) scaleX(1.12);animation:none}
.mg-owl.is-streak .tlA{transform:rotate(-88deg);animation:none}
.mg-owl.is-streak .tlB{transform:rotate(-46deg);animation:none}

/* ---- wrong: sinks, trunk droops, ears back, tail hangs still -------------- */
.mg-owl.is-sad{transform:translateY(5px) rotate(-3deg)}
.mg-owl.is-sad .trA{transform:rotate(12deg)} .mg-owl.is-sad .trB{transform:rotate(10deg)}
.mg-owl.is-sad .trC{transform:rotate(15deg);animation:none}
.mg-owl.is-sad .earN{transform:rotate(9deg) scaleX(.88);animation:none}
.mg-owl.is-sad .earF{transform:rotate(-7deg) scaleX(.88);animation:none}
.mg-owl.is-sad .tlA{transform:rotate(6deg);animation:none}
.mg-owl.is-sad .tlB{animation:none}

/* ---- nervous: rapid ear flap (agitation), tail curls UP and tucks --------- */
.mg-owl.is-nervous{animation:meShake .24s ease-in-out infinite}
@keyframes meShake{0%,100%{transform:translateX(0)}25%{transform:translateX(-2px)}75%{transform:translateX(2px)}}
.mg-owl.is-nervous .earN{animation:meRapN .3s ease-in-out infinite}
.mg-owl.is-nervous .earF{animation:meRapF .3s ease-in-out .04s infinite}
@keyframes meRapN{0%,100%{transform:rotate(-6deg)}50%{transform:rotate(-15deg) scaleX(.95)}}
@keyframes meRapF{0%,100%{transform:rotate(5deg)}50%{transform:rotate(14deg) scaleX(.95)}}
.mg-owl.is-nervous .tlA{animation:meCurlJit .3s ease-in-out infinite}
.mg-owl.is-nervous .tlB{animation:meCurlJitB .3s ease-in-out .04s infinite}
@keyframes meCurlJit{0%,100%{transform:rotate(-96deg)}50%{transform:rotate(-88deg)}}
@keyframes meCurlJitB{0%,100%{transform:rotate(-52deg)}50%{transform:rotate(-64deg)}}
.mg-owl.is-nervous .trC{animation:meTwitch .3s ease-in-out infinite}
@keyframes meTwitch{0%,100%{transform:rotate(0)}50%{transform:rotate(-16deg)}}

/* ---- talking: trunk tip bobs while the fact types in ---------------------- */
.mg-owl.is-talking .trC{animation:meBob .45s ease-in-out infinite}
@keyframes meBob{0%,100%{transform:rotate(0)}50%{transform:rotate(8deg)}}

/* ---- greeting wave ------------------------------------------------------- */
.mg-owl.is-wave .trA{animation:meWaveA 1.6s ease-in-out 3}
.mg-owl.is-wave .trB{animation:meWaveB 1.6s ease-in-out 3}
@keyframes meWaveA{0%,100%{transform:rotate(0)}45%{transform:rotate(-34deg)}}
@keyframes meWaveB{0%,100%{transform:rotate(0)}45%{transform:rotate(-26deg)}}

/* ---- waiting / thinking: ears spread forward = listening ------------------ */
.mg-owl.is-think .earN{transform:rotate(-13deg) scaleX(1.13);animation:none}
.mg-owl.is-think .earF{transform:rotate(12deg) scaleX(1.13);animation:none}
.mg-owl.is-think .trB{transform:rotate(-54deg)}
.mg-owl.is-think .trC{transform:rotate(-62deg);animation:none}

/* ---- idle nudge: single sharp ear flick ---------------------------------- */
.mg-owl.is-nudge .earN{animation:meFlick 1.25s ease-in-out 1}
.mg-owl.is-nudge .earF{animation:meFlick 1.25s ease-in-out .1s 1}
@keyframes meFlick{0%,100%{transform:rotate(0)}30%{transform:rotate(-14deg)}55%{transform:rotate(5deg)}}

/* ---- idle flourish: trunk reaches up and nudges the specs ----------------- */
.mg-owl.is-adjust .trA{animation:meReachA 1.1s ease-in-out 1}
.mg-owl.is-adjust .trB{animation:meReachB 1.1s ease-in-out 1}
@keyframes meReachA{0%,100%{transform:rotate(0)}45%{transform:rotate(-48deg)}}
@keyframes meReachB{0%,100%{transform:rotate(0)}45%{transform:rotate(-58deg)}}

/* ---- touch reactions (spin and hop removed — elephants do neither) -------- */
.mg-owl.is-react-pet{transform:rotate(-6deg)}
.mg-owl.is-react-pet .earN{transform:rotate(10deg) scaleX(.88);animation:none}

.mg-owl.is-react-curl .trA{transform:rotate(-40deg)}
.mg-owl.is-react-curl .trB{transform:rotate(-54deg)}
.mg-owl.is-react-curl .trC{transform:rotate(-64deg);animation:none}

.mg-owl.is-react-earflap .earN{animation:meBigFlapN .7s ease-in-out 3}
.mg-owl.is-react-earflap .earF{animation:meBigFlapF .7s ease-in-out .05s 3}
@keyframes meBigFlapN{0%,100%{transform:rotate(-10deg) scaleX(1.1)}45%{transform:rotate(-24deg) scaleX(.94)}}
@keyframes meBigFlapF{0%,100%{transform:rotate(9deg) scaleX(1.1)}45%{transform:rotate(22deg) scaleX(.94)}}

.mg-owl.is-react-sway{animation:meSway 1.8s ease-in-out 2;transform-origin:80px 178px}
@keyframes meSway{0%,100%{transform:rotate(0)}25%{transform:rotate(5deg)}75%{transform:rotate(-5deg)}}

.mg-owl.is-react-stomp{animation:meStomp 1s ease-in-out 2}
@keyframes meStomp{0%,100%{transform:translateY(0)}18%{transform:translateY(3px) scaleY(.97)}45%{transform:translateY(-8px)}70%{transform:translateY(1px) scaleY(.98)}}
.mg-owl.is-react-stomp .trA{transform:rotate(-28deg)}
.mg-owl.is-react-stomp .earN{animation:meBigFlapN 1s ease-in-out 2}

/* ---- reduced motion: hold the pose, drop the movement --------------------- */
@media (prefers-reduced-motion: reduce){
  .mg-owl,.mg-owl *{animation:none !important;transition:none !important}
}