/* Define a animação de tremor */
@keyframes tremer {
    0% { transform: translate(1px, 1px) rotate(0deg); }
    10% { transform: translate(-1px, -2px) rotate(-1deg); }
    20% { transform: translate(-3px, 0px) rotate(1deg); }
    30% { transform: translate(3px, 2px) rotate(0deg); }
    40% { transform: translate(1px, -1px) rotate(1deg); }
    50% { transform: translate(-1px, 2px) rotate(-1deg); }
    60% { transform: translate(-3px, 1px) rotate(0deg); }
    70% { transform: translate(3px, 1px) rotate(-1deg); }
    80% { transform: translate(-1px, -1px) rotate(1deg); }
    90% { transform: translate(1px, 2px) rotate(0deg); }
    100% { transform: translate(1px, -2px) rotate(-1deg); }
  }
  
  /* Aplica a animação à classe .tremendo */
  .tremendo {
    /* Garante que transformações funcionem corretamente (especialmente em inline elements) */
    display: inline-block; /* ou block, dependendo do seu layout */
  
    /* Aplica a animação */
    /* Nome da animação: tremer */
    /* Duração: 0.5 segundos (ajuste para mais rápido/lento) */
    /* Função de tempo: linear (movimento constante entre keyframes) */
    /* Contagem de iteração: infinite (repetir para sempre) */
    animation: tremer 0.5s linear infinite;
}

@keyframes tremer-lento-maior {
    0% { transform: translate(3px, 2px) rotate(0deg); }
    10% { transform: translate(-4px, -5px) rotate(-2deg); }
    20% { transform: translate(-6px, 1px) rotate(3deg); }
    30% { transform: translate(5px, 4px) rotate(0deg); }
    40% { transform: translate(3px, -3px) rotate(2.5deg); }
    50% { transform: translate(-4px, 5px) rotate(-2deg); }
    60% { transform: translate(-7px, 2px) rotate(0deg); }
    70% { transform: translate(6px, 3px) rotate(-3deg); }
    80% { transform: translate(-2px, -3px) rotate(2deg); }
    90% { transform: translate(4px, 5px) rotate(0deg); }
    100% { transform: translate(3px, -6px) rotate(-2.5deg); }
  }
  
  /* Aplica a NOVA animação à classe .tremendo2 */
  .tremendo2 {
    /* Garante que transformações funcionem corretamente */
    display: inline-block; /* ou block, dependendo do seu layout */
  
    /* Aplica a nova animação */
    /* Nome da animação: tremer-lento-maior */
    /* Duração: 1.8 segundos (bem mais lento que 0.5s) */
    /* Função de tempo: linear */
    /* Contagem de iteração: infinite */
    animation: tremer-lento-maior 1.8s linear infinite;

}

@keyframes stopmotion {
    /* Definimos várias posições discretas (frames) */
    0% { transform: translate(0px, 0px) rotate(0deg); }
    15% { transform: translate(4px, -2px) rotate(1deg); } /* Frame 1 */
    30% { transform: translate(-3px, 3px) rotate(-1deg); } /* Frame 2 */
    45% { transform: translate(5px, 1px) rotate(0deg); }  /* Frame 3 */
    60% { transform: translate(-1px, -4px) rotate(2deg); } /* Frame 4 */
    75% { transform: translate(2px, 5px) rotate(-2deg); } /* Frame 5 */
    90% { transform: translate(-4px, -1px) rotate(1deg); } /* Frame 6 */
    100% { transform: translate(0px, 0px) rotate(0deg); } /* Volta ao início (Frame 0)*/
  }
  
  /* Aplica a NOVA animação à classe .stopmotion */
  .stopmotion {
    /* Garante que transformações funcionem corretamente */
    display: inline-block; /* ou block */
  
    /* Aplica a nova animação */
    /* Nome da animação: stopmotion */
    /* Duração: 4 segundos (bem lento para o ciclo completo) */
    /* Função de tempo: steps(1, end) - ESSENCIAL para o stop motion */
    /*      steps(1, end) faz com que a transição entre cada keyframe
             seja um SALTO INSTANTÂNEO no final do intervalo de tempo
             daquele keyframe, em vez de uma transição suave. */
    /* Contagem de iteração: infinite */
    animation: stopmotion 1.5s steps(1, end) infinite;
}