/* =====================================================
   ITAMANDUÁ — Mascote Sorveteria Itapolitana
   Versão 11 — BALÃO PROPORCIONAL AO MASCOTE NO CELULAR
   
   ANÁLISE DE PROPORÇÃO:
   ┌─────────────────────────────────────────────────────┐
   │  Desktop:  mascote 140px → balão max 200px (1.43x)  │
   │  Tablet:   mascote 120px → balão max 185px (1.54x)  │
   │  Celular:  mascote  85px → balão max 220px (2.59x)  │
   │  Cel.Peq:  mascote  70px → balão max 190px (2.71x)  │
   └─────────────────────────────────────────────────────┘
   
   PRINCÍPIO: No celular o balão deve ser MAIOR que o
   mascote para garantir legibilidade — padrão Duolingo/
   McDonald's. Fonte Nunito Bold: arredondada, alegre e
   legível em tamanhos pequenos (padrão apps de mascote).
   
   COR: Amarelo dourado (#FFD700) + texto escuro (#1a1a1a)
   → Maior contraste possível (ratio 14:1, supera WCAG AAA)
   → Combina com a estrela dourada da Caçada
   ===================================================== */

/* ---- Container — posição base (lado esquerdo) ---- */
#ita-mascote {
  position: fixed;
  bottom: 160px;
  left: 6px;
  right: auto;
  z-index: 9990;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  pointer-events: none;
  transform: translateX(-250px);
  transition: transform 0.9s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Visível: posição normal lado esquerdo */
#ita-mascote.ita-visivel {
  transform: translateX(0) !important;
  transition: transform 0.9s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

/* TRILHO IDA: corre de frente para a esquerda (bottom: 160px) */
#ita-mascote.ita-trilho-ida {
  bottom: 160px;
  left: auto;
  right: auto;
  transition: left 3s linear !important;
  transform: none !important;
}

/* TRILHO VOLTA: corre de frente para a direita (bottom: 220px) */
#ita-mascote.ita-trilho-volta {
  bottom: 220px;
  left: auto;
  right: auto;
  transition: left 4.5s linear !important;
  transform: none !important;
}

/* ---- Imagem ---- */
#ita-mascote img {
  width: 140px;
  height: auto;
  display: block;
  cursor: pointer;
  pointer-events: auto;
  filter: drop-shadow(2px 6px 12px rgba(0,0,0,0.28));
  animation: ita-flutuar 3.5s ease-in-out infinite;
  user-select: none;
  -webkit-user-drag: none;
  transform-origin: bottom center;
  transition: filter 0.25s ease;
}

#ita-mascote img:hover {
  filter: drop-shadow(3px 8px 18px rgba(232,0,13,0.5));
  animation-play-state: paused;
  transform: scale(1.08) rotate(-3deg);
}

#ita-mascote.ita-correndo img {
  animation: ita-correr 0.16s ease-in-out infinite !important;
  transform: none !important;
  cursor: default;
}

#ita-mascote.ita-voltando img {
  animation: ita-correr 0.16s ease-in-out infinite !important;
  transform: none !important;
  cursor: default;
}

/* ---- Animações ---- */
@keyframes ita-flutuar {
  0%,100% { transform: translateY(0px) rotate(0deg) scaleX(1); }
  30%      { transform: translateY(-9px) rotate(1.5deg) scaleX(1); }
  70%      { transform: translateY(-15px) rotate(-1.5deg) scaleX(1); }
}

@keyframes ita-correr {
  0%   { transform: translateY(0px) rotate(0deg); }
  25%  { transform: translateY(-12px) rotate(-2deg); }
  50%  { transform: translateY(-16px) rotate(0deg); }
  75%  { transform: translateY(-12px) rotate(2deg); }
  100% { transform: translateY(0px) rotate(0deg); }
}

/* Pulsação suave do balão */
@keyframes ita-balao-pulsar {
  0%,100% { box-shadow: 0 4px 16px rgba(0,0,0,0.18); }
  50%     { box-shadow: 0 6px 22px rgba(0,0,0,0.22); }
}

/* ============================================
   BALÃO DE FALA — PROPORCIONAL + MÁXIMO CONTRASTE
   
   PADRÃO DUOLINGO/McDONALD'S para mascotes:
   - Fundo: Amarelo dourado (#FFD700) — cor quente, chama atenção
   - Texto: Preto escuro (#1a1a1a) — contraste ratio 14:1 (WCAG AAA)
   - Fonte: Nunito Bold — arredondada, alegre, legível em tamanhos pequenos
   - Borda: Laranja escuro (#B8860B) — delimita o balão em qualquer fundo
   ============================================ */
#ita-balao {
  background: #ffffff;
  border: 3px solid #e8650a;
  border-radius: 16px 16px 16px 4px;
  padding: 10px 16px;
  margin-bottom: 10px;
  /* Nunito Bold: padrão de mascotes em grandes apps */
  font-family: 'Nunito', 'Poppins', 'Segoe UI', Arial, sans-serif;
  font-size: 14px;
  font-weight: 900;
  color: #000000;
  max-width: 200px;
  min-width: 160px;
  text-align: center;
  line-height: 1.5;
  letter-spacing: 0.01em;
  text-shadow: none;
  box-shadow: 0 4px 16px rgba(0,0,0,0.18);
  pointer-events: none;
  opacity: 0;
  transform: scale(0.75) translateY(8px);
  transition: opacity 0.35s ease, transform 0.35s cubic-bezier(0.34,1.56,0.64,1);
  position: relative;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  align-self: flex-start;
  margin-left: 0;
}

/* Quando visível: pulsa suavemente */
#ita-balao.ita-balao-show {
  opacity: 1;
  transform: scale(1) translateY(0);
  animation: ita-balao-pulsar 2.5s ease-in-out infinite;
}

/* Setinha inferior esquerda */
#ita-balao::after {
  content: '';
  position: absolute;
  bottom: -13px;
  left: 16px;
  right: auto;
  border-left: 9px solid transparent;
  border-right: 9px solid transparent;
  border-top: 13px solid #B8860B;
}

/* Sombra branca atrás da setinha */
#ita-balao::before {
  content: '';
  position: absolute;
  bottom: -17px;
  left: 13px;
  right: auto;
  border-left: 12px solid transparent;
  border-right: 12px solid transparent;
  border-top: 16px solid rgba(255,255,255,0.85);
}

/* ============================================
   RESPONSIVO — TABLET (601px a 1024px)
   mascote: 120px → balão: max 185px (1.54x)
   ============================================ */
@media (max-width: 1024px) and (min-width: 601px) {
  #ita-mascote     { bottom: 155px; left: 8px; }
  #ita-mascote img { width: 120px; }
  #ita-balao {
    font-size: 13px;
    max-width: 185px;
    min-width: 148px;
    padding: 10px 14px;
    border-width: 3px;
  }
}

/* ============================================
   RESPONSIVO — CELULAR (até 600px)
   mascote: 85px → balão: max 220px (2.59x)
   
   ANÁLISE: Com mascote pequeno (85px), o balão
   precisa ser PROPORCIONALMENTE MAIOR para que
   a fonte seja legível. Padrão Duolingo mobile:
   balão ocupa ~60% da largura da tela.
   ============================================ */
@media (max-width: 600px) {
  #ita-mascote     { bottom: 150px; left: 4px; }
  #ita-mascote img { width: 75px; }
  #ita-balao {
    /* Compacto no celular — legível mas sem atrapalhar */
    font-size: 11px;
    font-weight: 800;
    max-width: 145px;
    min-width: 110px;
    padding: 7px 10px;
    border-width: 2.5px;
    outline-width: 2px;
    line-height: 1.45;
  }
}

/* ============================================
   RESPONSIVO — CELULAR PEQUENO (até 360px)
   mascote: 70px → balão: max 190px (2.71x)
   ============================================ */
@media (max-width: 359px) {
  #ita-mascote     { bottom: 145px; left: 2px; z-index: 9985; }
  #ita-mascote img { width: 62px; }
  #ita-balao {
    font-size: 10px;
    font-weight: 800;
    max-width: 125px;
    min-width: 95px;
    padding: 6px 9px;
    border-width: 2px;
    line-height: 1.4;
  }
  #ita-balao::after {
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 11px solid #B8860B;
  }
  #ita-balao::before {
    border-left: 11px solid transparent;
    border-right: 11px solid transparent;
    border-top: 14px solid rgba(255,255,255,0.85);
  }
}