/* Spinning vinyl showing today's most-played Spotify song (bottom left of the footer) */

.record {
  display: flex;
  align-items: center;
  gap: 14px;
  color: inherit;
  text-decoration: none;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.record.loaded { opacity: 1; transform: none; }

/* the disc: dark grooves, album cover as the center label, a hole in the middle */
.vinyl {
  position: relative;
  flex: none;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background:
    radial-gradient(circle, transparent 60%, rgba(255, 255, 255, 0.06) 61%, transparent 62%),
    repeating-radial-gradient(circle, #161616 0 1px, #232323 1px 3px);
  box-shadow: 0 0 0 1px var(--cursor-snap), 0 2px 6px rgba(0, 0, 0, 0.18);
  animation: vinyl-spin 3.2s linear infinite;
}
.vinyl img {
  position: absolute;
  inset: 28%;
  width: 44%;
  height: 44%;
  border-radius: 50%;
  object-fit: cover;
}
.vinyl::after {  /* spindle hole */
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 4px;
  height: 4px;
  margin: -2px 0 0 -2px;
  border-radius: 50%;
  background: #fff;
}
.vinyl:hover { animation-duration: 1.6s; }  /* spins faster on hover */
@keyframes vinyl-spin { to { transform: rotate(360deg); } }

.track { display: flex; flex-direction: column; min-width: 0; }
/* same text size as the rest of the page */
.track-label { font-size: var(--text); line-height: var(--text-lh); font-style: italic; opacity: 0.75; }
.track-title,
.track-artist {
  max-width: 260px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.track-title { font-size: var(--text); line-height: var(--text-lh); }
.track-artist { font-size: var(--text); line-height: var(--text-lh); font-style: italic; }

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

/* in the top-right corner: text on the left, disc on the outer edge */
header .record { flex-direction: row-reverse; text-align: right; }
header .track { align-items: flex-end; }

/* phones: a smaller record so it fits beside the name */
@media (max-width: 640px) {
  .vinyl { width: 40px; height: 40px; }
  .record { gap: 8px; }
  .track { min-width: 0; }
  .track-title, .track-artist { max-width: 110px; }
}