console.log( 'Code is Poetry' );

<script>
  document.addEventListener("DOMContentLoaded", function () {
    const blocos = document.querySelectorAll('.blocos > div');
    const imagens = document.querySelectorAll('.imgs > div');
    const tempo = 10000;
    let index = 0;
    let intervalo;

    function ativar(i) {
      blocos.forEach(b => {
        b.classList.remove('ativo');
        b.style.removeProperty('animation'); // força reset
      });
      imagens.forEach(img => img.classList.remove('ativo'));

      blocos[i].classList.add('ativo');
      imagens[i].classList.add('ativo');
    }

    function proximo() {
      index = (index + 1) % blocos.length;
      ativar(index);
    }

    function resetIntervalo() {
      clearInterval(intervalo);
      intervalo = setInterval(() => {
        proximo();
        ativar(index);
      }, tempo);
    }

    blocos.forEach((bloco, i) => {
      bloco.addEventListener('click', () => {
        index = i;
        ativar(index);
        resetIntervalo();
      });
    });

    ativar(index);
    intervalo = setInterval(() => {
      proximo();
      ativar(index);
    }, tempo);
  });
</script>