document.addEventListener('DOMContentLoaded', function () {
  const title = document.querySelector('#title');
  const subtitle = document.querySelector('#subtitle');
  const blahaj = document.querySelector('#blahaj');

  function handleClick() {
    // Move elements up and fade them out
    title.animate(
      [
        { transform: 'translateY(0)', opacity: 1 },
        { transform: 'translateY(-50px)', opacity: 0 }
      ],
      { duration: 1000, easing: 'ease-out', fill: 'forwards' }
    );

    subtitle.animate(
      [
        { transform: 'translateY(0)', opacity: 1 },
        { transform: 'translateY(-50px)', opacity: 0 }
      ],
      { duration: 1000, easing: 'ease-out', fill: 'forwards', delay: 200 }
    );
    
    blahaj.animate(
      [
        { transform: 'translateY(-50px)', opacity: 0 },
        { transform: 'translateY(-0px)', opacity: 1 }
      ],
      { duration: 500, easing: 'ease-out', fill: 'forwards', delay: 400 }
    );

    // Remove the event listener after it has been triggered
    document.body.removeEventListener('click', handleClick);

    title.addEventListener('animationend', function () {
      title.remove();
    });

    subtitle.addEventListener('animationend', function () {
      subtitle.remove();
    });
  }
});