/*
 * Usta Tirs (أسطى ترس): the workshop master who stands on the chat button.
 * Rig, faces and props. The choreography is in assets/js/usta.js.
 */
.mgu{--w:128px;--ink:#001a2c;--blue:#17557f;--gold:var(--wp--preset--color--gold);--ex:0;--ey:0;--tilt:0;position:fixed;z-index:89;left:var(--mgu-x,auto);bottom:calc(var(--mgu-b,90px) - 3px);width:var(--w);aspect-ratio:240/300;pointer-events:none}
@media (max-width:781px){.mgu{--w:92px}}
.mgu.gone{visibility:hidden}
.mgu-svg{display:block;width:100%;height:100%;overflow:visible}
.mgu [data-r]{transform-box:view-box}
.mgu [data-r=char],.mgu [data-r=breath]{transform-origin:120px 296px}
.mgu [data-r=torso]{transform-origin:120px 250px}
.mgu [data-r=head],.mgu [data-r=look]{transform-origin:120px 176px}
.mgu [data-r=ring],.mgu [data-r=tick]{transform-origin:120px 112px}
.mgu [data-r=spring],.mgu [data-r=hat]{transform-origin:120px 66px}
.mgu [data-r=eyeL]{transform-origin:102px 103px}
.mgu [data-r=eyeR]{transform-origin:138px 103px}
.mgu [data-r=mouth]{transform-origin:120px 150px}
.mgu [data-r=mou],.mgu [data-r=mouT]{transform-origin:120px 136px}
.mgu [data-r=armL]{transform-origin:86px 196px}
.mgu [data-r=foreL]{transform-origin:86px 228px}
.mgu [data-r=armR]{transform-origin:154px 196px}
.mgu [data-r=foreR]{transform-origin:154px 228px}
.mgu [data-r=propR]{transform-origin:154px 260px}
.mgu [data-r=sheet]{transform-origin:120px 200px}
.mgu [data-r=bolt],.mgu [data-r=sparks]{transform-origin:190px 112px}
.mgu [data-r=bulb]{transform-origin:120px 16px}
.mgu [data-r=shadow]{transform-origin:120px 297px}
.mgu [data-r=puffL]{transform-origin:92px 292px}
.mgu [data-r=puffR]{transform-origin:148px 292px}
.mgu [data-r^=b]:not([data-r=breath]):not([data-r=bulb]):not([data-r=bolt]){transform-origin:0 0}
.mgu [data-r=breath]{animation:mgu-breath 3.4s ease-in-out infinite}
@keyframes mgu-breath{50%{transform:translateY(1.6px) scale(1.012,.988)}}
.mgu [data-r=look]{transform:rotate(calc(var(--tilt)*1deg));transition:transform .28s ease-out}
.mgu .pupil{transform:translate(calc(var(--ex)*1px),calc(var(--ey)*1px));transition:transform .13s ease-out}
.mgu .s{stroke:var(--ink);stroke-width:3.2;stroke-linejoin:round;stroke-linecap:round}
.mgu .lo{stroke:var(--ink);stroke-width:17;stroke-linecap:round}
.mgu .lf{stroke:var(--blue);stroke-width:11;stroke-linecap:round}
.mgu .ln{fill:none;stroke:var(--ink);stroke-width:3.6;stroke-linecap:round;stroke-linejoin:round}
.mgu .brow{fill:none;stroke:var(--ink);stroke-width:6;stroke-linecap:round;transition:transform .15s}
.mgu .bL{transform-box:view-box;transform-origin:102px 84px}
.mgu .bR{transform-box:view-box;transform-origin:138px 84px}
.mgu[data-face=wow] .brow{transform:translateY(-6px)}
.mgu[data-face=squint] .bL{transform:rotate(14deg) translateY(4px)}
.mgu[data-face=squint] .bR{transform:rotate(-14deg) translateY(4px)}
.mgu .steam{fill:none;stroke:#8ea2b1;stroke-width:3;stroke-linecap:round}
.mgu .f,.mgu .p,.mgu .rope{display:none}
.mgu[data-face=normal] .f-eyes,.mgu[data-face=wow] .f-eyes,.mgu[data-face=happy] .f-happy,.mgu[data-face=squint] .f-squint,.mgu[data-face=dizzy] .f-dizzy,.mgu[data-face=sleep] .f-sleep{display:inline}
.mgu[data-face=normal] .m-smile,.mgu[data-face=squint] .m-smile,.mgu[data-face=sleep] .m-smile,.mgu[data-face=happy] .m-open,.mgu[data-face=wow] .m-o,.mgu[data-face=dizzy] .m-o{display:inline}
.mgu[data-prop=wrench] .p-wrench,.mgu[data-prop=caliper] .p-cal,.mgu[data-prop=tea] .p-tea,.mgu[data-prop=sheet] .p-sheet{display:inline}
.mgu[data-rope=on] .rope{display:inline}
.mgu-hit{position:absolute;left:20%;right:20%;top:8%;bottom:0;padding:0;background:none;border:0;border-radius:40% 40% 18% 18%;cursor:pointer;pointer-events:auto}
.mgu-hit:focus-visible,.mgu-x:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.mgu-x{position:absolute;right:2%;top:12%;width:22px;height:22px;display:grid;place-items:center;padding:0;border:2px solid var(--ink);border-radius:50%;background:#fff;color:var(--ink);font:600 12px/1 sans-serif;cursor:pointer;pointer-events:auto;opacity:0;transition:opacity .15s}
.mgu:hover .mgu-x,.mgu:focus-within .mgu-x{opacity:1}
@media (hover:none){.mgu-x{opacity:.75}}
.mgu-bubble{position:absolute;right:calc(100% - 28px);bottom:60%;width:max-content;max-width:178px;padding:.55rem .75rem;background:#fff;border:2px solid var(--ink);border-radius:12px 12px 3px 12px;color:var(--ink);font-family:inherit;font-weight:500;font-size:.78rem;line-height:1.35;letter-spacing:0;text-transform:none;text-wrap:balance;box-shadow:3px 3px 0 var(--gold);opacity:0;transform:scale(.6) translateY(8px);transform-origin:100% 100%;transition:opacity .16s,transform .24s cubic-bezier(.3,1.5,.5,1)}
.mgu-bubble.on{opacity:1;transform:none}
.mgu-bubble[dir=rtl]{font-weight:600;font-size:.86rem;line-height:1.5}
@media (prefers-reduced-motion:reduce){.mgu [data-r]{animation:none}.mgu .pupil,.mgu [data-r=look],.mgu-bubble{transition:none}}

/* He stands on the button, so the button must not lift out from under him. */
.mg-chat.has-usta{transform-origin:50% 100%}
.mg-chat.has-usta:hover{transform:none}

/* Arabic pages put the button on the left, so his speech opens to the right. */
[dir=rtl] .mgu-bubble{right:auto;left:calc(100% - 28px);border-radius:12px 12px 12px 3px;box-shadow:-3px 3px 0 var(--gold);transform-origin:0 100%}
[dir=rtl] .mgu-x{right:auto;left:2%}

@media print{.mgu{display:none}}