/* Mascot (animated bulb) */
.mascot{ --mascot-size:260px; width:var(--mascot-size); height:calc(var(--mascot-size)*1.25); position:relative; display:block; }
.mascot-svg{ width:100%; height:100%; overflow:visible; display:block; }
.mascot .m-body{ transform-origin:50% 100%; animation:m-float 4.2s ease-in-out infinite; }
.mascot .m-glow{ transform-origin:120px 118px; animation:m-breathe 3.4s ease-in-out infinite; }
.mascot .m-rays{ transform-origin:120px 118px; animation:m-rays 3.4s ease-in-out infinite; }

.mascot .m-mouth{ transition:d .2s ease; }
.mascot .m-hands{ opacity:0; transition:opacity .2s ease; }
.mascot .m-hand-l,.mascot .m-hand-r{ transition:transform .35s cubic-bezier(.3,1.4,.5,1); }
.mascot[data-mood="shy"] .m-hands{ opacity:1; }
.mascot[data-mood="shy"] .m-hand-l{ transform:translate(30px,-96px); }
.mascot[data-mood="shy"] .m-hand-r{ transform:translate(-30px,-96px); }
.mascot[data-mood="shy"] .m-cheek{ opacity:.7; }
.mascot[data-mood="sad"] .m-brow-l{ d:path("M74 94 q18 -2 36 -10"); }
.mascot[data-mood="sad"] .m-brow-r{ d:path("M130 84 q18 8 36 10"); }
.mascot[data-mood="happy"] .m-brow-l,.mascot[data-mood="happy"] .m-brow-r{ transform:translateY(-6px); }
.mascot[data-mood="sleep"] .m-glow{ animation-duration:6s; opacity:.6; }
.mascot.is-off .m-glow,.mascot.is-off .m-rays{ opacity:.12; animation:none; }
.mascot.is-off .m-body{ filter:saturate(.5) brightness(.85); }
.mascot.is-bounce .m-body{ animation:m-bounce .7s cubic-bezier(.3,1.5,.5,1) 1, m-float 4.2s ease-in-out .7s infinite; }
.mascot.is-shake .m-body{ animation:m-shake .5s ease 1, m-float 4.2s ease-in-out .5s infinite; }
.mascot-mini{ width:100%; height:100%; display:block; }

@keyframes m-float{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-7px) } }
@keyframes m-breathe{ 0%,100%{ transform:scale(.94); opacity:.8 } 50%{ transform:scale(1.06); opacity:1 } }
@keyframes m-rays{ 0%,100%{ transform:scale(.94); opacity:.55 } 50%{ transform:scale(1.08); opacity:1 } }
@keyframes m-bounce{ 0%{ transform:translateY(0) scale(1) } 35%{ transform:translateY(-26px) scale(1.04,.97) } 70%{ transform:translateY(0) scale(.97,1.04) } 100%{ transform:translateY(0) scale(1) } }
@keyframes m-shake{ 0%,100%{ transform:translateX(0) } 20%{ transform:translateX(-12px) rotate(-3deg) } 40%{ transform:translateX(11px) rotate(3deg) } 60%{ transform:translateX(-7px) } 80%{ transform:translateX(5px) } }
@media (prefers-reduced-motion:reduce){ .mascot *{ animation:none !important; } }