/* MASCOTE DA CAMPOS PIZZA - chef ajudante (sem falas, só gestos e emojis) */
#cm{position:fixed;left:0;top:0;width:130px;z-index:54;cursor:pointer;-webkit-tap-highlight-color:transparent;
  transition:transform .8s cubic-bezier(.45,.05,.3,1),opacity .4s;will-change:transform;
  --aL:12deg;--aR:-12deg;--pa:12deg}
#cm.cm-off{opacity:0;pointer-events:none}
#cm svg{width:100%;height:auto;display:block;overflow:visible;filter:drop-shadow(0 6px 10px rgba(0,0,0,.25))}
#cm .bob{animation:cm-breathe 3.2s ease-in-out infinite;transform-box:view-box;transform-origin:100px 230px}
@keyframes cm-breathe{50%{transform:scale(1.015,.985)}}
#cm.cm-moving .bob{animation:cm-hop .4s ease-in-out infinite}
@keyframes cm-hop{50%{transform:translateY(-14px) rotate(-3deg)}}
#cm .shadow{transform-box:fill-box;transform-origin:center}
#cm.cm-moving .shadow{animation:cm-shadow .4s ease-in-out infinite}
@keyframes cm-shadow{50%{transform:scale(.7);opacity:.2}}

/* andar: pernas alternadas, braços balançando, corpo inclinado para onde vai */
#cm{touch-action:none}
#cm-legL,#cm-legR{transform-box:view-box}
#cm-legL{transform-origin:85px 198px}
#cm-legR{transform-origin:115px 198px}
#cm.cm-walk #cm-legL{animation:cm-perna .44s ease-in-out infinite alternate}
#cm.cm-walk #cm-legR{animation:cm-perna .44s ease-in-out infinite alternate-reverse}
@keyframes cm-perna{from{transform:rotate(-18deg)}to{transform:rotate(18deg)}}
#cm.cm-walk .bob{animation:cm-passo .22s ease-in-out infinite alternate}
@keyframes cm-passo{to{transform:translateY(-5px)}}
#cm.cm-walk[data-state=idle] #cm-armL{animation:cm-balL .44s ease-in-out infinite alternate}
#cm.cm-walk[data-state=idle] #cm-armR{animation:cm-balR .44s ease-in-out infinite alternate}
@keyframes cm-balL{from{transform:rotate(-14deg)}to{transform:rotate(26deg)}}
@keyframes cm-balR{from{transform:rotate(-26deg)}to{transform:rotate(14deg)}}
#cm svg{transition:transform .3s}
#cm.cm-esq svg{transform:rotate(-5deg)}
#cm.cm-dir svg{transform:rotate(5deg)}

/* arrastado: pernas balançando no ar, braços pra cima, boca de susto */
#cm-mouthO{opacity:0}
#cm[data-state=drag]{cursor:grabbing;--aL:150deg;--aR:-150deg}
#cm[data-state=drag] #cm-mouthO{opacity:1}
#cm[data-state=drag] #cm-mouthOpen{opacity:0}
#cm[data-state=drag] .shadow{opacity:0}
#cm[data-state=drag] #cm-legL{animation:cm-perna .3s ease-in-out infinite alternate}
#cm[data-state=drag] #cm-legR{animation:cm-perna .3s ease-in-out infinite alternate-reverse}
#cm[data-state=drag] .bob{animation:cm-pendura .6s ease-in-out infinite alternate;transform-origin:100px 0}
@keyframes cm-pendura{from{transform:rotate(-6deg)}to{transform:rotate(6deg)}}
#cm.cm-pouso .bob{animation:cm-pouso .45s ease-out}
@keyframes cm-pouso{30%{transform:scale(1.15,.8)}60%{transform:scale(.95,1.06)}}

#cm-armL,#cm-armR{transform-box:view-box;transition:transform .45s cubic-bezier(.3,1.5,.5,1)}
#cm-armL{transform-origin:62px 150px;transform:rotate(var(--aL))}
#cm-armR{transform-origin:138px 150px;transform:rotate(var(--aR))}
#cm .finger{opacity:0;transition:opacity .2s}
#cm-head{transform-box:view-box;transform-origin:100px 135px;transition:transform .5s ease}
#cm-eyesOpen{transform-box:fill-box;transform-origin:center;animation:cm-blink 4.5s infinite}
@keyframes cm-blink{0%,92%,100%{transform:scaleY(1)}95%{transform:scaleY(.08)}}
#cm .pupil{transition:transform .35s ease}
#cm-eyesClosed,#cm-mouthSleep,#cm-pizzaToss,#cm-zzz{opacity:0}

#cm[data-state=wave] #cm-armR{animation:cm-wave .5s ease-in-out infinite alternate}
@keyframes cm-wave{from{transform:rotate(-130deg)}to{transform:rotate(-165deg)}}
#cm[data-state=wave] #cm-head{transform:rotate(-5deg)}

#cm[data-state=point] #cm-armL{transform:rotate(var(--pa))}
#cm[data-state=point] #cm-armL .finger{opacity:1}

#cm[data-state=thumbs]{--aR:-160deg}
#cm[data-state=thumbs] #cm-armR .finger{opacity:1}
#cm[data-state=thumbs] .bob{animation:cm-joy .5s ease-out 2}
@keyframes cm-joy{40%{transform:translateY(-22px)}}
#cm[data-state=thumbs] #cm-eyesOpen,#cm[data-state=happy] #cm-eyesOpen{opacity:0}
#cm[data-state=thumbs] #cm-eyesClosed,#cm[data-state=happy] #cm-eyesClosed{opacity:1}

#cm[data-state=happy]{--aL:140deg;--aR:-140deg}
#cm[data-state=happy] .bob{animation:cm-jump .7s ease-out}
@keyframes cm-jump{40%{transform:translateY(-30px) rotate(10deg)}70%{transform:translateY(0) rotate(-4deg)}}

#cm[data-state=think] #cm-head{transform:rotate(9deg)}
#cm[data-state=think]{--aR:-150deg}

#cm[data-state=process]{--aL:135deg;--aR:-135deg}
#cm[data-state=process] #cm-armL{animation:cm-pumpL .8s ease-in-out infinite}
#cm[data-state=process] #cm-armR{animation:cm-pumpR .8s ease-in-out infinite}
@keyframes cm-pumpL{50%{transform:rotate(155deg)}}
@keyframes cm-pumpR{50%{transform:rotate(-155deg)}}
#cm[data-state=process] #cm-pizzaToss{opacity:1}
#cm-pizzaToss{transform-box:view-box;transform-origin:100px -40px;animation:cm-toss .8s ease-in-out infinite}
@keyframes cm-toss{0%,100%{transform:translateY(0) scaleX(1)}50%{transform:translateY(-34px) scaleX(.85)}}
#cm-pizzaSpin{transform-box:fill-box;transform-origin:center;animation:cm-spin .8s linear infinite}
@keyframes cm-spin{to{transform:rotate(360deg)}}
#cm[data-state=process] .pupil{transform:translateY(-3px)}

#cm[data-state=sleep]{--aL:168deg;--aR:-168deg}
#cm[data-state=sleep] #cm-head{transform:rotate(-7deg) translateY(3px)}
#cm[data-state=sleep] #cm-eyesOpen,#cm[data-state=sleep] #cm-mouthOpen{opacity:0}
#cm[data-state=sleep] #cm-eyesClosed,#cm[data-state=sleep] #cm-mouthSleep,#cm[data-state=sleep] #cm-zzz{opacity:1}
#cm[data-state=sleep] .bob{animation:cm-breathe 4.5s ease-in-out infinite}
#cm-zzz text{animation:cm-zz 3s ease-in infinite;opacity:0}
#cm-zzz text:nth-child(2){animation-delay:1s}
#cm-zzz text:nth-child(3){animation-delay:2s}
@keyframes cm-zz{0%{opacity:0;transform:translate(0,0) scale(.6)}20%{opacity:1}100%{opacity:0;transform:translate(22px,-40px) scale(1.3)}}

/* balão: emojis rápidos ou fala com botões */
#cm .cm-bal{position:absolute;left:50%;bottom:84%;transform:translateX(calc(-50% + var(--bx,0px))) scale(0);transform-origin:calc(50% - var(--bx,0px)) 100%;
  background:#fffaf3;color:#2a160b;border:1px solid #e3d6c4;border-radius:18px;padding:5px 12px;font-size:22px;line-height:1.25;white-space:nowrap;
  box-shadow:0 10px 26px rgba(0,0,0,.28);transition:transform .3s cubic-bezier(.3,1.6,.5,1);pointer-events:none;cursor:default;text-align:left}
#cm .cm-bal::after{content:"";position:absolute;left:calc(50% - var(--bx,0px));bottom:-8px;margin-left:-8px;border:8px solid transparent;border-bottom:0;border-top-color:#fffaf3}
#cm .cm-bal.cm-show{transform:translateX(calc(-50% + var(--bx,0px))) scale(1)}
#cm .cm-bal.cm-texto{white-space:normal;width:max-content;max-width:min(270px,calc(100vw - 24px));font:500 15px/1.4 Figtree,system-ui,sans-serif;padding:12px 30px 12px 14px;pointer-events:auto}
#cm .cm-fechar{display:none;position:absolute;right:6px;top:6px;width:22px;height:22px;border:0;border-radius:50%;background:transparent;color:#6a5850;font:600 16px/1 system-ui,sans-serif;cursor:pointer;padding:0}
#cm .cm-fechar:hover{background:#f1e6d6}
#cm .cm-texto .cm-fechar{display:block}
#cm .cm-ops{display:flex;flex-wrap:wrap;gap:6px;margin-top:2px}
#cm .cm-ops:not(:empty){margin-top:10px}
#cm .cm-op{font:600 13px/1.2 Figtree,system-ui,sans-serif;color:#781f27;background:#fff;border:1.5px solid #e3d6c4;border-radius:999px;padding:7px 11px;cursor:pointer;text-decoration:none;text-align:left;transition:border-color .2s,background .2s;animation:cm-op .3s ease-out both}
#cm .cm-op:hover{border-color:#781f27}
#cm .cm-op.cm-forte{background:#781f27;border-color:#781f27;color:#fff7ee}
#cm .cm-op.cm-forte:hover{background:#9a2b35}
#cm .cm-op:nth-child(2){animation-delay:.05s}#cm .cm-op:nth-child(3){animation-delay:.1s}#cm .cm-op:nth-child(4){animation-delay:.15s}#cm .cm-op:nth-child(5){animation-delay:.2s}#cm .cm-op:nth-child(6){animation-delay:.25s}
@keyframes cm-op{from{opacity:0;transform:translateY(6px)}}
#cm .cm-op:focus-visible,#cm .cm-fechar:focus-visible{outline:3px solid #efb25a;outline-offset:2px}
#cm .cm-txt{cursor:pointer}
#cm .cm-dots i{display:inline-block;width:7px;height:7px;margin:0 2px;border-radius:50%;background:#8e1f2c;animation:cm-dot 1s infinite}
#cm .cm-dots i:nth-child(2){animation-delay:.15s}#cm .cm-dots i:nth-child(3){animation-delay:.3s}
@keyframes cm-dot{0%,60%,100%{transform:none;opacity:.4}30%{transform:translateY(-6px);opacity:1}}
/* boca mexendo enquanto fala */
#cm-mouthOpen{transform-box:fill-box;transform-origin:50% 0}
#cm.cm-falando #cm-mouthOpen{animation:cm-boca .14s ease-in-out infinite alternate}
@keyframes cm-boca{from{transform:scaleY(.3)}to{transform:scaleY(1)}}

/* botão de esconder */
#cm .cm-x{position:absolute;right:-4px;top:18%;width:26px;height:26px;border-radius:50%;border:1px solid #e3d6c4;background:#fffaf3;color:#5a3a2c;
  font:600 16px/1 system-ui,sans-serif;display:grid;place-items:center;padding:0;cursor:pointer;opacity:0;transition:opacity .2s;box-shadow:0 3px 8px rgba(0,0,0,.2)}
#cm:hover .cm-x,#cm .cm-x:focus-visible{opacity:1}

@media (max-width:900px){
  #cm{width:84px}
  #cm .cm-bal{font-size:17px;padding:4px 9px}
  #cm .cm-bal.cm-texto{font-size:14px}
  #cm .cm-x{opacity:.85;width:22px;height:22px;font-size:13px;right:-6px}
}
@media (prefers-reduced-motion:reduce){
  #cm,#cm *{animation:none!important;transition-duration:.01s!important}
}
@media print{#cm{display:none}}