.lookupRecord {
  position: relative;
  display: block;
  width: 82px;
  height: 82px;
  overflow: hidden;
  border-radius: 50%;
  background: #151515;
}

.lookupRecord::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    radial-gradient(circle at center, #cc4144 0 12px, #9f252d 13px 15px, transparent 16px),
    conic-gradient(
      from 22deg,
      transparent 0 8%,
      rgb(255 255 255 / 1%) 12%,
      rgb(255 255 255 / 4%) 18%,
      rgb(255 255 255 / 1%) 24%,
      transparent 30% 56%,
      rgb(0 0 0 / 18%) 63%,
      transparent 71% 100%
    ),
    repeating-radial-gradient(circle at center, #272727 0 3px, #121212 4px 6px);
  animation: lookupRecordSpin 1.15s linear infinite;
}

.lookupRecord::after {
  content: "";
  position: absolute;
  z-index: 3;
  top: 50%;
  left: 50%;
  width: 2.25px;
  height: 2.25px;
  border-radius: 50%;
  background: radial-gradient(
    circle at 32% 28%,
    #ffffff 0 9%,
    #dce2e6 22%,
    #9ba4aa 52%,
    #596168 76%,
    #292e32 100%
  );
  box-shadow:
    -0.225px -0.225px 0.3375px rgb(255 255 255 / 65%),
    0.3375px 0.3375px 0.45px rgb(0 0 0 / 55%);
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.lookupSpacedog {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 50%;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  object-fit: cover;
  opacity: 0.92;
  mix-blend-mode: multiply;
  animation: lookupLabelSpin 1.15s linear infinite;
  pointer-events: none;
}

@keyframes lookupRecordSpin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes lookupLabelSpin {
  from {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .lookupRecord::before,
  .lookupSpacedog {
    animation-duration: 3s;
  }
}