/* =====================================================================
   musica.css — botão de música do site inteiro.

   Mesmo desenho do botão que existia só na home, agora em todas as páginas
   com o cabeçalho. Diferenças deliberadas em relação ao original:
   · cores escritas por extenso, sem depender das variáveis de cada página;
   · reset próprio de <button>, porque nem toda página zera os botões;
   · pulso em dourado, não em marfim: o marfim só aparecia sobre o vídeo
     escuro da home e sumiria no fundo claro das outras páginas;
   · camada 85: acima do conteúdo e do botão "voltar ao topo" do manual,
     abaixo do véu da lista de presentes e do visor das fotos (90), que
     precisam cobri-lo quando abertos.
   ===================================================================== */

.musica-btn{
  position:fixed;right:clamp(16px,3vw,32px);bottom:clamp(16px,3vw,32px);z-index:85;
  width:56px;height:56px;margin:0;padding:0;border:0;border-radius:50%;
  background:rgba(46,51,39,.78);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  color:#F3EFE8;font:inherit;-webkit-tap-highlight-color:transparent;
  transition:background .3s;
  animation:musica-pulso 2.6s ease-in-out infinite;
}
.musica-btn:hover{background:#4A5432;}
.musica-btn:focus-visible{outline:2px solid #B08D57;outline-offset:3px;}
/* Pulso só enquanto o visitante não descobriu o botão — ou quando a música
   estava ligada e o navegador exige um toque para retomá-la nesta página. */
.musica-btn.descoberto{animation:none;}
.musica-btn.retomar{animation:musica-pulso 2.6s ease-in-out infinite;}
.musica-btn.tocando{animation:none;}

.musica-btn svg{width:22px;height:22px;overflow:visible;}
.musica-btn .corpo{fill:#F3EFE8;}
.musica-btn .mudo{opacity:1;transition:opacity .25s;}
.musica-btn .onda{opacity:0;transition:opacity .25s;}
.musica-btn.tocando .mudo{opacity:0;}
.musica-btn.tocando .onda{opacity:1;animation:musica-onda 1.7s ease-in-out infinite;}
.musica-btn.tocando .onda.o2{animation-delay:.15s;}

@keyframes musica-onda{0%,100%{opacity:.45;}50%{opacity:1;}}
@keyframes musica-pulso{
  0%,100%{box-shadow:0 0 0 0 rgba(176,141,87,.5);}
  50%{box-shadow:0 0 0 10px rgba(176,141,87,0);}
}
@media (prefers-reduced-motion:reduce){
  .musica-btn,.musica-btn.retomar,.musica-btn.tocando .onda{animation:none;}
}