/* =========================================================
   ZATRISH · barrinha de música (só a página inicial)
   ========================================================= */
.mus {
  --p: 0; --en: .35;
  position: fixed; z-index: 44;
  left: max(18px, env(safe-area-inset-left)); bottom: max(18px, env(safe-area-inset-bottom));
  width: min(344px, calc(100vw - 36px - 49px - 12px));
  color: var(--tinta); font-size: .8125rem;
  opacity: 0; transform: translateY(16px); pointer-events: none;
  transition: opacity .6s ease, transform .7s var(--curva);
}
.mus.entrou { opacity: 1; transform: none; pointer-events: auto; }
body.carregando .mus { opacity: 0; transform: translateY(16px); pointer-events: none; }

.mus-barra {
  position: relative; display: flex; align-items: center; gap: 4px; height: 42px; padding: 0 5px 0 5px;
  background: color-mix(in srgb, var(--fundo) 86%, transparent);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border: 1px solid var(--linha-forte); border-radius: 999px; overflow: hidden;
}
/* fio de progresso: acompanha a rolagem da página */
.mus-barra::after {
  content: ""; position: absolute; left: 16px; right: 16px; bottom: 0; height: 1.5px; background: var(--tinta);
  transform: scaleX(var(--p)); transform-origin: left; opacity: .55;
}
.mus-bt {
  flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; cursor: pointer;
  color: var(--tinta); background: transparent; border: 0; transition: background-color .25s, color .25s, transform .3s var(--curva);
}
.mus-bt svg { width: 14px; height: 14px; fill: currentColor; }
.mus-bt:hover { background: color-mix(in srgb, var(--tinta) 12%, transparent); }
.mus-bt:focus-visible { outline: 2px solid var(--tinta); outline-offset: 1px; }
.mus-play { width: 34px; height: 34px; background: var(--tinta); color: var(--fundo); }
.mus-play:hover { background: var(--tinta); transform: scale(1.08); }
.mus-play svg { width: 13px; height: 13px; }
.mus-play .i-pausa, .mus.tocando .mus-play .i-toca { display: none; }
.mus.tocando .mus-play .i-pausa { display: block; }

.mus-eq { flex: none; display: flex; align-items: flex-end; gap: 2px; height: 14px; margin: 0 4px 0 6px; }
.mus-eq i { width: 2px; height: 3px; background: var(--tinta); border-radius: 1px; transform-origin: bottom; }
.mus.tocando .mus-eq i { animation: mus-eq calc(.9s / (.5 + var(--en))) ease-in-out infinite alternate; }
.mus-eq i:nth-child(1) { animation-delay: -.3s; } .mus-eq i:nth-child(2) { animation-delay: -.7s; }
.mus-eq i:nth-child(3) { animation-delay: -.1s; } .mus-eq i:nth-child(4) { animation-delay: -.5s; }
.mus-eq i:nth-child(5) { animation-delay: -.9s; }
@keyframes mus-eq { from { height: 3px; } to { height: 14px; } }

.mus-txt { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; letter-spacing: -.005em; }
.mus-txt b { font-weight: 700; }
.mus-txt span { color: var(--cinza); }
.mus-exp svg { transition: transform .4s var(--curva); fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.mus.aberto .mus-exp svg { transform: rotate(180deg); }
.mus-prox[hidden] { display: none; }

.mus-gaveta {
  position: absolute; left: 0; right: 0; bottom: calc(100% + 8px);
  border: 1px solid var(--linha-forte); border-radius: 18px; overflow: hidden; background: var(--painel);
  opacity: 0; transform: translateY(8px); pointer-events: none; visibility: hidden;
  transition: opacity .35s ease, transform .5s var(--curva), visibility 0s .5s;
}
.mus.aberto .mus-gaveta { opacity: 1; transform: none; pointer-events: auto; visibility: visible; transition-delay: 0s; }
.mus-gaveta iframe { display: block; border: 0; width: 100%; height: 152px; }
.mus-gaveta .mus-vazio { padding: 16px; line-height: 1.4; color: var(--cinza); }

@media (max-width: 420px) { .mus-eq { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .mus, .mus-gaveta { transition: none; }
  .mus.tocando .mus-eq i { animation: none; height: 9px; }
}

/* troca de página sem recarregar (navegacao.js) */
html.z-saindo body > *:not(.mus) { opacity: .0; transition: opacity .18s ease; }
html.z-entrando body > *:not(.mus) { animation: z-entra .38s ease both; }
@keyframes z-entra { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { html.z-saindo body > *:not(.mus), html.z-entrando body > *:not(.mus) { transition: none; animation: none; opacity: 1; } }