/* ------------------------------------------------------------------
   Spinning vinyl avatar — shared by the redesign cards and profile.
   Used wherever a listing/company has no uploaded logo.
   ------------------------------------------------------------------ */
.vinyl{
  --vinyl-size:150px;
  --vinyl-label:#FFC629;
  --vinyl-ink:#0A1F44;
  width:var(--vinyl-size);
  height:var(--vinyl-size);
  border-radius:50%;
  flex:none;
  position:relative;
  display:grid;
  place-items:center;
  overflow:hidden;
  background:repeating-radial-gradient(circle,#0a0f1f 0 2px,#161f3a 2px 4px);
  box-shadow:0 14px 30px rgba(0,0,0,.35);
  animation:vinylspin 18s linear infinite;
  will-change:transform;
}
.vinyl::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:50%;
  background:conic-gradient(from 0deg,transparent 0 8%,rgba(255,255,255,.14) 12%,transparent 18% 50%,rgba(255,255,255,.14) 62%,transparent 68%);
}
.vinyl span{
  position:relative;
  width:calc(var(--vinyl-size) * .36);
  height:calc(var(--vinyl-size) * .36);
  border-radius:50%;
  background:var(--vinyl-label);
  display:grid;
  place-items:center;
  font-family:var(--display, Inter, system-ui, sans-serif);
  font-weight:800;
  color:var(--vinyl-ink);
  font-size:calc(var(--vinyl-size) * .113);
  line-height:1;
  animation:vinylspin-reverse 18s linear infinite;
  will-change:transform;
}
.vinyl:hover{animation-duration:2.2s}
.vinyl:hover span{animation-duration:2.2s}
@keyframes vinylspin{to{transform:rotate(360deg)}}
@keyframes vinylspin-reverse{to{transform:rotate(-360deg)}}

.vinyl-avatar{--vinyl-size:60px}
.vinyl-avatar span{font-size:11px}
.card--compact .vinyl-avatar{--vinyl-size:50px}
.card--compact .vinyl-avatar span{font-size:9px}

.vinyl-profile{--vinyl-size:92px}
.vinyl-profile span{font-size:16px}

.vinyl-sim{--vinyl-size:52px}
.vinyl-sim span{font-size:10px}

@media (prefers-reduced-motion: reduce){
  .vinyl,.vinyl span{animation:none}
}