Drop Zone Active

<div class="nuda-dropzone-active" role="button" tabindex="0"
     aria-label="Release to upload">
  <svg class="nuda-dropzone-active__icon" viewBox="0 0 24 24" fill="none"
       stroke="currentColor" stroke-width="1.5" aria-hidden="true">
    <path d="M12 16V4M12 4l-4 4M12 4l4 4"
          stroke-linecap="round" stroke-linejoin="round" />
    <path d="M4 16v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-2"
          stroke-linecap="round" />
  </svg>
  <p class="nuda-dropzone-active__title">Release to upload</p>
  <p class="nuda-dropzone-active__hint">Files ready</p>
</div>

/* Drop Zone Active
   Glowing solid-border state when files are hovered over it.
   Apply this class when a dragover event fires. */

.nuda-dropzone-active {
  --accent: #e4ff54;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 2rem 1.5rem;
  background: rgba(228, 255, 84, 0.06);
  border: 1.5px solid var(--accent);
  border-radius: 12px;
  color: #fafafa;
  min-width: 280px;
  box-shadow:
    0 0 0 4px rgba(228, 255, 84, 0.12),
    0 0 24px rgba(228, 255, 84, 0.2);
  animation: nuda-dz-pulse 1.6s ease-in-out infinite;
}

.nuda-dropzone-active__icon {
  width: 32px;
  height: 32px;
  color: var(--accent);
  animation: nuda-dz-bounce 1s ease-in-out infinite;
}

.nuda-dropzone-active__title {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 600;
}

.nuda-dropzone-active__hint {
  margin: 0;
  font-size: 0.8rem;
  color: var(--accent);
}

@keyframes nuda-dz-pulse {
  0%, 100% {
    box-shadow:
      0 0 0 4px rgba(228, 255, 84, 0.12),
      0 0 24px rgba(228, 255, 84, 0.2);
  }
  50% {
    box-shadow:
      0 0 0 6px rgba(228, 255, 84, 0.2),
      0 0 32px rgba(228, 255, 84, 0.35);
  }
}

@keyframes nuda-dz-bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}

@media (prefers-reduced-motion: reduce) {
  .nuda-dropzone-active,
  .nuda-dropzone-active__icon {
    animation: none;
  }
}