<!-- TextTrail HTML -->
<div class="text-trail" data-text="Bienvenue"></div>
<div class="text-trail" data-text="PROMOTION " style="--start-color:#ff6b6b; --text-color:#4ecdc4; --bg-color:#1a1a2e;"></div>
<div class="text-trail" data-text="Animation" style="--start-color:#ff9a9e; --text-color:#fbc2eb;"></div>

<style>
  .text-trail {
    position: relative;
    display: inline-block;
    font-family: 'Figtree', sans-serif;
    font-weight: 900;
    font-size: 2rem;
    color: var(--text-color, #ffffff);
    background-color: var(--bg-color, #000000);
    padding: 1em;
    margin: 1em 0;
    overflow: hidden;
    border-radius: 10px;
  }

  .text-trail span {
    position: relative;
    display: inline-block;
    animation: trailAnimation 2s infinite;
    animation-delay: calc(var(--char-index) * 0.05s);
    color: var(--start-color, #00ffff);
  }

  @keyframes trailAnimation {
    0% { opacity: 0.2; transform: translateY(0px) scale(1); }
    50% { opacity: 1; transform: translateY(-2px) scale(1.1); }
    100% { opacity: 0.2; transform: translateY(0px) scale(1); }
  }
</style>

<script>
  document.querySelectorAll('.text-trail').forEach(container => {
    const text = container.getAttribute('data-text');
    container.innerHTML = '';
    Array.from(text).forEach((char, i) => {
      const span = document.createElement('span');
      span.textContent = char;
      span.style.setProperty('--char-index', i);
      container.appendChild(span);
    });
  });
</script>