Comment Loading Skeleton

<div class="nuda-comment-skel" role="status" aria-label="Loading comment">
  <div class="nuda-comment-skel__avatar"></div>
  <div class="nuda-comment-skel__body">
    <div class="nuda-comment-skel__line nuda-comment-skel__line--head"></div>
    <div class="nuda-comment-skel__line nuda-comment-skel__line--w90"></div>
    <div class="nuda-comment-skel__line nuda-comment-skel__line--w70"></div>
    <div class="nuda-comment-skel__line nuda-comment-skel__line--w50"></div>
  </div>
</div>

/* Comment Loading Skeleton
   Avatar + four lines with a shimmer sweep.
   Customize: shimmer tint by editing the gradient color. */

.nuda-comment-skel {
  display: flex;
  gap: 12px;
  padding: 14px;
  background: #0c0c10;
  border: 1px solid #1c1c22;
  border-radius: 12px;
  max-width: 420px;
}

.nuda-comment-skel__avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  flex-shrink: 0;
  background: #1c1c22;
  position: relative;
  overflow: hidden;
}

.nuda-comment-skel__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 4px;
}

.nuda-comment-skel__line {
  height: 10px;
  border-radius: 5px;
  background: #1c1c22;
  position: relative;
  overflow: hidden;
}

.nuda-comment-skel__line--head { width: 35%; height: 8px; }
.nuda-comment-skel__line--w90  { width: 90%; }
.nuda-comment-skel__line--w70  { width: 70%; }
.nuda-comment-skel__line--w50  { width: 50%; }

.nuda-comment-skel__avatar::after,
.nuda-comment-skel__line::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(228, 255, 84, 0.08) 50%,
    transparent
  );
  transform: translateX(-100%);
  animation: nuda-cskel 1.6s ease-in-out infinite;
}

@keyframes nuda-cskel {
  to { transform: translateX(100%); }
}

@media (prefers-reduced-motion: reduce) {
  .nuda-comment-skel__avatar::after,
  .nuda-comment-skel__line::after {
    animation: none;
    opacity: 0.4;
    transform: none;
  }
}