Profile Skeleton

<!-- Profile Skeleton -->
<div class="nuda-profile-skeleton" role="status" aria-label="Loading profile" aria-busy="true">
  <div class="nuda-profile-skeleton__photo"></div>
  <div class="nuda-profile-skeleton__info">
    <div class="nuda-profile-skeleton__shim nuda-profile-skeleton__shim--name"></div>
    <div class="nuda-profile-skeleton__shim nuda-profile-skeleton__shim--role"></div>
  </div>
  <div class="nuda-profile-skeleton__bio">
    <div class="nuda-profile-skeleton__shim" style="width: 100%"></div>
    <div class="nuda-profile-skeleton__shim" style="width: 90%"></div>
    <div class="nuda-profile-skeleton__shim" style="width: 75%"></div>
  </div>
</div>

/* Profile Skeleton
   Profile page placeholder with photo, name, role, and bio lines.
   Customize: --prof-skel-base, --prof-skel-highlight, --prof-skel-bg */

.nuda-profile-skeleton {
  --prof-skel-base: rgba(255, 255, 255, 0.06);
  --prof-skel-highlight: rgba(255, 255, 255, 0.12);
  --prof-skel-bg: rgba(255, 255, 255, 0.04);
  width: 100%;
  max-width: 280px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 16px;
  background: var(--prof-skel-bg);
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.nuda-profile-skeleton__photo {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(
    90deg,
    var(--prof-skel-base) 25%,
    var(--prof-skel-highlight) 50%,
    var(--prof-skel-base) 75%
  );
  background-size: 200% 100%;
  animation: nuda-profile-shimmer 1.5s ease-in-out infinite;
}

.nuda-profile-skeleton__info {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 100%;
}

.nuda-profile-skeleton__bio {
  display: flex;
  flex-direction: column;
  gap: 5px;
  width: 100%;
}

.nuda-profile-skeleton__shim {
  height: 8px;
  border-radius: 4px;
  background: linear-gradient(
    90deg,
    var(--prof-skel-base) 25%,
    var(--prof-skel-highlight) 50%,
    var(--prof-skel-base) 75%
  );
  background-size: 200% 100%;
  animation: nuda-profile-shimmer 1.5s ease-in-out infinite;
}

.nuda-profile-skeleton__shim--name {
  width: 50%;
  height: 10px;
}

.nuda-profile-skeleton__shim--role {
  width: 35%;
  height: 7px;
}

@keyframes nuda-profile-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .nuda-profile-skeleton__photo,
  .nuda-profile-skeleton__shim {
    animation: none;
    background: var(--prof-skel-base);
  }
}