<div id="blur-text" style="font-size: 24px; font-weight: bold; color: white;"></div>

<button id="replay-btn" style="
  margin-top: 1rem;
  padding: 8px 16px;
  font-size: 16px;
  cursor: pointer;
  background-color: transparent;
  color: white;
  border: 1px solid white;
  border-radius: 5px;
  transition: background-color 0.3s ease, color 0.3s ease;
">
  Relancer l'animation
</button>

<style>
  #blur-text span {
    display: inline-block;
    opacity: 0;
    transform: translateY(20px);
    filter: blur(8px);
    animation: blurIn 0.8s forwards;
    animation-play-state: paused;
    margin-right: 6px;
  }

  @keyframes blurIn {
    0% {
      opacity: 0;
      transform: translateY(20px);
      filter: blur(8px);
    }
    100% {
      opacity: 1;
      transform: translateY(0);
      filter: blur(0);
    }
  }

  #replay-btn:hover {
    background-color: rgba(255, 255, 255, 0.2);
    color: white;
  }
</style>

<script>
  document.addEventListener('DOMContentLoaded', () => {
    const textContent = "N'est-ce pas trop cool ?"; // change le texte ici
    const container = document.getElementById('blur-text');
    const replayBtn = document.getElementById('replay-btn');
    const delay = 200; // délai entre mots en ms

    function playAnimation() {
      container.innerHTML = '';
      const words = textContent.split(' ');

      words.forEach((word, index) => {
        const span = document.createElement('span');
        span.textContent = word;
        span.style.animationDelay = `${(index * delay) / 1000}s`;
        span.style.animationPlayState = 'running';
        span.style.animationName = 'blurIn';
        container.appendChild(span);
      });
    }

    // Lancement initial
    playAnimation();

    // Bouton pour relancer
    replayBtn.addEventListener('click', () => {
      playAnimation();
    });
  });
</script>