/* Drag and drop: o selo do sapo sai da base e é arrastado até o cume da montanha. */

.cenario {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

/* Abertura: as serras sobem em camadas, de trás para frente */
.serra {
  animation: erguer 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) backwards;
}

.serra-meio {
  animation-delay: 0.1s;
}

.serra-pico {
  animation-delay: 0.2s;
}

.serra-frente {
  animation-delay: 0.3s;
}

.serra-chao {
  animation-delay: 0.35s;
}

.lua {
  animation: surgir 0.6s ease-out 0.3s backwards;
}

.estrelas circle {
  animation: piscar 2.4s ease-in-out infinite;
}

.estrelas circle:nth-child(2n) {
  animation-delay: 0.8s;
}

.estrelas circle:nth-child(3n) {
  animation-delay: 1.6s;
}

/* Trilha: os pontos correm em direção ao cume */
.trilha {
  transition: opacity 0.3s ease;
  animation:
    surgir 0.5s ease-out 1.3s backwards,
    fluir 0.9s linear 1.8s infinite;
}

/* !important vence a animação de entrada, caso o toque venha antes dela terminar */
.trilha.sumiu,
.arraste.sumiu {
  opacity: 0 !important;
}

/* ---------- Alvo no cume ---------- */

.alvo {
  position: absolute;
  left: 172px;
  top: 49px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(111, 210, 119, 0.3), rgba(111, 210, 119, 0) 70%);
  box-shadow: 0 0 16px rgba(111, 210, 119, 0.45);
  z-index: 1;
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease;
  animation: surgir-logo 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) 0.9s backwards;
}

/* Anel tracejado girando devagar */
.alvo::before {
  content: "";
  position: absolute;
  inset: 0;
  border: 2px dashed var(--verde-claro);
  border-radius: 50%;
  animation: girar 10s linear infinite;
}

/* Onda que sai do anel, chamando o sapo */
.alvo::after {
  content: "";
  position: absolute;
  inset: -2px;
  border: 2px solid var(--verde-vivo);
  border-radius: 50%;
  opacity: 0;
  animation: pulsar 1.6s ease-out 1.4s infinite;
}

/* Sapo chegando perto: o anel acende */
.perto .alvo {
  transform: scale(1.12);
  box-shadow: 0 0 22px rgba(111, 210, 119, 0.85);
}

.perto .alvo::before {
  border-style: solid;
  border-color: var(--verde-vivo);
}

.conquista .alvo {
  animation: acertou 0.6s ease-out forwards;
}

/* ---------- Bandeira fincada na neve, ao lado do sapo ---------- */

.bandeira {
  position: absolute;
  left: 225px;
  top: 62px;
  width: 2px;
  height: 66px;
  border-radius: 1px;
  background: var(--branco);
  transform: scaleY(0);
  transform-origin: bottom;
  z-index: 2;
}

.bandeira::after {
  content: "";
  position: absolute;
  left: 2px;
  top: 0;
  width: 22px;
  height: 14px;
  background: var(--verde-vivo);
  clip-path: polygon(0 0, 100% 50%, 0 100%);
  transform-origin: 0 50%;
}

.conquista .bandeira {
  transform: scaleY(1);
  transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) 0.15s;
}

.conquista .bandeira::after {
  animation: tremular 0.35s ease-in-out 0.5s 4 alternate;
}

/* ---------- Marca, chamada e CTA ---------- */

.topo {
  position: absolute;
  left: 10px;
  top: 10px;
  z-index: 5;
  animation: surgir 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) 0.45s backwards;
}

.cta {
  position: absolute;
  right: 10px;
  top: 12px;
  padding: 8px 12px;
  font-size: 11px;
  z-index: 5;
  animation: surgir 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) 0.75s backwards;
}

.chamada {
  position: absolute;
  left: 12px;
  top: 52px;
  font-size: 17px;
  font-weight: 800;
  line-height: 1.1;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.4);
  z-index: 5;
  pointer-events: none;
  animation: surgir 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) 0.6s backwards;
}

/* ---------- Sapo arrastável ---------- */

/* O JS só mexe em --dx/--dy; a transição faz a volta e o encaixe */
.sapo {
  position: absolute;
  left: 20px;
  top: 176px;
  width: 48px;
  height: 48px;
  z-index: 6;
  cursor: grab;
  touch-action: none;
  transform: translate(var(--dx, 0px), var(--dy, 0px));
  transition: transform 0.55s cubic-bezier(0.25, 0.8, 0.3, 1);
}

/* Enquanto segura, segue o dedo sem atraso */
.sapo.segurando {
  cursor: grabbing;
  transition: none;
}

/* Encaixe no cume, passando um pouco do ponto e voltando */
.sapo.no-topo {
  cursor: default;
  transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sapo-corpo {
  width: 100%;
  height: 100%;
  transition: transform 0.2s ease;
  animation: flutuar 1.8s ease-in-out 1.6s infinite;
}

.segurando .sapo-corpo {
  transform: scale(1.12);
  animation: none;
}

.no-topo .sapo-corpo {
  animation: none;
}

/* Pulinho de comemoração depois do encaixe */
.conquista .sapo-corpo {
  animation: pulo 0.5s cubic-bezier(0.3, 0, 0.3, 1) 0.1s;
}

/* Selo com contorno branco para destacar do céu e da montanha */
.sapo img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  box-shadow:
    0 0 0 2px var(--branco),
    0 4px 8px rgba(0, 0, 0, 0.4);
  pointer-events: none;
  -webkit-user-drag: none;
  transition: box-shadow 0.2s ease;
  animation: surgir-logo 0.55s cubic-bezier(0.2, 0.8, 0.2, 1) 1s backwards;
}

.segurando img {
  box-shadow:
    0 0 0 2px var(--branco),
    0 12px 18px rgba(0, 0, 0, 0.5);
}

/* Confete: o JS cria os pedaços na hora do acerto */
/* Atrás do sapo e dos textos: os pedaços saem de trás do selo */
.confete {
  position: absolute;
  left: 200px;
  top: 77px;
  width: 0;
  height: 0;
  z-index: 4;
  pointer-events: none;
}

.confete span {
  position: absolute;
  left: -3px;
  top: -3px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  opacity: 0;
}

.confete span:nth-child(2n) {
  left: -2px;
  top: -4px;
  width: 4px;
  height: 9px;
  border-radius: 1px;
}

.conquista .confete span {
  animation: estourar 1s cubic-bezier(0.15, 0.7, 0.3, 1) var(--atraso, 0s) forwards;
}

/* ---------- Dica ---------- */

.arraste {
  position: absolute;
  left: 80px;
  top: 189px;
  z-index: 5;
  pointer-events: none;
  animation:
    surgir 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) 1.5s backwards,
    respirar 1.6s ease-in-out 2s infinite;
}

.arraste-seta {
  width: 12px;
  height: 12px;
  flex: none;
  animation: apontar 0.9s ease-in-out infinite alternate;
}

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

@keyframes erguer {
  from {
    transform: translateY(60px);
  }
}

@keyframes piscar {
  50% {
    opacity: 0.2;
  }
}

@keyframes fluir {
  to {
    stroke-dashoffset: -7.1;
  }
}

@keyframes girar {
  to {
    transform: rotate(360deg);
  }
}

@keyframes pulsar {
  from {
    opacity: 0.8;
    transform: scale(1);
  }
  to {
    opacity: 0;
    transform: scale(1.3);
  }
}

@keyframes acertou {
  to {
    opacity: 0;
    transform: scale(1.8);
  }
}

@keyframes flutuar {
  50% {
    transform: translateY(-6px);
  }
}

@keyframes pulo {
  40% {
    transform: translateY(-12px) scale(1.06);
  }
  70% {
    transform: translateY(0) scale(1.04, 0.94);
  }
}

@keyframes tremular {
  from {
    transform: scaleX(1) skewY(0deg);
  }
  to {
    transform: scaleX(0.85) skewY(6deg);
  }
}

@keyframes estourar {
  0% {
    opacity: 1;
    transform: translate(0, 0) rotate(0deg) scale(0.4);
  }
  60% {
    opacity: 1;
    transform: translate(var(--tx), var(--ty)) rotate(var(--giro)) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(var(--tx), calc(var(--ty) + 18px)) rotate(var(--giro)) scale(0.9);
  }
}

@keyframes apontar {
  from {
    transform: translate(-1.5px, 1.5px);
  }
  to {
    transform: translate(1.5px, -1.5px);
  }
}