/* Khal & Silvie · ring musical. The KC button from Lucía & Damián (KC-Style-Kit v2, boda mode), in the wax
   seal's gold over warm night glass, so it reads on the morning paper and on the night chapters alike. */

#music-control {
  --kc-ring-size: 48px;
  --pc-ring-gold: #E8CF98;
  filter: none;
  color: var(--pc-ring-gold);
}
#music-control .kc-float-bg,
#music-control .kc-float-glow { position: absolute; border-radius: 50%; pointer-events: none; }
/* Glass disc */
#music-control .kc-float-bg {
  inset: 0;
  z-index: 1;
  background: rgba(22, 16, 11, .86);
  border: 1px solid rgba(232, 207, 152, .34);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: 0 4px 14px rgba(26, 18, 8, .34);
  transition: border-color 200ms ease, box-shadow 200ms ease, transform 150ms ease;
}
/* Glow: alive while the song plays */
#music-control .kc-float-glow {
  inset: -10px;
  z-index: 0;
  background: radial-gradient(circle, rgba(232, 207, 152, .22) 0%, transparent 70%);
  animation: pc-ring-breath 3s ease-in-out infinite alternate;
}
/* Dashed orbit with its gem */
#music-control .kc-ring__orbit {
  z-index: 2;
  inset: -8px;
  border: 1.5px dashed rgba(184, 146, 74, .85);
  box-shadow: 0 0 8px rgba(232, 207, 152, .14);
  animation-duration: 20s;
}
/* The gem: a faceted garnet rhombus (the palette's ciruela) set in a gold rim, so it reads on the morning paper
   and on the night chapters alike (gold alone vanished on the light paper). */
#music-control .kc-ring__orbit::before {
  top: -5px;
  width: 9px;
  height: 9px;
  margin: 0;
  border-radius: 1.5px;
  transform: translateX(-50%) rotate(45deg);
  background:
    linear-gradient(135deg, rgba(255, 228, 232, .85) 0 18%, transparent 19%),
    linear-gradient(135deg, #C2566A 0%, #8E2F42 46%, #4A1520 54%, #773B43 100%);
  box-shadow: 0 0 0 1px #D9B86C, 0 1px 3px rgba(40, 10, 16, .55), 0 0 10px 2px rgba(142, 47, 66, .35);
}
#music-control .kc-ring__letter {
  z-index: 3;
  padding-bottom: 6px;
  font-family: 'PC Bodoni', 'Bodoni Moda', Didot, Georgia, serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .06em;
  color: var(--pc-ring-gold);
  text-shadow: 0 0 10px rgba(232, 207, 152, .25);
  transition: color 200ms ease, text-shadow 200ms ease, transform 200ms ease;
}
#music-control .kc-ring__bars { z-index: 4; bottom: 7px; height: 8px; gap: 1.5px; }
#music-control .kc-bar { border-radius: 2px; background: linear-gradient(to top, #8A6A2E, #F3DDA2); box-shadow: 0 0 4px rgba(232, 207, 152, .4); }
#music-control .kc-bar:nth-child(1) { height: 5px; }
#music-control .kc-bar:nth-child(2) { height: 8px; }
#music-control .kc-bar:nth-child(3) { height: 4px; }

/* Paused: everything stops and dims */
#music-control[data-kc-state="paused"] .kc-ring__orbit { border-color: rgba(232, 207, 152, .2); box-shadow: none; }
#music-control[data-kc-state="paused"] .kc-ring__orbit::before { box-shadow: 0 0 0 1px rgba(217, 184, 108, .6); opacity: .55; }
#music-control[data-kc-state="paused"] .kc-float-glow { opacity: .15; animation-play-state: paused; }
#music-control[data-kc-state="paused"] .kc-ring__letter { color: rgba(232, 207, 152, .5); text-shadow: none; }
#music-control[data-kc-state="paused"] .kc-bar { height: 2px; opacity: .3; }

@media (hover: hover) and (pointer: fine) {
  #music-control:hover .kc-float-bg { border-color: rgba(232, 207, 152, .6); box-shadow: 0 4px 20px rgba(0, 0, 0, .4), 0 0 24px rgba(232, 207, 152, .12); }
  #music-control:hover .kc-ring__orbit { border-color: rgba(232, 207, 152, .8); }
  #music-control:hover .kc-ring__letter { color: var(--pc-gate-ivory, #FBF6EC); transform: scale(1.08); }
}
#music-control:focus-visible { outline: none; }
#music-control:focus-visible .kc-float-bg { outline: 2px solid var(--pc-ring-gold); outline-offset: 4px; }
#music-control:active .kc-float-bg { transform: scale(.92); }

@media (prefers-reduced-motion: reduce) {
  #music-control .kc-float-glow { animation: none; }
}
@keyframes pc-ring-breath { from { opacity: .35; transform: scale(.92); } to { opacity: .85; transform: scale(1.12); } }