/* ============================================================
   Component: Pipo Mascot (v2 — Fluent 3D)
   ------------------------------------------------------------
   Estrutura: balão "olá!" + emoji 🐶 + label "Pipo".
   Tamanho controlado pelo pai via --pipo-emoji-size.
   ============================================================ */

.pipo-mascot {
  /* Tamanho padrão (parent pode sobrescrever via --pipo-emoji-size) */
  --pipo-emoji-size: 120px;

  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  /* Reserva espaço pro balão flutuar acima sem sair do container */
  padding-block-start: 28px;
}

/* --- Balão "olá!" ----------------------------------------- */
.pipo-mascot__balloon {
  position: absolute;
  /* Ancorado pela ESQUERDA (cresce pra direita, não pra esquerda) —
     pra frases longas (ex.: "Olá! Escolha um mundo!" na home) não
     desalinharem indo pra trás do Pipo. Posicionado a partir do
     meio-direita do emoji, encostando na cabeça (top pequeno). */
  top: 6px;
  left: 32%;
  background: var(--color-barn);
  color: var(--color-white);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-pill);
  font-family: var(--font-family-base);
  font-size: 13px;
  font-weight: var(--font-weight-bold);
  line-height: 1;
  letter-spacing: var(--letter-spacing-tight);
  white-space: nowrap;
  box-shadow: var(--shadow-chip);
  user-select: none;
}

/* Pontinho do balão — triângulo CSS apontando pra BAIXO (na direção
   da cabeça/boca do Pipo, que fica abaixo-à-esquerda do balão agora
   que ele está ancorado pela esquerda). */
.pipo-mascot__balloon::after {
  content: '';
  position: absolute;
  bottom: -6px;
  left: 12px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 8px 7px 0 7px;
  border-color: var(--color-barn) transparent transparent transparent;
}

/* --- Emoji 🐶 (Fluent 3D via fluentEmoji.parse) ------------ */
.pipo-mascot__emoji {
  font-size: var(--pipo-emoji-size);
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* Respiração idle — mesma linguagem dos animal-tokens da
     Fazenda (scale leve em loop). Dá vida ao Pipo quando nada
     está acontecendo. Quando .is-barking ativa, a animação
     pipo-bark abaixo sobrescreve esta (mesma propriedade
     `animation`, cascata ganha). Origem em 80% mantém o
     emoji "ancorado nos pés", crescimento sutil pra cima. */
  animation: pipo-breathe 3.2s ease-in-out infinite;
  transform-origin: center 80%;
  will-change: transform;
}

@keyframes pipo-breathe {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.03); }
}

/* Imagem injetada pelo fluentEmoji.parse() */
.pipo-mascot__emoji img.emoji,
.pipo-mascot__emoji img.fluent-emoji {
  width: 1em;
  height: 1em;
  display: block;
}

/* Label "Pipo" removida na sessão 8 — Pipo é reconhecível pelo
   contexto do balão "olá!" sem precisar de texto auxiliar. */

/* ============================================================
   Estado "barking" — disparado quando Pipo recebe tap e o
   áudio do latido toca. Loop até o áudio terminar (componente
   pai limpa a classe via Alpine no 'ended'). Combina animação
   no emoji (pulse vertical "abrindo a boca") + pop no balão
   pra acompanhar a troca de texto.
   ============================================================ */

.pipo-mascot.is-barking .pipo-mascot__emoji {
  animation: pipo-bark 0.42s ease-in-out infinite;
  transform-origin: center 80%;
}

@keyframes pipo-bark {
  0%, 100% { transform: scale(1)        translateY(0); }
  30%      { transform: scale(1.08)     translateY(-3px); }
  60%      { transform: scale(0.96)     translateY(0); }
}

.pipo-mascot.is-barking .pipo-mascot__balloon {
  animation: pipo-balloon-pop 280ms cubic-bezier(0.5, 1.5, 0.5, 1);
}

@keyframes pipo-balloon-pop {
  0%   { transform: scale(0.82); }
  55%  { transform: scale(1.08); }
  100% { transform: scale(1); }
}

/* ============================================================
   Pegadas 🐾 que saltam do Pipo no toque.
   ------------------------------------------------------------
   Renderizadas como <img> da CDN Fluent 3D (não dependem do
   fluentEmoji.parse, que só corre uma vez no DOMContentLoaded).
   JS passa --paw-dx, --paw-dy, --paw-rotate, --paw-delay inline
   por pegada — CSS faz o resto.

   Posicionamento: position:absolute centrado em left:50% /
   bottom:~35% do .pipo-mascot (que é position:relative). Sai
   do fluxo, NÃO afeta layout do balão, emoji ou tamanho do
   container. pointer-events:none garante que pegadas em cima
   do Pipo não bloqueiam novo toque.
   ============================================================ */
.pipo-mascot__paw {
  position: absolute;
  left: 50%;
  bottom: 30%;
  /* Tamanho proporcional ao Pipo — ~22% do emoji-size. Funciona
     tanto na home (Pipo 160-200px → paw 35-44px) quanto no farm
     (Pipo 80-96px → paw 17-21px). Sem hardcode por contexto. */
  width:  calc(var(--pipo-emoji-size, 100px) * 0.22);
  height: calc(var(--pipo-emoji-size, 100px) * 0.22);
  pointer-events: none;
  user-select: none;
  opacity: 0;
  transform: translate(-50%, 0) scale(0.4) rotate(0deg);
  animation: pipo-paw-fly 720ms ease-out forwards;
  animation-delay: var(--paw-delay, 0ms);
  z-index: 1;     /* acima do emoji, abaixo do balão */
  will-change: transform, opacity;
}

/* dx/dy chegam do JS como FRAÇÕES unitless (ex: 0.5, -0.65).
   Aqui multiplicamos por --pipo-emoji-size pra obter pixels
   proporcionais. Isso mantém o "leque" do mesmo tamanho visual
   relativo ao Pipo em qualquer contexto. */
@keyframes pipo-paw-fly {
  0% {
    transform: translate(-50%, 0) scale(0.4) rotate(0deg);
    opacity: 0;
  }
  15% {
    opacity: 1;
  }
  100% {
    transform:
      translate(
        calc(-50% + var(--paw-dx, 0) * var(--pipo-emoji-size, 100px)),
        calc(var(--paw-dy, -0.5) * var(--pipo-emoji-size, 100px))
      )
      scale(1)
      rotate(var(--paw-rotate, 0deg));
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  /* Idle: sem respiração. Bark: sem pulse/pop, só estado quieto */
  .pipo-mascot__emoji {
    animation: none;
  }
  .pipo-mascot.is-barking .pipo-mascot__emoji,
  .pipo-mascot.is-barking .pipo-mascot__balloon {
    animation: none;
  }
  .pipo-mascot.is-barking .pipo-mascot__emoji {
    transform: scale(1.05);
  }
  /* Pegadas: piscam suavemente no lugar em vez de voarem */
  .pipo-mascot__paw {
    animation: pipo-paw-fade 400ms ease-out forwards;
  }
  @keyframes pipo-paw-fade {
    0%   { opacity: 0; }
    50%  { opacity: 1; }
    100% { opacity: 0; }
  }
}