Volume Slider

<!-- Volume Slider — slider expands on hover; muted state by toggling --vol -->
<div class="nuda-vol">
  <button class="nuda-vol__icon" type="button" aria-label="Volume">
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor"
         stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
      <path d="M11 5 L6 9 L2 9 L2 15 L6 15 L11 19 L11 5 Z" fill="currentColor" />
      <path d="M15 9 A 4 4 0 0 1 15 15" />
      <path d="M18 6 A 8 8 0 0 1 18 18" />
    </svg>
  </button>
  <div class="nuda-vol__bar">
    <span class="nuda-vol__fill" style="width: 65%"></span>
  </div>
</div>

/* Volume Slider
   Icon-only by default; bar slides out on hover and fills.
   Customize: --vol-accent, the expanded width. */

.nuda-vol {
  --vol-accent: #e4ff54;
  --vol-expanded: 80px;
  display: inline-flex;
  align-items: center;
  gap: 0;
  background: rgba(0, 0, 0, 0.4);
  padding: 6px 8px;
  border-radius: 8px;
  overflow: hidden;
}

.nuda-vol__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  background: transparent;
  border: none;
  color: #fafafa;
  cursor: pointer;
  transition: color 0.2s;
}

.nuda-vol__icon:hover { color: var(--vol-accent); }

.nuda-vol__icon svg { width: 16px; height: 16px; }

.nuda-vol__bar {
  width: 0;
  height: 3px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 2px;
  overflow: hidden;
  opacity: 0;
  transition:
    width 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    margin-left 0.3s,
    opacity 0.25s;
}

.nuda-vol:hover .nuda-vol__bar,
.nuda-vol__icon:focus ~ .nuda-vol__bar {
  width: var(--vol-expanded);
  margin-left: 8px;
  opacity: 1;
}

.nuda-vol__fill {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--vol-accent), rgba(228, 255, 84, 0.6));
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) 0.1s;
}

.nuda-vol:hover .nuda-vol__fill { transform: scaleX(1); }