Empty Folder

<!-- Empty Folder -->
<div class="nuda-empty-folder" role="status" aria-label="Folder is empty">
  <div class="nuda-empty-folder__scene">
    <svg class="nuda-empty-folder__svg" viewBox="0 0 64 56"
         fill="none" stroke="currentColor" stroke-width="2"
         stroke-linecap="round" stroke-linejoin="round">
      <path class="nuda-empty-folder__back"
            d="M6 16 L6 48 Q6 50 8 50 L56 50 Q58 50 58 48 L58 22 Q58 20 56 20 L30 20 L24 14 L8 14 Q6 14 6 16 Z" />
      <path class="nuda-empty-folder__front"
            d="M6 26 L58 26 L54 48 Q53.6 50 51.6 50 L12.4 50 Q10.4 50 10 48 Z" />
    </svg>
    <span class="nuda-empty-folder__shine"></span>
  </div>
  <p class="nuda-empty-folder__text">Folder is empty</p>
</div>

/* Empty Folder
   Folder with the front flap lifting and a subtle shimmer sweep.
   Customize: --empty-folder-color, --empty-folder-text, --empty-folder-size */

.nuda-empty-folder {
  --empty-folder-color: #e4ff54;
  --empty-folder-text: rgba(255, 255, 255, 0.55);
  --empty-folder-size: 80px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 12px;
  color: var(--empty-folder-color);
}

.nuda-empty-folder__scene {
  position: relative;
  width: var(--empty-folder-size);
  height: calc(var(--empty-folder-size) * 0.875);
  overflow: hidden;
  animation: nuda-empty-folder-bob 3.6s ease-in-out infinite;
}

.nuda-empty-folder__svg {
  width: 100%;
  height: 100%;
  color: currentColor;
  filter: drop-shadow(0 0 6px rgba(228, 255, 84, 0.12));
}

.nuda-empty-folder__back  { opacity: 0.55; }

.nuda-empty-folder__front {
  transform-origin: 32px 26px;
  animation: nuda-empty-folder-flap 3.6s ease-in-out infinite;
}

.nuda-empty-folder__shine {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    115deg,
    transparent 30%,
    rgba(228, 255, 84, 0.18) 50%,
    transparent 70%
  );
  transform: translateX(-100%);
  animation: nuda-empty-folder-shine 3.6s ease-in-out infinite;
  mix-blend-mode: screen;
  pointer-events: none;
}

.nuda-empty-folder__text {
  font: 500 12px ui-sans-serif, system-ui, sans-serif;
  color: var(--empty-folder-text);
  letter-spacing: 0.02em;
  margin: 0;
}

@keyframes nuda-empty-folder-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-3px); }
}

@keyframes nuda-empty-folder-flap {
  0%, 100% { transform: rotateX(0deg); }
  50%      { transform: rotateX(-12deg); }
}

@keyframes nuda-empty-folder-shine {
  0%, 30% { transform: translateX(-100%); }
  60%     { transform: translateX(100%); }
  100%    { transform: translateX(100%); }
}

@media (prefers-reduced-motion: reduce) {
  .nuda-empty-folder__scene,
  .nuda-empty-folder__front,
  .nuda-empty-folder__shine {
    animation: none;
  }
}