/* ==========================================================================
   MASCOTS — dev e gatinho em 3D que andam pela página e comentam cada seção
   (criados por assets/js/mascots.js, com caixas em CSS 3D)
   ========================================================================== */

.mascots {
  /* unidade de cada modelo 3D (tamanho de uma "caixa" básica) */
  --u-dev: 5.5px;
  --u-bot: 5px;

  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 900; /* abaixo do WhatsApp e da notificação (1000) */
  height: 0;
  pointer-events: none;
}

.mascot {
  position: absolute;
  bottom: 8px; /* com a perspectiva os pés passam um pouco do corpo; sem folga cortariam */
  left: 0;
  /* a duração é definida pelo JS conforme a distância */
  transition: transform 0s ease-in-out;
  will-change: transform;
}

/* ---------- Modelos 3D ---------- */

.mascot--bot {
  --u: var(--u-bot);
  --yaw-idle: 32deg; /* o gato olha para o dev */
  --model-top: calc(6.2 * var(--u));
}

.mascot--dev {
  --u: var(--u-dev);
  --yaw-idle: -28deg; /* o dev olha para o gato */
  --model-top: calc(10.2 * var(--u)); /* o cabelo volumoso é mais alto que a cabeça */
}

.mascot--bot .mascot-sprite {
  width: calc(12 * var(--u));
  height: calc(11.2 * var(--u));
}

.mascot--dev .mascot-sprite {
  width: calc(10 * var(--u));
  height: calc(20.4 * var(--u));
}

.mascot-sprite {
  position: relative;
  animation: mascot-bob 1.8s ease-in-out infinite;
}

/* Gira em volta do centro do corpo. --yaw é mudado pelo JS enquanto eles andam. */
.model {
  position: absolute;
  top: var(--model-top);
  left: 50%;
  transform-style: preserve-3d;
  transform: perspective(520px) rotateX(-14deg) rotateY(var(--yaw, var(--yaw-idle)));
  transition: transform 0.5s ease;
}

.part {
  position: absolute;
  top: 0;
  left: 0;
  transform-style: preserve-3d;
  transform: translate3d(var(--x), var(--y), var(--z));
}

.face {
  position: absolute;
  backface-visibility: hidden;
}

/* ---------- Animações ---------- */

.mascot.is-walking .mascot-sprite {
  animation: mascot-step 0.36s ease-in-out infinite;
}

.mascot.is-talking .mascot-sprite {
  animation: mascot-hop 0.32s ease-out;
}

/* Braços e pernas: os de fase "a" e "b" balançam em sentidos opostos */
.mascot.is-walking .limb--a {
  animation: limb-a 0.72s ease-in-out infinite;
}

.mascot.is-walking .limb--b {
  animation: limb-b 0.72s ease-in-out infinite;
}

.cat-tail {
  animation: cat-wag 1.6s ease-in-out infinite alternate;
}

.cat-head {
  animation: cat-tilt 4s ease-in-out infinite;
}

.eye3d {
  animation: eye-blink 4.6s infinite;
}

@keyframes mascot-bob {
  50% {
    transform: translateY(-2px);
  }
}

@keyframes mascot-step {
  50% {
    transform: translateY(-3px);
  }
}

@keyframes mascot-hop {
  40% {
    transform: translateY(-9px);
  }
}

@keyframes limb-a {
  0%,
  100% {
    transform: translate3d(var(--x), var(--y), var(--z)) rotateX(32deg);
  }
  50% {
    transform: translate3d(var(--x), var(--y), var(--z)) rotateX(-32deg);
  }
}

@keyframes limb-b {
  0%,
  100% {
    transform: translate3d(var(--x), var(--y), var(--z)) rotateX(-32deg);
  }
  50% {
    transform: translate3d(var(--x), var(--y), var(--z)) rotateX(32deg);
  }
}

@keyframes cat-wag {
  from {
    transform: translate3d(var(--x), var(--y), var(--z)) rotateY(-16deg);
  }
  to {
    transform: translate3d(var(--x), var(--y), var(--z)) rotateY(16deg);
  }
}

@keyframes cat-tilt {
  0%,
  100% {
    transform: translate3d(var(--x), var(--y), var(--z)) rotateZ(0deg);
  }
  35% {
    transform: translate3d(var(--x), var(--y), var(--z)) rotateZ(5deg);
  }
  65% {
    transform: translate3d(var(--x), var(--y), var(--z)) rotateZ(-4deg);
  }
}

@keyframes eye-blink {
  0%,
  94%,
  100% {
    transform: translate3d(var(--x), var(--y), var(--z)) scaleY(1);
  }
  97% {
    transform: translate3d(var(--x), var(--y), var(--z)) scaleY(0.1);
  }
}

/* ---------- Balões de fala ---------- */

.mascot-bubble {
  --bubble-bg: #fff;
  --tail: 24px;

  position: absolute;
  bottom: calc(100% + 12px);
  left: 0;
  width: max-content;
  max-width: min(240px, calc(100vw - 24px));
  padding: 10px 14px;
  border-radius: 14px;
  background-color: var(--bubble-bg);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
  color: var(--dark);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.35;
  opacity: 0;
  transform: translateY(6px) scale(0.85);
  transform-origin: var(--tail) 100%;
  transition:
    opacity 0.2s ease,
    transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.mascot-bubble.is-visible {
  opacity: 1;
  transform: none;
}

.mascot-bubble::after {
  content: "";
  position: absolute;
  top: 100%;
  left: calc(var(--tail) - 8px);
  border-top: 10px solid var(--bubble-bg);
  border-right: 8px solid transparent;
  border-left: 8px solid transparent;
}

.mascot--bot .mascot-bubble {
  --bubble-bg: var(--yellow);
}

@media (min-width: 1100px) {
  .mascots {
    --u-dev: 6.5px;
    --u-bot: 6px;
  }
}

/* No celular os personagens não aparecem (o mascots.js nem chega a criá-los) */
@media (max-width: 768px) {
  .mascots {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mascot-sprite,
  .mascot.is-walking .mascot-sprite,
  .mascot.is-talking .mascot-sprite,
  .mascot.is-walking .limb--a,
  .mascot.is-walking .limb--b,
  .cat-tail,
  .cat-head,
  .eye3d {
    animation: none;
  }

  .model {
    transition: none;
  }

  .mascot-bubble {
    transform: none;
    transition: opacity 0.2s ease;
  }
}