/* Tombol musik latar (partials/music_toggle). Satu file untuk Pumiland, Pumimart, dan admin:
   dimuat dari pumiland.com oleh partials/music_assets. Warna pakai variabel situs + cadangan. */
.music-toggle {
  position: relative; width: 36px; height: 36px; padding: 0; flex-shrink: 0; cursor: pointer;
  display: grid; place-items: center;
  border-radius: 50%; border: 2px solid var(--line, #EADFDC); background: var(--surface, #fff); color: #ADA3A6;
  transition: background-color .3s, color .3s, border-color .3s, transform .15s;
}
.music-toggle:hover { transform: scale(1.06); }
.music-toggle:active { transform: scale(.94); }
.music-toggle:focus-visible { outline: 2px solid var(--primary, #D8536C); outline-offset: 2px; }
.music-toggle svg { width: 20px; height: 20px; overflow: visible; }
.music-toggle .slash { transition: opacity .25s, transform .25s; transform-origin: 12px 12px; }
/* warna saat nyala bisa diganti per situs lewat --music-on-* (bawaan: lavender Pumiland) */
.music-toggle[aria-pressed="true"] { background: var(--music-on-bg, #D9CCF2); border-color: var(--music-on-line, #BCA9EC); color: var(--music-on-ink, #6E52BE); }
.music-toggle[aria-pressed="true"] .slash { opacity: 0; transform: scale(.3); }
.music-toggle[aria-pressed="true"] .note { animation: music-groove .69s ease-in-out infinite alternate; transform-origin: 12px 20px; }
.music-toggle.loading { animation: music-pulse 1s ease-in-out infinite; }
/* musik ingin nyala tapi browser menunggu klik/sentuhan pertama */
.music-toggle.waiting { animation: music-pulse 1.6s ease-in-out infinite; }
.music-toggle.waiting .note { animation: none; }
@keyframes music-groove { from { transform: rotate(-8deg); } to { transform: rotate(8deg) translateY(-1px); } }
@keyframes music-pulse { 50% { opacity: .55; } }
.music-fly {
  position: absolute; left: 50%; top: 4px; pointer-events: none;
  color: var(--music-on-ink, #8B6FD6); font: 700 14px/1 system-ui, sans-serif;
  animation: music-fly 2.4s ease-out forwards;
}
@keyframes music-fly {
  0%   { transform: translate(-50%, 0) scale(.6); opacity: 0; }
  15%  { opacity: 1; }
  100% { transform: translate(calc(-50% + var(--dx)), 46px) rotate(var(--r)) scale(1); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .music-toggle[aria-pressed="true"] .note, .music-toggle.loading, .music-toggle.waiting { animation: none; }
}