/* Travessuras da pagina Animais (travessuras.js): lambida de cachorro e patada de gato.
   Tudo em cima de .vem-tela, que nao recebe clique. */

.lingua-lambe {
  position: absolute;
  left: var(--x, 50%);
  bottom: -2%;
  width: min(62vw, 340px);
  margin-left: calc(min(62vw, 340px) / -2);
  transform: translateY(100%);
  transform-origin: 50% 100%;
  filter: drop-shadow(0 10px 22px rgba(120, 30, 70, 0.3));
}
.lingua-lambe svg { display: block; width: 100%; height: auto; }

.rastro-lambida {
  position: absolute;
  left: var(--x, 50%);
  bottom: 0;
  width: min(56vw, 320px);
  height: min(70vh, 560px);
  margin-left: calc(min(56vw, 320px) / -2);
  border-radius: 48% 48% 12% 12% / 26% 26% 4% 4%;
  background: linear-gradient(180deg, rgba(205, 232, 255, 0.62), rgba(205, 232, 255, 0.34) 55%, rgba(205, 232, 255, 0.12));
  box-shadow: inset 0 0 26px rgba(255, 255, 255, 0.65);
  opacity: 0;
  transform: rotate(var(--giro, 0deg));
  transform-origin: 50% 100%;
}
.rastro-lambida.is-visivel { animation: rastroSome 2.6s ease-in forwards; }
@keyframes rastroSome {
  0%, 45% { opacity: 1; }
  100% { opacity: 0; }
}

.gota-baba {
  position: absolute;
  width: 9px;
  height: 13px;
  border-radius: 50% 50% 50% 50% / 62% 62% 40% 40%;
  background: rgba(190, 225, 255, 0.92);
  box-shadow: inset -1px -1px 2px rgba(90, 150, 210, 0.55);
  animation: gotaCai 1.5s ease-in backwards;
}
@keyframes gotaCai {
  from { opacity: 1; transform: translateY(0); }
  to { opacity: 0; transform: translateY(170px); }
}

.travessura-fala {
  position: absolute;
  padding: 7px 14px;
  border-radius: 14px;
  background: #fff;
  color: #2a2430;
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 800;
  white-space: nowrap;
  box-shadow: 0 8px 22px rgba(20, 10, 50, 0.26);
  transform: translateX(-50%);
  animation: balaoSurge 0.3s var(--mola);
}

.pata-do-gato {
  position: absolute;
  left: var(--x, 50%);
  top: -4%;
  width: min(44vw, 230px);
  margin-left: calc(min(44vw, 230px) / -2);
  transform: translateY(-105%);
  transform-origin: 50% 0;
  filter: drop-shadow(0 12px 22px rgba(20, 10, 50, 0.32));
}
.pata-do-gato svg { display: block; width: 100%; height: auto; }

.marca-pata {
  position: absolute;
  left: var(--x, 50%);
  width: min(17vw, 84px);
  height: min(17vw, 84px);
  background: rgba(90, 95, 120, 0.42);
  -webkit-mask: var(--pata) center / contain no-repeat;
  mask: var(--pata) center / contain no-repeat;
  transform: translateX(-50%) rotate(var(--giro, 0deg));
  animation: marcaSome 2.5s ease-out forwards;
}
@keyframes marcaSome {
  0%, 60% { opacity: 1; }
  100% { opacity: 0; }
}

.risco-gato {
  position: absolute;
  left: var(--x, 50%);
  top: 34%;
  width: 7px;
  height: min(32vh, 240px);
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.25));
  box-shadow: 0 0 0 1px rgba(90, 95, 120, 0.3);
  transform: rotate(var(--giro, 0deg)) scaleY(0);
  transform-origin: 50% 0;
  animation: riscoDesenha 2.2s ease-out forwards;
}
@keyframes riscoDesenha {
  0% { opacity: 1; transform: rotate(var(--giro, 0deg)) scaleY(0); }
  14% { opacity: 1; transform: rotate(var(--giro, 0deg)) scaleY(1); }
  62% { opacity: 1; transform: rotate(var(--giro, 0deg)) scaleY(1); }
  100% { opacity: 0; transform: rotate(var(--giro, 0deg)) scaleY(1); }
}