.music-disc {
  width: 2.6rem;
  height: 2.6rem;

  display: grid;
  place-items: center;

  cursor: pointer;
}

.disc-inner {
  position: relative;
  width: 2.6rem;
  height: 2.6rem;

  transform-origin: 50% 50%;
}

/* outer ring */
.disc-inner::before {
  content: "";
  position: absolute;
  inset: 0;

  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.8);
}

/* inner ring */
.disc-inner::after {
  content: "";
  position: absolute;

  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.9);

  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* groove arc */
.disc-inner span {
  position: absolute;

  width: 22px;
  height: 22px;
  border-radius: 50%;

  border-top: 1.5px solid rgba(255, 255, 255, 0.6);
  border-left: 1.5px solid transparent;
  border-right: 1.5px solid transparent;
  border-bottom: 1.5px solid transparent;

  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-40deg);
}

/* hover: spin only */
.music-disc:hover .disc-inner {
  animation: disc-spin 1s linear infinite;
}

/* playing: spin + occasional pulse */
.music-disc.is-playing .disc-inner {
  animation:
    disc-spin 1s linear infinite,
    disc-pulse 1.05s ease-in-out infinite;
}

@keyframes disc-spin {
  from {
    rotate: 0deg;
  }

  to {
    rotate: 360deg;
  }
}

@keyframes disc-pulse {
  0%,
  72%,
  100% {
    scale: 1;
  }

  82% {
    scale: 1.12;
  }
}