/* Mortoti: layered SVG mascot. State is a class on .mortoti (s-wave, s-cheer, ...).
   Driven from static/js/mortoti.js. */
.mortoti *{transform-box:view-box}
.mortoti .bob{animation:bob 3.2s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(-6px)}}
.mortoti .eyes{transform-origin:120px 96px;animation:blink 4.6s infinite}
@keyframes blink{0%,93%,100%{transform:scaleY(1)}96%{transform:scaleY(.08)}}
.mortoti .head{transform-origin:120px 150px;transition:transform .55s cubic-bezier(.3,1.5,.5,1)}
.mortoti .wr{transform-origin:176px 152px;transition:transform .5s cubic-bezier(.3,1.5,.5,1)}
.mortoti .wl{transform-origin:64px 152px;transition:transform .5s cubic-bezier(.3,1.5,.5,1)}
.mortoti .tail{transform-origin:178px 178px}
.mortoti .pupils{transform:translate(var(--px,0px),var(--py,0px));transform-origin:120px 98px;transition:transform .4s cubic-bezier(.3,1.4,.5,1)}
.mortoti .happy,.mortoti .sleepy,.mortoti .mouth,.mortoti .spark,.mortoti .zzz,.mortoti .sweat,.mortoti .qm,.mortoti .glasses,.mortoti .clip,.mortoti .trophy,.mortoti .medal,.mortoti .think,.mortoti .tear,.mortoti .hear{opacity:0;transition:opacity .25s}
.mortoti .brow{opacity:0;transition:opacity .25s,transform .35s cubic-bezier(.3,1.5,.5,1)}
.mortoti .bl{transform-origin:94px 72px}
.mortoti .br{transform-origin:146px 72px}
.mortoti .zzz text,.mortoti .qm text{font-family:system-ui,sans-serif;font-weight:900}

/* wave */
.mortoti.s-wave .wr{animation:wave .6s ease-in-out infinite alternate}
@keyframes wave{from{transform:rotate(-40deg)}to{transform:rotate(-88deg)}}
.mortoti.s-wave .head{transform:rotate(-3deg)}
/* cheer */
.mortoti.s-cheer .bob{animation:hop .7s cubic-bezier(.3,0,.4,1) infinite}
@keyframes hop{0%,100%{transform:translateY(0)}40%{transform:translateY(-22px)}}
.mortoti.s-cheer .wr{transform:rotate(-98deg)}
.mortoti.s-cheer .wl{transform:rotate(98deg)}
.mortoti.s-cheer .eyes{animation:none;opacity:0}
.mortoti.s-cheer .happy,.mortoti.s-cheer .mouth{opacity:1}
.mortoti.s-cheer .spark{opacity:1;animation:spark .8s ease-in-out infinite alternate}
@keyframes spark{from{transform:scale(.7)}to{transform:scale(1.15)}}
.mortoti .spark{transform-origin:120px 90px}
/* worry */
.mortoti.s-worry .head{animation:shake .35s linear infinite}
@keyframes shake{25%{transform:translateX(-2px) rotate(-1deg)}75%{transform:translateX(2px) rotate(1deg)}}
.mortoti.s-worry .brow{opacity:1}
.mortoti.s-worry .bl{transform:rotate(-20deg)}
.mortoti.s-worry .br{transform:rotate(20deg)}
.mortoti.s-worry .pupils{transform:translate(0,6px) scale(.9)}
.mortoti.s-worry .sweat{opacity:1}
.mortoti.s-worry .wr{transform:rotate(-12deg)}
.mortoti.s-worry .wl{transform:rotate(12deg)}
/* sleep */
.mortoti.s-sleep .bob{animation-duration:5.5s}
.mortoti.s-sleep .eyes{animation:none;opacity:0}
.mortoti.s-sleep .sleepy{opacity:1}
.mortoti.s-sleep .head{transform:rotate(7deg) translateY(6px)}
.mortoti.s-sleep .zzz{opacity:1}
.mortoti.s-sleep .zzz text{animation:zz 2.4s ease-in-out infinite}
.mortoti.s-sleep .zzz text:nth-child(2){animation-delay:.8s}
@keyframes zz{0%{transform:translateY(8px);opacity:0}30%{opacity:1}100%{transform:translateY(-14px);opacity:0}}
/* looks back (Sankofa) */
.mortoti.s-back .head{transform:rotate(14deg)}
.mortoti.s-back .pupils{transform:translate(10px,3px)}
.mortoti.s-back .tail{animation:tailwag .9s ease-in-out infinite alternate}
@keyframes tailwag{from{transform:rotate(-4deg)}to{transform:rotate(6deg)}}
/* confused */
.mortoti.s-confused .head{transform:rotate(-9deg)}
.mortoti.s-confused .brow{opacity:1}
.mortoti.s-confused .br{transform:translateY(-9px) rotate(-10deg)}
.mortoti.s-confused .bl{transform:translateY(2px)}
.mortoti.s-confused .pupils{transform:translate(6px,-6px)}
.mortoti.s-confused .qm{opacity:1}
.mortoti.s-confused .qm text{animation:qm 1.4s ease-in-out infinite alternate;transform-origin:196px 60px}
@keyframes qm{from{transform:rotate(-8deg) scale(.95)}to{transform:rotate(8deg) scale(1.1)}}

/* invigilator (taking a Mock) */
.mortoti.s-invig .glasses,.mortoti.s-invig .clip{opacity:1}
.mortoti.s-invig .brow{opacity:1}
.mortoti.s-invig .bl{transform:rotate(12deg)}
.mortoti.s-invig .br{transform:rotate(-12deg)}
.mortoti.s-invig .wl{transform:rotate(-62deg)}
.mortoti.s-invig .wr{transform:rotate(62deg)}
.mortoti.s-invig .pupils{animation:scan 2.8s ease-in-out infinite}
@keyframes scan{0%,100%{transform:translateX(-8px)}50%{transform:translateX(8px)}}
.mortoti.s-invig .head{animation:watch 5.6s ease-in-out infinite}
@keyframes watch{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(4deg)}}
/* thinking (generating) */
.mortoti.s-think .think{opacity:1}
.mortoti.s-think .think .d{animation:dot 1.2s infinite}
.mortoti.s-think .think .d2{animation-delay:.2s}
.mortoti.s-think .think .d3{animation-delay:.4s}
@keyframes dot{0%,80%,100%{opacity:.25}40%{opacity:1}}
.mortoti.s-think .head{transform:rotate(6deg)}
.mortoti.s-think .pupils{transform:translate(-7px,-8px)}
.mortoti.s-think .brow{opacity:1}
.mortoti.s-think .br{transform:translateY(-8px) rotate(-8deg)}
/* proud (level up) */
.mortoti.s-proud .head{transform:translateY(-4px) rotate(-4deg)}
.mortoti.s-proud .eyes{animation:none;opacity:0}
.mortoti.s-proud .happy{opacity:1}
.mortoti.s-proud .medal{opacity:1;animation:pop .6s cubic-bezier(.3,1.8,.5,1) both}
.mortoti .medal{transform-origin:120px 180px}
@keyframes pop{from{transform:scale(0)}to{transform:scale(1)}}
.mortoti.s-proud .wr{transform:rotate(-24deg)}
.mortoti.s-proud .wl{transform:rotate(24deg)}
.mortoti.s-proud .spark{opacity:1;animation:spark .8s ease-in-out infinite alternate}
/* oops (wrong answer) */
.mortoti.s-oops .brow{opacity:1}
.mortoti.s-oops .bl{transform:rotate(-16deg)}
.mortoti.s-oops .br{transform:rotate(16deg)}
.mortoti.s-oops .pupils{transform:translate(-2px,7px)}
.mortoti.s-oops .head{transform:translateY(8px) rotate(-3deg)}
.mortoti.s-oops .tear{opacity:1;animation:tear 1.8s ease-in infinite}
@keyframes tear{0%{transform:translateY(0);opacity:0}20%{opacity:1}100%{transform:translateY(22px);opacity:0}}
.mortoti.s-oops .bob{animation-duration:5s}
/* listening (Teach Mortoti) */
.mortoti.s-listen .head{animation:nod 1.8s ease-in-out infinite}
@keyframes nod{50%{transform:rotate(5deg) translateY(3px)}}
.mortoti.s-listen .pupils{transform:scale(1.15)}
.mortoti.s-listen .brow{opacity:1}
.mortoti.s-listen .bl{transform:translateY(-8px) rotate(-6deg)}
.mortoti.s-listen .br{transform:translateY(-8px) rotate(6deg)}
.mortoti.s-listen .hear{opacity:1;animation:ping 1.2s ease-in-out infinite}
@keyframes ping{0%,100%{opacity:.3}50%{opacity:1}}
/* trophy (Open Mock win) reuses cheer */
.mortoti.s-trophy .trophy{opacity:1}
/* panic (time running out) reuses worry */
.mortoti.s-panic .head{animation-duration:.18s}
.mortoti.s-panic .mouth,.mortoti.s-panic .sweat2{opacity:1}
.mortoti.s-panic .wr{animation:flap .25s ease-in-out infinite alternate}
.mortoti.s-panic .wl{animation:flapl .25s ease-in-out infinite alternate}
@keyframes flap{from{transform:rotate(-35deg)}to{transform:rotate(-75deg)}}
@keyframes flapl{from{transform:rotate(35deg)}to{transform:rotate(75deg)}}