/* Teacher Paulinha: mesmas regras do portal (css/style.css) */
.mascot { display: block; }
.mascot-svg { display: block; width: 100%; height: auto; overflow: visible; }
.mascot-svg .m-body, .mascot-svg .m-arm, .mascot-svg .m-head, .mascot-svg .m-lock, .mascot-svg .m-eyes,
.mascot-svg .m-shadow, .mascot-svg .m-fx path, .mascot-svg .m-tear, .mascot-svg .m-zzz text, .mascot-svg .m-hearts path,
.mascot-svg .m-cloud, .mascot-svg .m-rain, .mascot-svg .m-crown { transform-box: fill-box; }
.mascot-svg .m-body { transform-origin: 50% 100%; }
.mascot-svg .m-arm-l { transform-origin: 88% 6%; }
.mascot-svg .m-arm-r { transform-origin: 12% 6%; }
.mascot-svg .m-head { transform-origin: 50% 92%; }
.mascot-svg .m-lock-l { transform-origin: 70% 0%; }
.mascot-svg .m-lock-r { transform-origin: 30% 0%; }
.mascot-svg .m-eyes { transform-origin: 50% 55%; animation: m-blink 6s infinite; }
.mascot-svg .m-shadow, .mascot-svg .m-crown, .mascot-svg .m-hearts path, .mascot-svg .m-zzz text { transform-origin: 50% 50%; }

/* o que aparece em cada humor */
.mascot-svg .m-eye-wink, .mascot-svg .m-eyes-happy, .mascot-svg .m-eyes-sleepy, .mascot-svg .m-brows-sad, .mascot-svg .m-tears,
.mascot-svg .m-mouth-open, .mascot-svg .m-mouth-sad, .mascot-svg .m-mouth-o, .mascot-svg .m-crown, .mascot-svg .m-cloud,
.mascot-svg .m-zzz, .mascot-svg .m-hearts, .mascot-svg .m-fx { display: none; }
.mascot:is(.happy, .party, .fire, .act-jump, .act-spin, .act-dance, .act-heart) .m-eyes,
.mascot:is(.happy, .party, .fire, .act-jump, .act-spin, .act-dance, .act-heart) .m-mouth-smile { display: none; }
.mascot:is(.happy, .party, .fire, .act-jump, .act-spin, .act-dance, .act-heart) .m-eyes-happy,
.mascot:is(.happy, .party, .fire, .act-jump, .act-spin, .act-dance, .act-heart) .m-mouth-open { display: inline; }
.mascot:is(.happy, .party, .fire) .m-fx { display: inline; }
.mascot.fire .m-crown { display: inline; }
.mascot.act-wink .m-eye-l { display: none; }
.mascot.act-wink .m-eye-wink, .mascot.act-heart .m-hearts { display: inline; }
.mascot.sad .m-brows, .mascot.sad .m-mouth-smile { display: none; }
.mascot.sad .m-brows-sad, .mascot.sad .m-mouth-sad, .mascot.sad .m-tears, .mascot.cloudy .m-cloud { display: inline; }
.mascot.sleepy .m-eyes, .mascot.sleepy .m-mouth-smile { display: none; }
.mascot.sleepy .m-eyes-sleepy, .mascot.sleepy .m-mouth-o, .mascot.sleepy .m-zzz { display: inline; }
.mascot.sleepy.act-wake .m-eyes { display: inline; }
.mascot.sleepy.act-wake .m-eyes-sleepy, .mascot.sleepy.act-wake .m-zzz { display: none; }

/* de manhã ela segura uma xícara de café com fumacinha */
.mascot-svg .m-mug { display: none; }
.mascot.t-morning .m-book { display: none; }
.mascot.t-morning .m-mug { display: inline; }
.mascot-svg .m-steam path { transform-box: fill-box; transform-origin: 50% 100%; animation: m-steam 2.2s ease-in-out infinite; opacity: 0; }
.mascot-svg .m-steam path:nth-child(2) { animation-delay: .7s; }
.mascot-svg .m-steam path:nth-child(3) { animation-delay: 1.4s; }
@keyframes m-steam { 0% { transform: translateY(4px) scaleY(.6); opacity: 0; } 40% { opacity: .85; } 100% { transform: translateY(-8px) scaleY(1.1); opacity: 0; } }
/* parada: respira, pisca, mexe a cabeça e acena */
.mascot.idle .m-body { animation: m-bob 4s ease-in-out infinite; }
.mascot.idle .m-head { animation: m-tilt 8s ease-in-out infinite; }
.mascot.idle .m-arm-l { animation: m-wave 20s ease-in-out infinite; }
.mascot.idle .m-lock { animation: m-sway 4s ease-in-out infinite; }
/* feliz: pulinhos com os braços pra cima */
.mascot.happy .m-body { animation: m-hop-calm 5s ease-in-out infinite; }
.mascot.happy .m-shadow { animation: m-shadow-hop-calm 5s ease-in-out infinite; }
.mascot.happy .m-arm-l { animation: m-cheer-l-calm 5s ease-in-out infinite; }
.mascot.happy .m-arm-r { animation: m-cheer-r-calm 5s ease-in-out infinite; }
/* festa (comemoração no canto) */
.mascot.party .m-body { animation: m-jump .8s cubic-bezier(.3,.7,.4,1) infinite; }
.mascot.party .m-shadow { animation: m-shadow-jump .8s cubic-bezier(.3,.7,.4,1) infinite; }
.mascot.party .m-arm-l, .mascot.fire .m-arm-l { animation: m-up-l .4s ease-in-out infinite alternate; }
.mascot.party .m-arm-r, .mascot.fire .m-arm-r { animation: m-up-r .4s ease-in-out infinite alternate; }
.mascot.party .m-lock { animation: m-sway .4s ease-in-out infinite alternate; }
/* 7+ dias seguidos: coroa e dancinha */
.mascot.fire .m-body { animation: m-dance 2.2s ease-in-out infinite; }
.mascot.fire .m-crown { animation: m-crown 2.2s ease-in-out infinite; }
.mascot .m-fx path { animation: m-twinkle 2s ease-in-out infinite; }
.mascot .m-fx path:nth-child(2) { animation-delay: .3s; }
.mascot .m-fx path:nth-child(3) { animation-delay: .6s; }
.mascot .m-fx path:nth-child(4) { animation-delay: .9s; }
/* triste: cabisbaixa, lagriminha e nuvem de chuva */
.mascot.sad .m-body { animation: m-slump 3.6s ease-in-out infinite; }
.mascot.sad .m-head { animation: m-sad-head 3.6s ease-in-out infinite; }
.mascot.sad .m-arm-l { transform: rotate(8deg); }
.mascot.sad .m-tear { animation: m-tear 2s ease-in infinite; }
.mascot.sad .m-tear-r { animation-delay: 1s; }
.mascot.cloudy .m-cloud { animation: m-float 3s ease-in-out infinite; }
.mascot.cloudy .m-rain { animation: m-rain .7s linear infinite; }
/* com sono (tarde da noite): cochila e solta Zzz */
.mascot.sleepy .m-body { animation: m-breathe 4s ease-in-out infinite; }
.mascot.sleepy .m-head { animation: m-doze 5s ease-in-out infinite; }
.mascot.sleepy .m-zzz text { animation: m-z 2.4s ease-in-out infinite; opacity: 0; }
.mascot.sleepy .m-zzz text:nth-child(2) { animation-delay: .5s; }
.mascot.sleepy .m-zzz text:nth-child(3) { animation-delay: 1s; }

/* ações de vez em quando e ao toque (sobrepõem o humor) */
.mascot.act-jump .m-body { animation: m-jump 1s cubic-bezier(.3,.7,.4,1) 1; }
.mascot.act-jump .m-arm-l { animation: m-up-l .5s ease-in-out 2 alternate; }
.mascot.act-jump .m-arm-r { animation: m-up-r .5s ease-in-out 2 alternate; }
.mascot.act-spin .m-body { animation: m-spin 1.1s ease-in-out 1; }
.mascot.act-dance .m-body { animation: m-dance .9s ease-in-out 2; }
.mascot.act-dance .m-arm-l { animation: m-up-l .45s ease-in-out 4 alternate; }
.mascot.act-dance .m-arm-r { animation: m-up-r .45s ease-in-out 4 alternate; }
.mascot.act-read .m-arm-r { animation: m-read 2.6s ease-in-out 1; }
.mascot.act-read .m-head { animation: m-read-head 2.6s ease-in-out 1; }
.mascot.act-heart .m-hearts path { animation: m-heart-up 1.8s ease-out 1 both; }
.mascot.act-heart .m-hearts path:nth-child(2) { animation-delay: .2s; }
.mascot.act-heart .m-hearts path:nth-child(3) { animation-delay: .4s; }
.mascot.act-heart .m-body { animation: m-hop 1.8s ease-in-out 1; }
.mascot.act-wink .m-head { animation: m-tilt-quick 1.3s ease-in-out 1; }
.mascot.act-sniff .m-body { animation: m-shake .4s ease-in-out 4; }
.mascot.act-nod .m-head { animation: m-nod 1.8s ease-in-out 1; }
.mascot.act-wake .m-body { animation: m-startle .7s ease-out 1; }

/* golinho de café (de manhã): leva a xícara até a boca, fecha os olhos e volta */
.mascot-svg .m-mug { transform-box: fill-box; transform-origin: 50% 70%; }
.mascot.act-sip .m-arm-r { animation: m-sip-arm 2.6s ease-in-out 1; }
.mascot.act-sip .m-mug { animation: m-sip-mug 2.6s ease-in-out 1; }
.mascot.act-sip .m-head { animation: m-sip-head 2.6s ease-in-out 1; }
.mascot.act-sip .m-eyes { display: none; }
.mascot.act-sip .m-eyes-happy { display: inline; }
@keyframes m-sip-arm { 0%, 100% { transform: rotate(0) scale(1); } 28%, 72% { transform: rotate(160deg) scale(.86); } }
@keyframes m-sip-mug { 0%, 100% { transform: rotate(0) scale(1); } 28%, 72% { transform: rotate(-172deg) scale(1.16); } }
@keyframes m-sip-head { 0%, 22%, 100% { transform: rotate(0); } 34%, 66% { transform: rotate(-5deg); } }
@keyframes m-blink { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(.08); } }
@keyframes m-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@keyframes m-tilt { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg); } }
@keyframes m-tilt-quick { 0%, 100% { transform: rotate(0); } 30%, 70% { transform: rotate(-8deg); } }
@keyframes m-sway { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg); } }
@keyframes m-wave { 0%, 13%, 100% { transform: rotate(0); } 3% { transform: rotate(135deg); } 5% { transform: rotate(112deg); } 7% { transform: rotate(135deg); } 9% { transform: rotate(112deg); } 10.5% { transform: rotate(130deg); } }
@keyframes m-hop-calm { 0%, 20%, 100% { transform: translateY(0) scale(1); } 4% { transform: translateY(2px) scale(1.04, .96); } 10% { transform: translateY(-16px) scale(.98, 1.03); } 16% { transform: translateY(0) scale(1.03, .97); } }
@keyframes m-shadow-hop-calm { 0%, 20%, 100% { transform: scale(1); opacity: .12; } 10% { transform: scale(.7); opacity: .06; } }
@keyframes m-cheer-l-calm { 0%, 22%, 100% { transform: rotate(20deg); } 10% { transform: rotate(150deg); } }
@keyframes m-cheer-r-calm { 0%, 22%, 100% { transform: rotate(-10deg); } 10% { transform: rotate(-150deg); } }
@keyframes m-hop { 0%, 40%, 100% { transform: translateY(0) scale(1); } 8% { transform: translateY(2px) scale(1.04, .96); } 20% { transform: translateY(-18px) scale(.98, 1.03); } 32% { transform: translateY(0) scale(1.03, .97); } }
@keyframes m-shadow-hop { 0%, 40%, 100% { transform: scale(1); opacity: .12; } 20% { transform: scale(.7); opacity: .06; } }
@keyframes m-cheer-l { 0%, 40%, 100% { transform: rotate(20deg); } 20% { transform: rotate(150deg); } }
@keyframes m-cheer-r { 0%, 40%, 100% { transform: rotate(-10deg); } 20% { transform: rotate(-150deg); } }
@keyframes m-jump { 0%, 100% { transform: translateY(0) scale(1); } 12% { transform: translateY(3px) scale(1.05, .95); } 50% { transform: translateY(-24px) scale(.97, 1.04); } 85% { transform: translateY(0) scale(1.02, .98); } }
@keyframes m-shadow-jump { 0%, 100% { transform: scale(1); opacity: .12; } 50% { transform: scale(.6); opacity: .05; } }
@keyframes m-up-l { from { transform: rotate(140deg); } to { transform: rotate(165deg); } }
@keyframes m-up-r { from { transform: rotate(-140deg); } to { transform: rotate(-165deg); } }
@keyframes m-twinkle { 0%, 100% { transform: scale(.4) rotate(0); opacity: .3; } 50% { transform: scale(1.15) rotate(25deg); opacity: 1; } }
@keyframes m-dance { 0%, 100% { transform: rotate(0) translateY(0); } 25% { transform: rotate(-7deg) translateY(-6px); } 50% { transform: rotate(0) translateY(0); } 75% { transform: rotate(7deg) translateY(-6px); } }
@keyframes m-crown { 0%, 100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-3px) rotate(4deg); } }
@keyframes m-spin { 0% { transform: scaleX(1) translateY(0); } 25% { transform: scaleX(0) translateY(-12px); } 50% { transform: scaleX(-1) translateY(-16px); } 75% { transform: scaleX(0) translateY(-12px); } 100% { transform: scaleX(1) translateY(0); } }
@keyframes m-read { 0%, 100% { transform: rotate(0); } 20%, 80% { transform: rotate(-62deg); } }
@keyframes m-read-head { 0%, 100% { transform: rotate(0); } 20%, 80% { transform: rotate(6deg) translateY(2px); } }
@keyframes m-heart-up { 0% { transform: translateY(14px) scale(.3); opacity: 0; } 25% { opacity: 1; transform: translateY(0) scale(1.1); } 100% { transform: translateY(-34px) scale(.9); opacity: 0; } }
@keyframes m-slump { 0%, 100% { transform: translateY(4px) scale(1, .985); } 50% { transform: translateY(5px) scale(1, .97); } }
@keyframes m-sad-head { 0%, 100% { transform: rotate(5deg) translateY(2px); } 50% { transform: rotate(8deg) translateY(3px); } }
@keyframes m-tear { 0% { transform: translateY(-2px); opacity: 0; } 15% { opacity: 1; } 100% { transform: translateY(16px); opacity: 0; } }
@keyframes m-float { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(-5px, 2px); } }
@keyframes m-rain { from { transform: translateY(-3px); opacity: 1; } to { transform: translateY(7px); opacity: .1; } }
@keyframes m-shake { 0%, 100% { transform: translate(0, 4px); } 25% { transform: translate(-1.5px, 5px); } 75% { transform: translate(1.5px, 5px); } }
@keyframes m-breathe { 0%, 100% { transform: scale(1, 1); } 50% { transform: scale(1.01, 1.025); } }
@keyframes m-doze { 0%, 10% { transform: rotate(0); } 70% { transform: rotate(11deg) translateY(3px); } 76% { transform: rotate(-2deg); } 84%, 100% { transform: rotate(0); } }
@keyframes m-nod { 0%, 100% { transform: rotate(0); } 60% { transform: rotate(16deg) translateY(4px); } 70% { transform: rotate(-3deg); } }
@keyframes m-z { 0% { transform: translate(-6px, 8px) scale(.6); opacity: 0; } 30% { opacity: 1; } 100% { transform: translate(6px, -10px) scale(1.1); opacity: 0; } }
@keyframes m-startle { 0%, 100% { transform: translateY(0); } 30% { transform: translateY(-14px) scale(1.03); } 60% { transform: translateY(0); } }