Trash Zone

<!-- Trash Zone — toggle .is-over while a draggable hovers it -->
<div class="nuda-trash">
  <svg class="nuda-trash__icon" viewBox="0 0 24 24" fill="none"
       stroke="currentColor" stroke-width="2"
       stroke-linecap="round" stroke-linejoin="round">
    <path class="nuda-trash__lid" d="M3 6 L21 6" />
    <path d="M19 6 L18 20 A 2 2 0 0 1 16 22 L8 22 A 2 2 0 0 1 6 20 L5 6" />
    <path d="M9 6 L9 4 A 1 1 0 0 1 10 3 L14 3 A 1 1 0 0 1 15 4 L15 6" />
    <path d="M10 11 L10 17" opacity="0.5" />
    <path d="M14 11 L14 17" opacity="0.5" />
  </svg>
  <span class="nuda-trash__label">Drop to delete</span>
</div>

/* Trash Zone
   Dashed area that turns red and shakes once when an item is dragged over.
   Customize: --trash-danger */

.nuda-trash {
  --trash-danger: #ff6363;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  max-width: 240px;
  height: 120px;
  border: 1.5px dashed rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.02);
  transition: all 0.25s;
}

.nuda-trash.is-over {
  border-color: var(--trash-danger);
  border-style: solid;
  background: rgba(255, 99, 99, 0.08);
  animation: nuda-trash-shake 0.4s cubic-bezier(0.36, 0.07, 0.19, 0.97);
}

.nuda-trash__icon {
  width: 32px;
  height: 32px;
  color: #a1a1aa;
  transition: color 0.25s;
}

.nuda-trash.is-over .nuda-trash__icon { color: var(--trash-danger); }

.nuda-trash.is-over .nuda-trash__lid {
  transform-origin: left center;
  animation: nuda-trash-lid 0.5s ease-in-out infinite alternate;
}

.nuda-trash__label {
  font: 600 0.75rem ui-sans-serif, system-ui, sans-serif;
  color: #a1a1aa;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  transition: color 0.25s;
}

.nuda-trash.is-over .nuda-trash__label { color: var(--trash-danger); }

@keyframes nuda-trash-shake {
  10%, 90%      { transform: translateX(-1px); }
  30%, 50%, 70% { transform: translateX(-3px); }
  40%, 60%      { transform: translateX(3px); }
}

@keyframes nuda-trash-lid {
  from { transform: rotate(-8deg); }
  to   { transform: rotate(8deg); }
}

@media (prefers-reduced-motion: reduce) {
  .nuda-trash.is-over,
  .nuda-trash.is-over .nuda-trash__lid { animation: none; }
}