main{
    display:flex;
    flex-wrap: wrap;
    gap: 2rem;
    justify-content: space-around;
}

figure {
    display: flex;
    height: 230px;
    margin-top: auto;
    margin-bottom: 0;
}


/* animação quique bola*/
.quicando{
    animation-name: quicando;
    animation-duration: 1.2s;
    animation-iteration-count: infinite;
}

@keyframes quicando {
  /* topo */
  0% {
    transform: translateY(0) scale(1,1);
    animation-timing-function: cubic-bezier(.3,.8,.3,1);
  }

  /* aproximação rápida */
  38% {
    transform: translateY(55px) scale(1,1);
  }

  /* início do impacto (já deformando) */
  42% {
    transform: translateY(60px) scale(1.02,.96);
  }

  /* compressão progressiva */
  46% {
    transform: translateY(62px) scale(1.04,.92);
  }

  /* compressão máxima (ponto mais baixo) */
  50% {
    transform: translateY(64px) scale(1.055,.88);
  }

  /* recuperação inicial */
  56% {
    transform: translateY(58px) scale(1.02,.96);
  }

  /* saída do solo */
  62% {
    transform: translateY(50px) scale(1,1);
    animation-timing-function: cubic-bezier(.15,.7,.1,1);
  }

  /* retorno ao topo */
  100% {
    transform: translateY(0) scale(1,1);
  }
}


/* animação de desaceleração da bola */
.parando {
    animation-name: parando;
    animation-duration: 2.8s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}

@keyframes parando {

  /* topo inicial */
  0% {
    transform: translateY(0) scale(1,1);
    animation-timing-function: cubic-bezier(.3,.8,.3,1);
  }

  /* ===== 1º IMPACTO ===== */
  20% { transform: translateY(58px) scale(1,1); }

  23% { transform: translateY(62px) scale(1.02,.96); }
  26% { transform: translateY(64px) scale(1.05,.88); } /* compressão máx */
  32% { transform: translateY(56px) scale(1.02,.96); }

  /* topo 29px */
  40% { transform: translateY(31px) scale(1,1); }

  /* ===== 2º IMPACTO ===== */
  55% { transform: translateY(59px) scale(1,1); }

  58% { transform: translateY(62px) scale(1.018,.965); }
  61% { transform: translateY(63px) scale(1.035,.92); }
  66% { transform: translateY(57px) scale(1.015,.97); }

  /* topo 14px */
  72% { transform: translateY(46px) scale(1,1); }

  /* ===== MICRO QUIQUE FINAL ===== */
  82% { transform: translateY(59px) scale(1,1); }

  85% { transform: translateY(61px) scale(1.01,.98); }
  90% { transform: translateY(60px) scale(1,1); }

  /* parada definitiva */
  100% {
    transform: translateY(60px) scale(1,1);
  }
}


/* bola parada*/
.parada {
    transform: translateY(60px) scale(1, 1);
}


/* animação de pegar a bola do chão */
.iniciando {
    animation-name: iniciando;
    animation-duration: 1.2s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}

@keyframes iniciando {

  /* começa no chão */
  0% {
    transform: translateY(60px) scale(1,1);
    animation-timing-function: cubic-bezier(.6,0,.4,1);
  }

  /* topo */
  100% {
    transform: translateY(0px) scale(1,1);
  }
}