<div class="cbgp-disc" role="group" aria-label="Tier picker">
  <button type="button" class="cbgp-disc-1">Free</button>
  <button type="button" class="cbgp-disc-2">Pro</button>
  <button type="button" class="cbgp-disc-3">Suite</button>
</div>

@property --cbgp-disc-a { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
.cbgp-disc {
  position: relative;
  width: 160px; height: 72px;
  perspective: 800px;
  transform-style: preserve-3d;
  --cbgp-disc-a: 0deg;
  animation: cbgp-disc-spin 12s linear infinite;
}
@keyframes cbgp-disc-spin { to { --cbgp-disc-a: 360deg; } }
.cbgp-disc:hover { animation-play-state: paused; }
.cbgp-disc button {
  position: absolute;
  inset: 0;
  border: 1px solid rgba(255,255,255,0.08);
  cursor: pointer;
  border-radius: 14px;
  font: 800 13px/1 ui-monospace, monospace;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,0.4);
  transform-style: preserve-3d;
  transition: transform 0.4s cubic-bezier(.34,1.56,.64,1), box-shadow 0.3s;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), 0 6px 18px rgba(0,0,0,0.35);
  backface-visibility: hidden;
}
.cbgp-disc-1 {
  background: linear-gradient(135deg, #00ffe0, #006e62);
  transform: rotateY(var(--cbgp-disc-a)) translateZ(36px);
}
.cbgp-disc-2 {
  background: linear-gradient(135deg, #ff5af1, #6e1a6a);
  transform: rotateY(calc(var(--cbgp-disc-a) + 120deg)) translateZ(36px);
}
.cbgp-disc-3 {
  background: linear-gradient(135deg, #ffd479, #b87333);
  transform: rotateY(calc(var(--cbgp-disc-a) + 240deg)) translateZ(36px);
  color: #1a0a14;
}
.cbgp-disc button:focus-visible { outline: 2px solid #00ffe0; outline-offset: 6px; }
@media (prefers-reduced-motion: reduce) {
  .cbgp-disc { animation: none; }
}