/* Transform ownership: entrance on wrapper, rotation on disk, needle stationary. */
.record-disk {
  position: absolute;
  inset: 0;
  animation: record-spin 14s linear infinite;
}
.record-needle {
  position: absolute;
  width: 39%;
  height: 4%;
  right: -7%;
  top: 17%;
  background: #b7bbae;
  border: 3px solid #555b4f;
  border-radius: 5px;
  transform: rotate(34deg);
  transform-origin: right;
  box-shadow: 3px 4px 0 #0005;
}
.record-needle::after {
  content: '';
  position: absolute;
  left: -5%;
  top: -50%;
  width: 20%;
  height: 220%;
  background: #151711;
  border-radius: 3px;
}
.brand-trace {
  stroke-dasharray: 1;
  animation: brand-trace 6s ease-in-out infinite;
}
.player-record {
  position: relative;
  border: 8px solid #36392e;
  border-radius: 50%;
  box-shadow:
    0 0 0 2px #0b0d09,
    inset 0 0 0 2px #151711;
  animation: record-spin 8s linear infinite;
  animation-play-state: paused;
}
.player-record::after {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #151711;
  position: absolute;
  inset: calc(50% - 2.5px);
}
@keyframes record-spin {
  to {
    transform: rotate(360deg);
  }
}
@keyframes brand-trace {
  0%,
  70%,
  100% {
    stroke-dashoffset: 0;
  }
  82% {
    stroke-dashoffset: -1;
  }
  83% {
    stroke-dashoffset: 1;
  }
}
@media (prefers-reduced-motion: reduce) {
  [data-motion] {
    animation-play-state: paused !important;
  }
  .brand-trace {
    stroke-dashoffset: 0 !important;
  }
  .record-art {
    animation: none !important;
  }
}
html[data-motion='off'] .brand-trace {
  stroke-dashoffset: 0;
}