Long-press Radial Menu

<div class="nuda-radial" role="menu" aria-label="Quick actions">
  <button type="button" class="nuda-radial__item" style="--angle:270deg" aria-label="Reply">…</button>
  <button type="button" class="nuda-radial__item" style="--angle:342deg" aria-label="Like">…</button>
  <button type="button" class="nuda-radial__item" style="--angle:54deg" aria-label="Star">…</button>
  <button type="button" class="nuda-radial__item" style="--angle:126deg" aria-label="Trash">…</button>
  <button type="button" class="nuda-radial__item" style="--angle:198deg" aria-label="Share">…</button>
  <div class="nuda-radial__center" aria-hidden="true"></div>
</div>

/* Long-press Radial Menu
   Ring of action buttons that emerge from a glowing center.
   Customize: --radial-accent, --radial-radius */

.nuda-radial {
  --radial-accent: #e4ff54;
  --radial-radius: 72px;
  position: relative;
  width: 200px;
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: system-ui;
}

.nuda-radial__center {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--radial-accent);
  box-shadow:
    0 0 0 10px rgba(228, 255, 84, 0.1),
    0 0 0 22px rgba(228, 255, 84, 0.05),
    0 0 24px rgba(228, 255, 84, 0.4);
  animation: nuda-radial-pulse 2s ease-in-out infinite;
}

.nuda-radial__item {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: #111114;
  color: #fafafa;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transform: translate(-50%, -50%)
    rotate(var(--angle))
    translateY(calc(-1 * var(--radial-radius)))
    rotate(calc(-1 * var(--angle)))
    scale(0.4);
  opacity: 0;
  animation: nuda-radial-pop 0.55s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: 0.05s;
}

.nuda-radial__item:hover { background: #1a1a20; }

@keyframes nuda-radial-pop {
  to {
    transform: translate(-50%, -50%)
      rotate(var(--angle))
      translateY(calc(-1 * var(--radial-radius)))
      rotate(calc(-1 * var(--angle)))
      scale(1);
    opacity: 1;
  }
}

@keyframes nuda-radial-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(0.92); }
}

@media (prefers-reduced-motion: reduce) {
  .nuda-radial__item,
  .nuda-radial__center { animation: none; }
  .nuda-radial__item { opacity: 1; }
}