html, body{
    margin: 0;
}

header {
    display: flex;
    justify-content: center; /* horizontal */
    align-items: center;     /* vertical */
}


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

section {
    flex-basis: 100px;
    align-self: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

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

h4{
    margin-top: 0;
}

img {
    width: 200px;
    height:200px;
}

/* 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);
  }
}