Comment Thread

<article class="nuda-comment-thread">
  <div class="nuda-comment-thread__avatar" aria-hidden="true">JL</div>
  <div class="nuda-comment-thread__body">
    <header class="nuda-comment-thread__header">
      <span class="nuda-comment-thread__name">Jordan Lee</span>
      <span class="nuda-comment-thread__time">2h ago</span>
    </header>
    <p class="nuda-comment-thread__text">
      This animation library feels so polished. The motion curves are buttery smooth.
    </p>
  </div>
</article>

/* Comment Thread
   Avatar + body + meta time with subtle entrance.
   Customize: --c-bg, --c-border, --c-accent */

.nuda-comment-thread {
  --c-bg: #0c0c10;
  --c-border: #1c1c22;
  display: flex;
  gap: 12px;
  padding: 14px;
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-radius: 12px;
  max-width: 420px;
  animation: nuda-ct-fade 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.nuda-comment-thread__avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, #9d6dff, #62b6ff);
  color: #fafafa;
  font-size: 13px;
  font-weight: 600;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.nuda-comment-thread__body { flex: 1; min-width: 0; }

.nuda-comment-thread__header {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 4px;
}

.nuda-comment-thread__name {
  color: #fafafa;
  font-size: 13px;
  font-weight: 600;
}

.nuda-comment-thread__time {
  color: #63636e;
  font-size: 11px;
}

.nuda-comment-thread__text {
  color: #a0a0a8;
  font-size: 13px;
  line-height: 1.5;
  margin: 0;
}

@keyframes nuda-ct-fade {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .nuda-comment-thread { animation: none; }
}