/* Mascote oficial (pino de boné e microfone): reações e movimentos.
   A imagem e a lógica estão em mascote.js. */

/* ---------- Mascote que reage (criarMascote) -------------------------------- */

.mascote {
  --inclina: 0deg;
  position: relative;
  display: inline-block;
  width: 100%;
  line-height: 0;
  rotate: var(--inclina);
  transition: rotate .5s cubic-bezier(.25, 1.4, .45, 1);
  -webkit-user-select: none;
  user-select: none;
}
.mascote .m-corpo { display: block; transform-origin: 50% 96%; transition: filter .4s ease; }
/* Sombra só na camada do corpo, que é parada: a mão e a pálpebra se mexem por
   cima sem obrigar o navegador a refazer a sombra a cada quadro */
.mascote .arte > img:first-child { filter: drop-shadow(0 10px 14px rgba(0, 0, 0, .45)); }

/* Espiando: só a cabeça, do boné até a língua, com a borda de baixo reta pra
   encostar em cima de um cartão. Pra cima e pros lados ele pode passar da
   caixa (pulo, aba do boné, microfone) */
.mascote-espiando { aspect-ratio: 1.27; clip-path: inset(-60% -30% 0 -30%); }
.mascote-espiando .m-corpo { position: absolute; left: -15%; top: 0; width: 125%; transform-origin: 50% 60%; }

/* Cada expressão é um jeito de mexer */
.mascote[data-expressao='feliz'] .m-corpo { animation: m-feliz 1.8s ease-in-out infinite; }
.mascote[data-expressao='uau'] .m-corpo { animation: m-uau .5s ease-in-out infinite alternate; }
.mascote[data-expressao='apaixonado'] .m-corpo { animation: m-festa .62s cubic-bezier(.3, 1.4, .5, 1) infinite; }
.mascote[data-expressao='meh'] .m-corpo { animation: m-meh 2.6s ease-in-out infinite; filter: saturate(.8); }
.mascote[data-expressao='triste'] .m-corpo { animation: m-triste 3s ease-in-out infinite; filter: saturate(.5) brightness(.85); }
.mascote[data-expressao='confuso'] .m-corpo { animation: m-confuso 2.4s ease-in-out infinite; }
.mascote.pulando .m-corpo { animation: m-pulo .8s cubic-bezier(.3, 1.6, .5, 1) 2; }

/* Efeitos em volta */
.m-efeitos { position: absolute; inset: 0; pointer-events: none; }
.m-efeitos i { position: absolute; display: none; font-style: normal; }
.m-efeitos svg { display: block; width: 100%; height: auto; }

.m-coracao { width: 16%; bottom: 40%; }
.m-coracao:nth-child(1) { left: 6%; animation-delay: 0s; }
.m-coracao:nth-child(2) { left: 44%; width: 12%; animation-delay: -.5s; }
.m-coracao:nth-child(3) { right: 4%; animation-delay: -1s; }
.mascote[data-expressao='apaixonado'] .m-coracao { display: block; animation: m-sobe 1.5s ease-out infinite; }

.m-gota { width: 11%; top: 20%; right: 22%; }
.mascote[data-expressao='triste'] .m-gota { display: block; animation: m-gota 1.4s ease-in infinite; }

.m-duvida { top: 2%; right: 4%; font-family: var(--font-hand, cursive); font-size: 2.4em; line-height: 1; color: var(--accent, #ff6a13); text-shadow: 2px 2px 0 #241510; }
.mascote[data-expressao='confuso'] .m-duvida,
.mascote[data-expressao='meh'] .m-duvida { display: block; animation: m-duvida 1.6s ease-in-out infinite alternate; }
.mascote[data-expressao='meh'] .m-duvida { opacity: .8; font-size: 1.8em; }

.m-brilho { width: 13%; }
.m-brilho:nth-of-type(6) { top: 6%; left: 2%; }
.m-brilho:nth-of-type(7) { top: 0; right: 6%; width: 10%; animation-delay: -.4s; }
.mascote[data-expressao='uau'] .m-brilho,
.mascote[data-expressao='apaixonado'] .m-brilho { display: block; animation: m-brilho .8s ease-in-out infinite alternate; }

@keyframes m-feliz {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50% { transform: translateY(-5%) rotate(2deg); }
}
@keyframes m-uau {
  from { transform: translateY(-2%) scale(1.02) rotate(-3deg); }
  to { transform: translateY(-9%) scale(1.07) rotate(3deg); }
}
@keyframes m-festa {
  0%, 100% { transform: translateY(0) scale(1, 1); }
  25% { transform: translateY(2%) scale(1.07, .92); }
  60% { transform: translateY(-16%) scale(.96, 1.05) rotate(-5deg); }
}
@keyframes m-meh {
  0%, 100% { transform: rotate(-5deg); }
  50% { transform: rotate(5deg) translateY(2%); }
}
@keyframes m-triste {
  0%, 100% { transform: translateY(9%) rotate(-7deg); }
  50% { transform: translateY(11%) rotate(-4deg); }
}
@keyframes m-confuso {
  0%, 100% { transform: rotate(9deg); }
  50% { transform: rotate(13deg) translateY(-2%); }
}
@keyframes m-pulo {
  0%, 100% { transform: translateY(0) scale(1, 1); }
  20% { transform: translateY(3%) scale(1.07, .9); }
  55% { transform: translateY(-22%) scale(.96, 1.06) rotate(-5deg); }
}
@keyframes m-sobe {
  0% { transform: translateY(0) scale(.5); opacity: 0; }
  20% { opacity: 1; }
  100% { transform: translateY(-160%) scale(1.1) rotate(12deg); opacity: 0; }
}
@keyframes m-gota {
  0% { transform: translateY(-20%); opacity: 0; }
  30% { opacity: 1; }
  100% { transform: translateY(120%); opacity: 0; }
}
@keyframes m-duvida { from { transform: translateY(0) rotate(-8deg); } to { transform: translateY(-18%) rotate(8deg); } }
@keyframes m-brilho { from { transform: scale(.4) rotate(0deg); opacity: .4; } to { transform: scale(1.1) rotate(45deg); opacity: 1; } }

/* ---------- Vitrine (mascote3D) -------------------------------------------- */

.mascote-3d {
  --inclina: 0deg;
  position: relative;
  display: inline-block;
  width: 100%;
  line-height: 0;
  rotate: var(--inclina);
  transition: rotate .5s cubic-bezier(.25, 1.4, .45, 1);
  -webkit-user-select: none;
  user-select: none;
}
.mascote-3d .m3d-corpo { display: block; transform-origin: 50% 96%; }
.mascote-3d .arte {
  transform-origin: 50% 92%;
  animation: m3d-flutua 3.4s ease-in-out infinite;
}
.mascote-3d .arte > img:first-child { filter: drop-shadow(0 16px 20px rgba(0, 0, 0, .5)); }
/* Sombra no chão, que encolhe quando ele sobe */
.m3d-palco::after {
  content: '';
  position: absolute;
  z-index: -1;
  left: 22%;
  right: 22%;
  bottom: -1%;
  height: 7%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(0, 0, 0, .5), transparent);
  animation: m3d-sombra 3.4s ease-in-out infinite;
}

/* Chegada: cai do alto como o pino do mapa, amassa no chão e volta */
.mascote-3d.aguardando { opacity: 0; }
.mascote-3d.caindo { animation: m3d-cai .95s cubic-bezier(.3, .9, .4, 1) both; }
.mascote-3d.caindo .m3d-palco::after { animation: m3d-sombra-cai .95s ease-out both; }

/* De vez em quando agita o microfone; no botão de votar fica empolgado */
.mascote-3d.agitando .m3d-corpo { animation: m3d-agito .9s ease-in-out; }
.mascote-3d.empolgado .m3d-corpo { animation: m3d-empolgado .42s ease-in-out infinite alternate; }
.mascote-3d.pulando .m3d-corpo { animation: m3d-pulo .8s cubic-bezier(.3, 1.6, .5, 1); }

@keyframes m3d-flutua {
  0%, 100% { transform: translateY(0) rotate(-1.5deg); }
  50% { transform: translateY(-9px) rotate(1.5deg); }
}
@keyframes m3d-sombra {
  0%, 100% { transform: scaleX(1); opacity: .9; }
  50% { transform: scaleX(.82); opacity: .55; }
}
@keyframes m3d-cai {
  0% { translate: 0 -70%; scale: .9 1.08; opacity: 0; }
  45% { translate: 0 0; scale: .94 1.08; opacity: 1; }
  60% { translate: 0 0; scale: 1.12 .86; }
  78% { translate: 0 -7%; scale: .97 1.04; }
  100% { translate: 0 0; scale: 1 1; opacity: 1; }
}
@keyframes m3d-sombra-cai {
  0% { transform: scaleX(.3); opacity: 0; }
  45% { transform: scaleX(1.2); opacity: 1; }
  100% { transform: scaleX(1); opacity: .9; }
}
@keyframes m3d-agito {
  0%, 100% { transform: none; }
  15% { transform: translateY(2%) scale(1.04, .95); }
  35% { transform: translateY(-8%) rotate(-7deg); }
  55% { transform: translateY(-4%) rotate(6deg); }
  75% { transform: translateY(-2%) rotate(-3deg); }
}
@keyframes m3d-empolgado {
  from { transform: translateY(-4px) rotate(-5deg) scale(1.03); }
  to { transform: translateY(-11px) rotate(5deg) scale(1.07); }
}
@keyframes m3d-pulo {
  0%, 100% { transform: none; }
  25% { transform: translateY(6px) scale(1.07, .9); }
  60% { transform: translateY(-44px) scale(.96, 1.05) rotate(-6deg); }
}


/* ---------- No skate (clique no mascote da vitrine) ------------------------- */

.mascote-3d { cursor: pointer; }
.m3d-palco { position: relative; display: block; }
.m3d-palco .m3d-corpo { position: relative; z-index: 1; }

/* Shape laranja com lixa preta e duas rodinhas creme. Fica escondido embaixo
   dos pés e aparece quando ele sobe */
.m3d-skate {
  position: absolute;
  z-index: 0;
  left: 50%;
  bottom: -3%;
  width: 74%;
  height: 14%;
  translate: -50% 14px;
  opacity: 0;
  transition: opacity .18s, translate .18s;
  pointer-events: none;
}
.skt-shape {
  position: absolute;
  inset: 0 0 auto;
  height: 50%;
  border-radius: 40% / 90%;
  background: linear-gradient(180deg, #ff9a52 0%, #ff6a13 55%, #c44d08 100%);
  border: 2px solid #241510;
  border-top: 5px solid #241510;
  box-shadow: 0 8px 14px rgba(0, 0, 0, .55), inset 0 2px 0 rgba(255, 255, 255, .35);
}
/* Trucks: as peças que prendem as rodas embaixo do shape */
.skt-shape::before, .skt-shape::after {
  content: '';
  position: absolute;
  top: 100%;
  width: 16%;
  height: 40%;
  background: #6b5a4e;
  border-radius: 0 0 4px 4px;
}
.skt-shape::before { left: 14%; }
.skt-shape::after { right: 14%; }
.skt-roda {
  position: absolute;
  bottom: 0;
  height: 58%;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 2px solid #241510;
  background: conic-gradient(#f8efe2 0 25%, #cdb9a7 0 50%, #f8efe2 0 75%, #cdb9a7 0);
}
.skt-roda.e { left: 15%; }
.skt-roda.d { right: 15%; }

/* Rastro de luz no chão, preso no ponto de partida */
.m3d-rastro {
  position: absolute;
  z-index: -1;
  bottom: 1%;
  width: var(--distancia, 200px);
  height: 5px;
  border-radius: 999px;
  opacity: 0;
  filter: blur(1px);
  box-shadow: 0 0 22px 4px rgba(255, 106, 19, .45);
  pointer-events: none;
}
.mascote-3d[data-sentido='esquerda'] .m3d-rastro { right: 50%; transform-origin: 100% 50%; background: linear-gradient(90deg, transparent, rgba(255, 138, 61, .95)); }
.mascote-3d[data-sentido='direita'] .m3d-rastro { left: 50%; transform-origin: 0 50%; background: linear-gradient(270deg, transparent, rgba(255, 138, 61, .95)); }

/* A volta: sobe no skate, atravessa inclinado pro lado que vai, vira e volta */
.mascote-3d.no-skate { z-index: 30; rotate: 0deg; }
.mascote-3d.no-skate .m3d-skate { opacity: 1; translate: -50% 0; }
.mascote-3d.no-skate .m3d-palco { animation: m3d-role 2.6s cubic-bezier(.4, 0, .35, 1) both; }
.mascote-3d.no-skate .m3d-corpo { animation: m3d-sobe-no-skate 2.6s ease both; }
.mascote-3d.no-skate .arte { animation: none; }
.mascote-3d.no-skate .skt-roda { animation: m3d-roda .22s linear infinite; }
.mascote-3d.no-skate .m3d-rastro { animation: m3d-rastro 2.6s cubic-bezier(.4, 0, .35, 1) both; }

@keyframes m3d-role {
  0% { transform: translateX(0) rotate(0deg); }
  7% { transform: translateX(0) rotate(calc(4deg * var(--sentido, -1))); }
  46% { transform: translateX(calc(var(--distancia, 200px) * var(--sentido, -1))) rotate(calc(2.5deg * var(--sentido, -1))); }
  54% { transform: translateX(calc(var(--distancia, 200px) * var(--sentido, -1))) rotate(calc(-3deg * var(--sentido, -1))); }
  93% { transform: translateX(0) rotate(calc(-1.4deg * var(--sentido, -1))); }
  100% { transform: translateX(0) rotate(0deg); }
}
@keyframes m3d-sobe-no-skate {
  0% { transform: translateY(0); }
  5% { transform: translateY(2%) scale(1.04, .95); }
  11% { transform: translateY(-12%); }
  16%, 90% { transform: translateY(-4.5%); }
  95% { transform: translateY(-9%); }
  100% { transform: translateY(0); }
}
@keyframes m3d-roda { to { rotate: 360deg; } }

/* Fala: balão em cima da cabeça (o .balao vem do site.css). Mora no palco,
   então atravessa a tela junto com ele no skate */
.mascote-3d.falando { z-index: 30; }
.m3d-fala {
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: calc(100% + 14px);
  translate: -50% 0;
  width: max-content;
  max-width: min(190px, 64vw);
  text-align: center;
  pointer-events: none;
  transform-origin: 50% 100%;
  animation: m3d-fala-entra .42s cubic-bezier(.25, 1.55, .45, 1) both;
}
.m3d-fala::after { left: calc(50% - 9px); }
.m3d-fala.saindo { animation: m3d-fala-sai .3s ease-in both; }
@keyframes m3d-fala-entra {
  from { transform: scale(.4) rotate(-8deg); opacity: 0; }
  to { transform: scale(1) rotate(-3deg); opacity: 1; }
}
@keyframes m3d-fala-sai {
  from { transform: scale(1) rotate(-3deg); opacity: 1; }
  to { transform: scale(.6) rotate(4deg); opacity: 0; }
}
@keyframes m3d-rastro {
  0% { transform: scaleX(0); opacity: 0; }
  9% { opacity: 1; }
  46% { transform: scaleX(1); opacity: .95; }
  62% { transform: scaleX(1); opacity: .55; }
  100% { transform: scaleX(1); opacity: 0; }
}

/* ---------- Arte em camadas: estala o dedo e pisca a cada 3s ---------------- */

.arte { position: relative; display: block; }
.arte img { display: block; width: 100%; height: auto; }
.arte .arte-riscos, .arte .arte-mao { position: absolute; inset: 0; height: 100%; will-change: transform; }

/* A luva dá um tranco girando no punho (medido na arte: 34% x 57,5%) */
.arte-mao { transform-origin: 34.3% 57.5%; animation: estalo 3s ease-in-out infinite; }
/* Os riscos estouram pra fora da ponta do dedo, somem e voltam */
.arte-riscos { transform-origin: 16% 47%; animation: som-do-estalo 3s ease-out infinite; }
/* Pálpebra na cor do rosto sobre o olho da esquerda (esclera medida na arte),
   descendo de cima; fechada, mostra o risco do olho fechado */
.arte-palpebra {
  position: absolute;
  left: 39.1%;
  top: 29%;
  width: 14.9%;
  height: 14.6%;
  border-radius: 50%;
  background: #050403;
  transform-origin: 50% 0;
  transform: scaleY(0);
  animation: piscadinha 3s ease-in-out infinite;
}
.arte-palpebra svg { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; animation: olho-fechado 3s infinite; }

/* Triste, em dúvida ou confuso ele não fica de gracinha */
.mascote[data-expressao='triste'] .arte > *,
.mascote[data-expressao='meh'] .arte > *,
.mascote[data-expressao='confuso'] .arte > * { animation: none; }

@keyframes estalo {
  0%, 12%, 100% { transform: none; }
  3% { transform: rotate(-9deg) scale(1.05); }
  6% { transform: rotate(5deg) scale(1.07); }
  9% { transform: rotate(-2deg) scale(1.02); }
}
@keyframes som-do-estalo {
  0%, 4% { transform: none; opacity: 1; }
  7% { transform: translateX(-5%) scale(1.3); opacity: 1; }
  10% { transform: translateX(-7%) scale(1.15); opacity: .6; }
  14% { transform: none; opacity: 0; }
  24%, 100% { transform: none; opacity: 1; }
}
@keyframes piscadinha {
  0%, 14%, 30%, 100% { transform: scaleY(0); }
  18%, 25% { transform: scaleY(1); }
}
@keyframes olho-fechado {
  0%, 17%, 27%, 100% { opacity: 0; }
  19%, 25% { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .mascote, .mascote *, .mascote-3d, .mascote-3d *, .m3d-palco::after { animation: none !important; transition: none !important; }
  .m3d-skate, .m3d-rastro { display: none; }
  .mascote-3d.aguardando { opacity: 1; }
}