<div class="ctc-life">
  <button type="button" class="ctc-life-run">▶ Run demo</button>
  <span class="ctc-life-chip" data-ctc-life data-state="idle">
    <span class="ctc-life-icon" aria-hidden="true"></span>
    <span class="ctc-life-text">React</span>
  </span>
</div>

.ctc-life {
  display: flex;
  align-items: center;
  gap: 14px;
}

.ctc-life-run {
  padding: 6px 12px;
  background: rgba(124, 108, 255, 0.14);
  color: #c4b5fd;
  border: 1px solid rgba(124, 108, 255, 0.35);
  border-radius: 6px;
  font:
    600 11px/1 ui-monospace,
    monospace;
  cursor: pointer;
  transition:
    background 0.15s,
    border-color 0.15s,
    color 0.15s;
}

.ctc-life-run:hover {
  background: rgba(124, 108, 255, 0.26);
  color: #fff;
}

.ctc-life-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px 7px 10px;
  background: #1f1f2e;
  color: #f0eeff;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  font:
    600 12px/1 system-ui,
    sans-serif;
  transition:
    opacity 0.4s ease,
    transform 0.4s ease,
    background 0.3s ease,
    border-color 0.3s ease;
}

.ctc-life-icon {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  flex-shrink: 0;
}

.ctc-life-chip[data-state="adding"] {
  background: rgba(124, 108, 255, 0.18);
  border-color: rgba(124, 108, 255, 0.4);
  color: #c4b5fd;
  transform: translateX(-12px);
  opacity: 0;
  animation: ctc-life-slide-in 0.45s ease forwards;
}

.ctc-life-chip[data-state="adding"] .ctc-life-icon {
  border: 2px solid rgba(124, 108, 255, 0.3);
  border-top-color: #7c6cff;
  background: transparent;
  animation: ctc-life-spin 0.7s linear infinite;
}

.ctc-life-chip[data-state="active"] {
  background: rgba(46, 204, 138, 0.14);
  border-color: rgba(46, 204, 138, 0.4);
  color: #2ecc8a;
}

.ctc-life-chip[data-state="active"] .ctc-life-icon {
  background: #2ecc8a;
  color: #0a0f0c;
  font-weight: 900;
}

.ctc-life-chip[data-state="active"] .ctc-life-icon::before {
  content: "✓";
}

.ctc-life-chip[data-state="removing"] {
  background: rgba(255, 61, 110, 0.1);
  border-color: rgba(255, 61, 110, 0.35);
  color: rgba(255, 108, 138, 0.7);
  text-decoration: line-through;
  opacity: 0;
  transform: scale(0.85);
}

@media (prefers-reduced-motion: reduce) {
  .ctc-slide:hover,
  .ctc-aurora,
  .ctc-status-dot::after,
  .ctc-marquee:hover .ctc-marquee-track,
  .ctc-marquee:focus-visible .ctc-marquee-track,
  .ctc-life-chip[data-state="adding"],
  .ctc-life-chip[data-state="adding"] .ctc-life-icon {
    animation: none !important;
  }
  .ctc-life-chip[data-state="adding"] {
    transform: none;
    opacity: 1;
  }
}

@keyframes ctc-life-slide-in { to { transform: translateX(0); opacity: 1; } }

@keyframes ctc-life-spin { to { transform: rotate(360deg); } }

(function () {
  document.querySelectorAll(".ctc-life").forEach(function (root) {
    var btn = root.querySelector(".ctc-life-run");
    var chip = root.querySelector("[data-ctc-life]");
    if (!btn || !chip) return;
    var running = false;
    btn.addEventListener("click", function () {
      if (running) return;
      running = true;
      chip.setAttribute("data-state", "adding");
      setTimeout(function () {
        chip.setAttribute("data-state", "active");
      }, 1100);
      setTimeout(function () {
        chip.setAttribute("data-state", "removing");
      }, 2400);
      setTimeout(function () {
        chip.setAttribute("data-state", "idle");
        running = false;
      }, 3200);
    });
  });
})();