/* ============================================
   MUSIC PLAYER — tombol vinyl mengambang
   ============================================ */

.music-vinyl-toggle {
  position: fixed;
  right: var(--music-vinyl-right);
  bottom: var(--music-vinyl-bottom);
  z-index: var(--music-vinyl-z);
  width: var(--music-vinyl-size);
  height: var(--music-vinyl-size);
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px) scale(0.92);
  transition: opacity 240ms ease, transform 240ms ease, visibility 240ms;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.music-vinyl-toggle.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}

.music-vinyl-toggle:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 3px;
}

.music-vinyl-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  user-select: none;
  filter: drop-shadow(0 3px 7px rgba(0, 0, 0, 0.28));
}

.music-vinyl-toggle.is-playing .music-vinyl-image {
  animation: music-vinyl-spin var(--music-vinyl-spin-duration) linear infinite;
}

.music-vinyl-state {
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--music-vinyl-icon-size);
  height: var(--music-vinyl-icon-size);
  transform: translate(-50%, -50%);
  pointer-events: none;
}

/* Kondisi musik berhenti: segitiga Play. */
.music-vinyl-state::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 54%;
  width: 0;
  height: 0;
  border-top: calc(var(--music-vinyl-icon-size) * 0.38) solid transparent;
  border-bottom: calc(var(--music-vinyl-icon-size) * 0.38) solid transparent;
  border-left: calc(var(--music-vinyl-icon-size) * 0.62) solid #ffffff;
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.55));
}

/* Kondisi musik bermain: dua garis Pause. */
.music-vinyl-toggle.is-playing .music-vinyl-state::before,
.music-vinyl-toggle.is-playing .music-vinyl-state::after {
  content: '';
  position: absolute;
  top: 15%;
  width: 25%;
  height: 70%;
  border: 0;
  border-radius: 1px;
  background: #ffffff;
  transform: none;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.55));
}

.music-vinyl-toggle.is-playing .music-vinyl-state::before {
  left: 16%;
}

.music-vinyl-toggle.is-playing .music-vinyl-state::after {
  right: 16%;
}

@keyframes music-vinyl-spin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .music-vinyl-toggle,
  .music-vinyl-toggle.is-playing .music-vinyl-image {
    animation: none;
    transition: none;
  }
}