/* A canção do convite: um botão redondo no canto, que só aparece quando há canção carregada.
   O anel à volta desenha o progresso da música, no mesmo traço das linhas do resto do convite. */

.cancao {
  position: fixed; z-index: 40;
  right: calc(14px + env(safe-area-inset-right, 0px));
  bottom: calc(14px + env(safe-area-inset-bottom, 0px));
  display: flex; align-items: center; gap: 10px;
  pointer-events: none;
}

.cancao-botao {
  position: relative; display: grid; place-items: center;
  width: 58px; height: 58px; flex: 0 0 58px; padding: 0; border: 0; border-radius: 999px;
  background: var(--chocolate); color: var(--creme); cursor: pointer; pointer-events: auto;
  box-shadow: 0 0 0 3px var(--creme), 0 18px 34px -14px rgba(65, 26, 9, 0.7);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.2s ease;
  -webkit-tap-highlight-color: transparent;
}
.cancao-botao > * { grid-area: 1 / 1; }
.cancao-botao:hover { background: var(--nogueira); }
.cancao-botao:active { transform: scale(0.94); }
.cancao-botao:focus-visible { outline: 2px solid var(--chocolate); outline-offset: 6px; }

.cancao-anel { width: 100%; height: 100%; overflow: visible; transform: rotate(-90deg); }
.cancao-anel circle { fill: none; stroke-width: 2.5; }
.cancao-anel-fundo { stroke: rgba(247, 237, 225, 0.16); }
.cancao-anel-progresso { stroke: var(--bege); stroke-linecap: round; stroke-dasharray: 1 1; stroke-dashoffset: 1; }

.cancao-icone { width: 22px; height: 22px; }
.cancao-icone-tocar { fill: currentColor; stroke-width: 1.2; transform: translateX(1.5px); }
.cancao-icone-pausa { display: none; stroke-width: 2.6; }

.cancao-ondas { display: none; align-items: flex-end; justify-content: center; gap: 3px; width: 22px; height: 18px; }
.cancao-ondas span { width: 3px; height: 100%; border-radius: 2px; background: currentColor; transform-origin: 50% 100%; }
.cancao-ondas span:nth-child(1) { transform: scaleY(0.55); }
.cancao-ondas span:nth-child(2) { transform: scaleY(0.95); }
.cancao-ondas span:nth-child(3) { transform: scaleY(0.4); }
.cancao-ondas span:nth-child(4) { transform: scaleY(0.75); }

/* A tocar: as barras dançam. Com rato ou teclado, por cima delas aparece a pausa. */
.cancao.a-tocar .cancao-icone-tocar { display: none; }
.cancao.a-tocar .cancao-ondas { display: flex; }
.cancao.a-tocar .cancao-botao:focus-visible .cancao-ondas { display: none; }
.cancao.a-tocar .cancao-botao:focus-visible .cancao-icone-pausa { display: block; }
@media (hover: hover) {
  .cancao.a-tocar .cancao-botao:hover .cancao-ondas { display: none; }
  .cancao.a-tocar .cancao-botao:hover .cancao-icone-pausa { display: block; }
}

/* A carregar: um arco gira enquanto o primeiro pedaço da canção chega. */
.cancao.a-carregar .cancao-anel-progresso { stroke-dashoffset: 0.74 !important; }

/* Etiqueta ao lado do botão: diz o que é e o nome da canção, e recolhe-se sozinha. */
.cancao-etiqueta {
  display: flex; flex-direction: column; align-items: flex-end; gap: 1px;
  max-width: min(270px, calc(100vw - 110px)); margin: 0; padding: 9px 16px 10px; border-radius: 18px;
  background: var(--papel); color: var(--chocolate); text-align: right; cursor: pointer;
  box-shadow: 0 0 0 1.5px rgba(65, 26, 9, 0.1), 0 16px 30px -18px rgba(65, 26, 9, 0.6);
  opacity: 0; visibility: hidden; transform: translate3d(14px, 0, 0) scale(0.96); transform-origin: right center;
  transition: opacity 0.35s ease, transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), visibility 0s linear 0.6s;
}
.cancao.com-etiqueta .cancao-etiqueta {
  opacity: 1; visibility: visible; transform: none; pointer-events: auto;
  transition: opacity 0.35s ease, transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), visibility 0s;
}
.cancao-etiqueta-rotulo { font-size: 11px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--suave); }
.cancao-etiqueta-titulo {
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-family: var(--f-cartaz); font-weight: 800; font-size: 19px; line-height: 1.1; text-transform: uppercase;
}

@media (min-width: 961px) {
  .cancao { right: calc(28px + env(safe-area-inset-right, 0px)); bottom: calc(28px + env(safe-area-inset-bottom, 0px)); gap: 12px; }
  .cancao-botao { width: 64px; height: 64px; flex-basis: 64px; }
  .cancao-botao:hover { transform: scale(1.05); }
  .cancao-botao:hover:active { transform: scale(0.96); }
}

/* Movimento, só para quem não pediu menos movimento ao sistema */
@keyframes cancao-entra { from { opacity: 0; transform: translate3d(0, 26px, 0) scale(0.55); } }
@keyframes cancao-desenha {
  0% { stroke-dashoffset: 1; opacity: 1; }
  60% { stroke-dashoffset: 0; opacity: 1; }
  100% { stroke-dashoffset: 0; opacity: 0; }
}
@keyframes cancao-onda { 0%, 100% { transform: scaleY(0.28); } 50% { transform: scaleY(1); } }
@keyframes cancao-girar { from { transform: rotate(-90deg); } to { transform: rotate(270deg); } }
@keyframes cancao-chama {
  0% { box-shadow: 0 0 0 3px var(--creme), 0 0 0 3px rgba(193, 94, 40, 0.5), 0 18px 34px -14px rgba(65, 26, 9, 0.7); }
  100% { box-shadow: 0 0 0 3px var(--creme), 0 0 0 20px rgba(193, 94, 40, 0), 0 18px 34px -14px rgba(65, 26, 9, 0.7); }
}

@media (prefers-reduced-motion: no-preference) {
  .cancao.entrar .cancao-botao { animation: cancao-entra 0.8s cubic-bezier(0.16, 1, 0.3, 1) both, cancao-chama 1.4s ease-out 1.6s 2; }
  .cancao.entrar .cancao-anel-progresso { animation: cancao-desenha 1.5s cubic-bezier(0.65, 0, 0.35, 1) 0.35s backwards; }
  .cancao.a-tocar .cancao-ondas span { animation: cancao-onda 0.9s ease-in-out infinite; }
  .cancao.a-tocar .cancao-ondas span:nth-child(2) { animation-duration: 0.7s; animation-delay: -0.25s; }
  .cancao.a-tocar .cancao-ondas span:nth-child(3) { animation-duration: 1.05s; animation-delay: -0.5s; }
  .cancao.a-tocar .cancao-ondas span:nth-child(4) { animation-duration: 0.8s; animation-delay: -0.15s; }
  .cancao.a-carregar .cancao-anel { animation: cancao-girar 0.9s linear infinite; }
}

@media print { .cancao { display: none !important; } }