/* ============================================================
   VINYL KIT v1 — shared spinning-record header kit
   (c) StonedAlien75. One kit, every room. Fix once, fixed everywhere.
   Rooms load this file externally — NEVER inline it into a room page.
   Room-specific look comes from [data-theme] + CSS vars, not forked code.
   ============================================================ */

/* ---------- socket ---------- */
[data-vinyl-kit] {
  --vk-size: 120px;          /* record diameter */
  --vk-gap: 18px;            /* space between records */
  --vk-glow: 0 0 24px rgba(255, 63, 145, .35);  /* room accent glow */
  --vk-ring: #0a0c0e;        /* record edge */
  --vk-spin-ms: 3200ms;      /* one revolution */
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--vk-gap);
  padding: 14px 8px;
  position: relative;
}

/* ---------- the record ---------- */
.vk-vinyl {
  width: var(--vk-size);
  aspect-ratio: 1;
  border-radius: 50%;
  position: relative;
  flex: 0 0 auto;
  /* v2 fallback: cosmic gradient shows through if artwork fails to load —
     NEVER a black circle. The hub-name label sits on top regardless. */
  background: radial-gradient(circle at 35% 30%, #4a2560 0%, #241239 45%, #0b0d0f 100%);
  box-shadow: var(--vk-glow), 0 0 0 3px var(--vk-ring), 0 12px 28px rgba(0,0,0,.55);
  overflow: hidden;
  cursor: pointer;
}

/* full-size artwork face — the picture-disc face of the record.
   This is THE RULE: original artwork, full-sized on the record. */
.vk-vinyl .vk-face {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  /* crossfade between artworks */
  transition: opacity .9s ease;
}
.vk-vinyl .vk-face.vk-next {
  opacity: 0;
}

/* subtle groove texture over the artwork (picture-disc feel) */
.vk-vinyl .vk-grooves {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  pointer-events: none;
  background: repeating-radial-gradient(circle,
    transparent 0 2px, rgba(255,255,255,.045) 2px 3px,
    transparent 3px 5px, rgba(0,0,0,.14) 5px 6px);
}

/* light sheen sweep */
.vk-vinyl .vk-sheen {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  pointer-events: none;
  background: conic-gradient(from 200deg,
    transparent 0deg, rgba(255,255,255,.10) 18deg,
    transparent 40deg, transparent 180deg,
    rgba(255,255,255,.06) 200deg, transparent 225deg);
}

/* spindle hole */
.vk-vinyl .vk-spindle {
  position: absolute;
  inset: 46.5%;
  border-radius: 50%;
  background: #04060a;
  border: 2px solid rgba(255,255,255,.75);
  box-shadow: 0 0 0 3px rgba(0,0,0,.6);
  pointer-events: none;
}

/* the spin — applied to an inner wrapper so the crossfading
   artwork faces don't fight the rotation transform */
.vk-vinyl .vk-spinner {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  animation: vk-spin var(--vk-spin-ms) linear infinite;
  will-change: transform;
}
@keyframes vk-spin {
  to { transform: rotate(360deg); }
}

/* label ring with room name (optional, via data-label) */
.vk-vinyl .vk-label {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 34%;
  aspect-ratio: 1;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: calc(var(--vk-size) * .085);
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: .04em;
  color: #fff;
  background: radial-gradient(circle, rgba(0,0,0,.72) 0 62%, rgba(0,0,0,.28) 100%);
  border: 1px solid rgba(255,255,255,.35);
  pointer-events: none;
  padding: 6%;
  /* counter-rotate so the label text stays readable while the record spins */
  animation: vk-spin-rev var(--vk-spin-ms) linear infinite;
}
@keyframes vk-spin-rev {
  to { transform: translate(-50%, -50%) rotate(-360deg); }
}

/* ---------- per-room themes (visual identity stays distinct) ---------- */
[data-vinyl-kit][data-theme="magazine"] {
  --vk-glow: 0 0 26px rgba(255, 90, 40, .40);
  --vk-spin-ms: 3400ms;
}
[data-vinyl-kit][data-theme="insertcoin"] {
  --vk-glow: 0 0 26px rgba(255, 214, 64, .45);
  --vk-spin-ms: 2800ms;
}
[data-vinyl-kit][data-theme="neon"] {
  --vk-glow: 0 0 26px rgba(54, 241, 255, .45);
  --vk-spin-ms: 3000ms;
}
[data-vinyl-kit][data-theme="movie"] {
  --vk-glow: 0 0 26px rgba(136, 93, 255, .45);
  --vk-spin-ms: 3600ms;
}
[data-vinyl-kit][data-theme="greenroom"] {
  --vk-glow: 0 0 26px rgba(114, 255, 102, .40);
  --vk-spin-ms: 3200ms;
}
[data-vinyl-kit][data-theme="links"] {
  --vk-glow: 0 0 26px rgba(255, 63, 145, .40);
  --vk-spin-ms: 3200ms;
}

/* ---------- nav mode: records that are links ---------- */
[data-vinyl-kit] .vk-navlink {
  text-decoration: none;
  display: inline-block;
  border-radius: 50%;
}
[data-vinyl-kit] .vk-navlink:hover .vk-vinyl,
[data-vinyl-kit] .vk-navlink:focus-visible .vk-vinyl {
  box-shadow: var(--vk-glow), 0 0 0 3px #fff, 0 12px 28px rgba(0,0,0,.55);
}
[data-vinyl-kit] .vk-navlink:hover .vk-vinyl .vk-spinner {
  animation-play-state: paused;
}

/* ---------- small screens ---------- */
@media (max-width: 620px) {
  [data-vinyl-kit] {
    --vk-size: 92px;
    --vk-gap: 12px;
    padding: 10px 4px;
  }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .vk-vinyl .vk-spinner { animation-duration: 14s; }
  .vk-vinyl .vk-label { animation-duration: 14s; }
  .vk-vinyl .vk-face { transition-duration: .2s; }
}