/* ============================================================
   Vikas Collectives — Background Music (v9.1)
   File: assets/music.css — loaded on every page after style.css.
   Styles the floating play/pause button injected by music.js.
   ============================================================ */

.music-btn{
  position:fixed;
  right:18px;
  bottom:18px;
  z-index:80;
  width:52px;
  height:52px;
  border-radius:50%;
  border:1px solid var(--brass);
  background:var(--ink);
  color:var(--gold-l);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  box-shadow:0 6px 18px rgba(28,34,64,.3);
  transition:transform .25s ease, background .25s ease, color .25s ease;
}
.music-btn svg{ width:22px; height:22px; fill:currentColor; }
.music-btn:hover{
  transform:scale(1.08);
  background:var(--brass);
  color:var(--ivory);
}
.music-btn:focus-visible{
  outline:2px solid var(--saffron);
  outline-offset:3px;
}

/* Icon swap: note when idle, pause bars while playing */
.music-btn .icon-pause{ display:none; }
.music-btn.playing .icon-note{ display:none; }
.music-btn.playing .icon-pause{ display:block; }

/* Gentle pulse ring while music plays */
.music-btn.playing::after{
  content:"";
  position:absolute;
  inset:-4px;
  border-radius:50%;
  border:2px solid var(--gold-l);
  opacity:0;
  animation:musicPulse 2.2s ease-out infinite;
  pointer-events:none;
}
@keyframes musicPulse{
  0%   { transform:scale(.9); opacity:.7; }
  70%  { transform:scale(1.25); opacity:0; }
  100% { transform:scale(1.25); opacity:0; }
}

/* First-visit hint bubble */
.music-hint{
  position:fixed;
  right:80px;
  bottom:28px;
  z-index:80;
  background:var(--ink);
  color:#fff;
  font-size:.8rem;
  font-weight:600;
  padding:8px 14px;
  border-radius:var(--radius);
  border:1px solid var(--brass);
  box-shadow:0 6px 18px rgba(28,34,64,.25);
  opacity:0;
  transform:translateX(6px);
  animation:musicHint 6s ease forwards;
  pointer-events:none;
  white-space:nowrap;
}
@keyframes musicHint{
  0%,8%   { opacity:0; transform:translateX(6px); }
  16%,80% { opacity:1; transform:translateX(0); }
  100%    { opacity:0; transform:translateX(6px); }
}

@media (max-width:640px){
  .music-btn{ right:14px; bottom:14px; width:48px; height:48px; }
  .music-hint{ right:70px; bottom:24px; }
}

@media (prefers-reduced-motion:reduce){
  .music-btn{ transition:none; }
  .music-btn.playing::after{ animation:none; display:none; }
  .music-hint{ animation:none; opacity:1; }
}