/* Mochila Mágica — poses novas do Mochi (Martim, 01/11/2026) e sombra dos bonecos.
   Ficheiros: assets/mochi/{webp,camadas,sprites}/ (ver assets/mochi/manifest.json).
   Montagem: assets/js/mochi.js (window.MMochi). Sem JS fica a imagem estática.
   Movimento reduzido: tudo parado e só a pose estática (bloco no fim). */

/* ---------- Sombra e brilho suave dos bonecos (Mochi e turma) ----------
   .mm-boneco em <img>: elipse desfocada no chão (fundo radial) + drop-shadow leve.
   .mm-boneco num contentor (.mm-pose): elipse em ::after com blur. --mm-chao = altura dos pés (0–100%). */
.mm-boneco{--mm-sombra:radial-gradient(ellipse 40% 7% at 50% var(--mm-chao,95%),rgba(30,42,74,.12),rgba(30,42,74,.07) 45%,rgba(30,42,74,0) 100%);
  filter:drop-shadow(0 4px 8px rgba(0,0,0,.15));background:var(--mm-sombra) no-repeat}
.turma img.mm-boneco{background:var(--mm-sombra) no-repeat,#fff;box-shadow:none}   /* turma no índice: mantém o círculo branco */
.mm-av.mm-boneco{--mm-chao:92%}                                        /* avatares da turma (256 px, com margem) */
img.mm-boneco.peek,img.mm-boneco.mm-sem-chao{background:none}          /* a espreitar: não tem chão */
.mm-pose.mm-boneco{background:none}
.mm-pose.mm-boneco::after{content:"";position:absolute;z-index:-1;left:18%;right:18%;top:calc(var(--mm-chao,96%) - 4%);height:8%;
  border-radius:50%;background:rgba(30,42,74,.12);filter:blur(8px);pointer-events:none}
.mm-pose.mm-boneco.mm-pequeno::after{filter:blur(6px)}

/* ---------- Poses (estático, camadas e sprites) ---------- */
.mm-pose{position:relative;display:block;isolation:isolate;aspect-ratio:1/1;height:auto;max-width:100%}
.mm-pose .mm-in{position:absolute;inset:0;transform-origin:50% var(--mm-chao,96%)}
.mm-pose img{position:absolute;inset:0;width:100%;height:100%;display:block;max-width:none}

.mm-pose img{object-fit:contain;object-position:50% 100%}   /* poses antigas (festa, le, pensa) não são quadradas */
.mm-pose .mm-l{pointer-events:none}
.mm-pose .mm-olhos{opacity:0;animation:mm-pisca 5s infinite}
@keyframes mm-pisca{0%,92%,100%{opacity:0}93.5%,96%{opacity:1}}
/* pés no chão por pose (medido no manifest/origem) */
.mm-p-apoio{--mm-chao:83%}.mm-p-explica{--mm-chao:84%}.mm-p-calendario{--mm-chao:82%}.mm-p-cofre{--mm-chao:93%}
.mm-p-perdido{--mm-chao:94%}.mm-p-pergunta{--mm-chao:90%}.mm-p-familia{--mm-chao:78%}

/* camadas que mexem (rotação máxima ±12°, como pede o LEIAME) */
.mm-p-aceno .mm-braco{transform-origin:28.0% 53.8%;animation:mm-aceno 1.4s ease-in-out infinite}
.mm-p-escolhe .mm-braco{transform-origin:27.7% 53.0%;animation:mm-aceno 1.6s ease-in-out infinite}
@keyframes mm-aceno{0%,100%{rotate:0deg}30%{rotate:-12deg}65%{rotate:7deg}}
.mm-p-apoio .mm-braco{transform-origin:54.3% 48.6%;animation:mm-aponta 2s ease-in-out infinite}
@keyframes mm-aponta{0%,100%{rotate:0deg}50%{rotate:-6deg}}
.mm-p-apoio .mm-brilho{transform-origin:86.8% 35.3%;animation:mm-brilho 1.6s ease-in-out infinite}
@keyframes mm-brilho{0%,100%{opacity:.25;scale:.92}50%{opacity:1;scale:1.04}}
.mm-p-pergunta .mm-ponto{transform-origin:78.3% 61.7%;animation:mm-ponto 2.2s ease-in-out infinite}
@keyframes mm-ponto{0%,100%{rotate:-6deg}50%{rotate:6deg}}
.mm-p-perdido .mm-mapa{transform-origin:90.9% 57.5%;animation:mm-mapa 3s ease-in-out infinite}
@keyframes mm-mapa{0%,100%{rotate:0deg}40%{rotate:8deg}70%{rotate:-5deg}}

/* movimento do corpo todo */
.mm-p-certo .mm-in,.mm-salta .mm-in{animation:mm-salta .6s ease 1}
.mm-p-ligado .mm-in{animation:mm-salta .6s ease 2 .3s}
@keyframes mm-salta{0%,100%{transform:translateY(0)}35%{transform:translateY(-12%)}65%{transform:translateY(0) scale(1.04,.96)}}
.mm-p-encoraja .mm-in{animation:mm-inclina 2.4s ease-in-out infinite}
@keyframes mm-inclina{0%,100%{transform:rotate(0)}30%{transform:rotate(-4deg)}70%{transform:rotate(4deg)}}
.mm-p-adulto .mm-in{animation:mm-balanca 2.6s ease-in-out infinite}
@keyframes mm-balanca{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(3deg)}}

/* sprites: tira horizontal; o estático fica por baixo (invisível) para guardar o tamanho */
.mm-pose .mm-sprite{position:absolute;inset:0;background-repeat:no-repeat;background-position:0 0;
  background-size:calc(var(--mm-f) * 100%) 100%;animation:mm-sprite var(--mm-ms) steps(var(--mm-f),jump-none) var(--mm-n,1) forwards}
.mm-pose.mm-loop .mm-sprite{--mm-n:infinite}
.mm-pose.mm-tem-sprite img.mm-st,.mm-pose.mm-tem-sprite .mm-olhos{visibility:hidden}
@keyframes mm-sprite{from{background-position:0 0}to{background-position:100% 0}}

/* tamanhos de uso */
.mm-w64{width:64px}.mm-w96{width:96px}.mm-w120{width:120px}.mm-w150{width:150px}.mm-w180{width:180px}.mm-w220{width:220px}
.mm-centro{margin-inline:auto}

/* sítios do site */
.mm-pose-lado{display:flex;gap:18px;align-items:center}
.mm-pose-lado>.mm-pose{flex:0 0 auto}
@media (max-width:520px){.mm-pose-lado{flex-direction:column;text-align:center}}
.mm-vazio{display:flex;align-items:center;gap:12px}
.mm-vazio .mm-pose{flex:0 0 auto}

/* ---------- Movimento reduzido (e Modo de apoio «calmo»): só a pose estática ---------- */
html.mm-apoio-calmo .mm-pose *,html.mm-apoio-calmo .mm-pose .mm-in{animation:none!important}
html.mm-apoio-calmo .mm-pose .mm-olhos{opacity:0!important}
html.mm-apoio-calmo .mm-pose .mm-sprite{display:none!important}
html.mm-apoio-calmo .mm-pose.mm-tem-sprite img.mm-st{visibility:visible!important}
@media (prefers-reduced-motion:reduce){
  .mm-pose *,.mm-pose .mm-in{animation:none!important}
  .mm-pose .mm-olhos{opacity:0!important}
  .mm-pose .mm-sprite{display:none!important}
  .mm-pose.mm-tem-sprite img.mm-st{visibility:visible!important}
}

/* say-row com aceno em camadas: o braço já acena, o corpo não roda */
.wave-on .say-mochi.mm-pose{animation:none}
.mm-nota-pose{float:left;margin:-4px 10px 0 0}