<!-- Police Unbounded -->
<link href="https://fonts.googleapis.com/css2?family=Unbounded:wght@400;600;800&display=swap" rel="stylesheet">

<div class="text-switch-wrapper">
  <span class="static-text">Wreizh maîtrise</span>
  <span class="text-box" id="textBox">
    <span class="animated-word" id="animatedWord"> Votre futur site</span>
  </span>
</div>

<style>
  body {
    background-color: #000;
    padding: rem;
  }

  .text-switch-wrapper {
    font-family: 'Unbounded', sans-serif;
    font-size: 2rem;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: white;
    font-weight: 800;
  }

  .text-box {
    background-color: #1e3a8a; /* Bleu spatial */
    border-radius: 0.5rem;
    padding: 0.3em 0.8em;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    white-space: nowrap;
    font-weight: 800;
    position: relative;
    height: 2.5em;
    transition: width 0.4s ease;
    color: white;
  }

  .animated-word {
    position: absolute;
    animation: slideUpIn 0.4s ease forwards;
    font-weight: 800;
  }

  .slide-out {
    animation: slideUpOut 0.4s ease forwards;
    font-weight: 800;
  }

  @keyframes slideUpIn {
    from {
      transform: translateY(100%);
      opacity: 0;
    }
    to {
      transform: translateY(0%);
      opacity: 1;
    }
  }

  @keyframes slideUpOut {
    from {
      transform: translateY(0%);
      opacity: 1;
    }
    to {
      transform: translateY(-100%);
      opacity: 0;
    }
  }
</style>

<script>
  const words = ["WordPress", "Le temps", "Le monde", "l'eau et le feu", "La physique quantique"];
  let index = 0;

  const textBox = document.getElementById("textBox");
  let currentWordEl = document.getElementById("animatedWord");

  function updateWord() {
    const oldWord = currentWordEl;

    index = (index + 1) % words.length;
    const nextWord = words[index];

    const newWord = document.createElement("span");
    newWord.className = "animated-word";
    newWord.textContent = nextWord;

    const tempSpan = document.createElement("span");
    tempSpan.style.visibility = "hidden";
    tempSpan.style.position = "absolute";
    tempSpan.style.fontWeight = "800";
    tempSpan.style.fontSize = "2rem";
    tempSpan.style.fontFamily = "'Unbounded', sans-serif";
    tempSpan.innerText = nextWord;
    document.body.appendChild(tempSpan);
    const newWidth = tempSpan.offsetWidth + 32;
    document.body.removeChild(tempSpan);

    textBox.style.width = newWidth + "px";
    oldWord.classList.add("slide-out");
    textBox.appendChild(newWord);
    currentWordEl = newWord;

    setTimeout(() => {
      oldWord.remove();
    }, 400);
  }

  window.onload = () => {
    const initWidth = currentWordEl.offsetWidth + 32;
    textBox.style.width = initWidth + "px";
  };

  setInterval(updateWord, 2500);
</script>