/* Palco — CENA DO PALCO (js/cena): cenario do degrau + cantor + plateia, ATRAS da pista.
   Regras de desempenho: tudo que anima e transform/opacity de camada inteira (compositor);
   o SVG do cenario e estatico. Os estados chegam como classe na raiz:
     .cantando  .afinado  .careta  .nota-longa  .sentindo  .voz-alta   (cantor)
     .reacao-boa  .reacao-ruim  (+ .pl-boa  .pl-ruim na .cena-plateia) (plateia, festa)
     .cena--<degrau>                                                   (paleta)
     .cena-leve                                                        (celular fraco)       */

.cena {
  position: absolute;
  inset: 0;
  overflow: hidden;
  isolation: isolate;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
  background: #0b0716;
  contain: strict;
  --cena-batida: 0.6s;
  --cena-virar: 0deg;
  --cena-h: 600px;
  --cone-cor: 255, 214, 160;
  --aura-a: 255, 200, 90;
  --aura-b: 255, 61, 154;
  --veu: 7, 4, 16;
  --veu-topo: 0.06;
  --veu-meio: 0.44;
}

.cena-fundo,
.cena-camadas,
.cena-camada,
.cena-elementos,
.cena-veu,
.cena-festa { position: absolute; inset: 0; }
.cena-fundo > svg,
.cena-camada > svg,
.pl-camada > svg { display: block; width: 100%; height: 100%; }

/* ---------- luzes que cintilam (camada inteira, so opacidade) ---------- */
.cena-camada { will-change: opacity; }
.cena-cintila-a { animation: cena-cintila 2.9s ease-in-out infinite; }
.cena-cintila-b { animation: cena-cintila 2.9s ease-in-out -1.45s infinite; }
@keyframes cena-cintila {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; }
}
.cena-pulso { animation: cena-pulso var(--cena-batida) ease-in-out infinite alternate; }
@keyframes cena-pulso {
  from { opacity: 0.25; }
  to { opacity: 1; }
}
/* brasa da churrasqueira: tremula rapido e irregular */
.cena-brasa { animation: cena-brasa 1.7s steps(1, end) infinite; }
@keyframes cena-brasa {
  0% { opacity: 0.75; }
  18% { opacity: 1; }
  33% { opacity: 0.6; }
  52% { opacity: 0.95; }
  70% { opacity: 0.7; }
  86% { opacity: 1; }
}
/* parede de LED do festival: a segunda "tela" entra e sai devagar por cima da primeira */
.cena-led { animation: cena-led 5.2s ease-in-out infinite alternate; }
@keyframes cena-led {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* ---------- elementos soltos: fumaca, feixes ---------- */
.cena-el { position: absolute; will-change: transform, opacity; }
.cena-fumaca {
  background: radial-gradient(closest-side, rgba(176, 166, 206, 0.2), rgba(176, 166, 206, 0.08) 55%, rgba(176, 166, 206, 0) 100%);
  border-radius: 50%;
  opacity: 0;
  animation: cena-fumaca 6.8s linear var(--atraso, 0s) infinite;
}
.cena-fumaca--forte {
  background: radial-gradient(closest-side, rgba(196, 186, 220, 0.3), rgba(186, 176, 214, 0.13) 55%, rgba(176, 166, 206, 0) 100%);
}
@keyframes cena-fumaca {
  0% { transform: translate3d(0, 34%, 0) scale(0.45); opacity: 0; }
  18% { opacity: 1; }
  100% { transform: translate3d(-14%, -46%, 0) scale(1.35); opacity: 0; }
}
.cena-feixe {
  --feixe: 180, 77, 255;
  transform-origin: 50% 0;
  background: linear-gradient(180deg, rgba(var(--feixe), 0.34) 0%, rgba(var(--feixe), 0.12) 45%, rgba(var(--feixe), 0) 92%);
  clip-path: polygon(46% 0, 54% 0, 100% 100%, 0 100%);
  opacity: 0.55;
  animation: cena-feixe var(--dur, 6s) ease-in-out var(--atraso, 0s) infinite alternate;
}
.cena-feixe--largo { opacity: 0.5; }
.cena-feixe--ciano { --feixe: 61, 224, 255; }
.cena-feixe--violeta { --feixe: 180, 77, 255; }
.cena-feixe--rosa { --feixe: 255, 61, 154; }
@keyframes cena-feixe {
  from { transform: rotate(calc(var(--base, 0deg) + var(--giro, 1) * -13deg)); }
  to { transform: rotate(calc(var(--base, 0deg) + var(--giro, 1) * 13deg)); }
}

/* ---------- veu: segura o contraste no MEIO (onde passam as barras e a letra) ----------
   Topo e bordas ficam mais livres a cada degrau (a luz da carreira cresce por ali). */
.cena-veu {
  background:
    linear-gradient(180deg,
      rgba(var(--veu), var(--veu-topo)) 0%,
      rgba(var(--veu), calc(var(--veu-meio) * 0.78)) 16%,
      rgba(var(--veu), var(--veu-meio)) 42%,
      rgba(var(--veu), calc(var(--veu-meio) * 0.86)) 66%,
      rgba(var(--veu), 0.2) 84%,
      rgba(var(--veu), 0.12) 100%);
}

/* ---------- cantor ---------- */
.cena-cantor {
  position: absolute;
  left: 4%;
  bottom: 4%;
  height: 52%;
  aspect-ratio: 200 / 474;
}
.cena-balanco {
  position: absolute;
  inset: 0;
  transform-origin: 50% 98%;
  will-change: transform;
}
.cena-vira {
  position: absolute;
  inset: 0;
  transform-origin: 50% 100%;
  transform: perspective(900px) rotateY(var(--cena-virar));
}
.cena-espelhada .cena-vira { transform: perspective(900px) rotateY(var(--cena-virar)) scaleX(-1); }
.cena-cantor .avatar-svg {
  width: 100%;
  height: 100%;
  overflow: visible; /* o braco livre sobe pra fora da caixa na nota longa */
  filter: drop-shadow(0 0 1.1px rgba(234, 224, 255, 0.85));
}
/* celular fraco: o drop-shadow era refeito a cada quadro (a boca muda) -> sai; no lugar, uma
   contraluz FIXA atras do cantor (pintada uma vez, so compositor) destaca a silhueta */
.cena-leve .cena-cantor .avatar-svg { filter: none; }
.cena-contraluz {
  position: absolute;
  left: -30%;
  right: -30%;
  top: -4%;
  bottom: 18%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(200, 186, 255, 0.34), rgba(160, 140, 255, 0.12) 58%, rgba(160, 140, 255, 0) 100%);
  opacity: 0;
}
.cena-leve .cena-contraluz { opacity: 1; }

/* luz de cima (cone) — opacidade vem do JS (repouso -> afinado) */
.cena-cone {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 190%;
  height: calc(100% + var(--cantor-acima, 0px));
  transform: translateX(-50%);
  background: linear-gradient(180deg, rgba(var(--cone-cor), 0.34) 0%, rgba(var(--cone-cor), 0.12) 55%, rgba(var(--cone-cor), 0.04) 100%);
  clip-path: polygon(40% 0, 60% 0, 96% 100%, 4% 100%);
  opacity: 0.2;
  will-change: opacity;
}
.cena-cone::after {
  /* poca de luz no chao */
  content: "";
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: -2%;
  height: 7%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(var(--cone-cor), 0.55), rgba(var(--cone-cor), 0));
}

/* aura quando afinado — opacidade vem do JS; o pulso e so escala (compositor) */
.cena-aura {
  position: absolute;
  left: -45%;
  right: -45%;
  top: -6%;
  height: 72%;
  border-radius: 50%;
  background:
    radial-gradient(closest-side, rgba(var(--aura-a), 0.5), rgba(var(--aura-a), 0.2) 45%, rgba(var(--aura-b), 0.1) 70%, rgba(var(--aura-b), 0) 100%);
  opacity: 0;
  will-change: opacity, transform;
}
.cena.afinado .cena-aura { animation: cena-aura var(--cena-batida) ease-in-out infinite alternate; }
@keyframes cena-aura {
  from { transform: scale(0.94); }
  to { transform: scale(1.06); }
}

/* faiscas em volta da cabeca e do microfone (so enquanto afinado) */
.cena-brilhos { position: absolute; inset: 0; }
.cena-brilhos i {
  position: absolute;
  width: 9%;
  aspect-ratio: 1;
  background: #ffe7a0;
  clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%);
  opacity: 0;
  transform: scale(0.3);
}
.cena-brilhos i:nth-child(1) { left: 12%; top: 6%; }
.cena-brilhos i:nth-child(2) { left: 74%; top: 3%; width: 7%; }
.cena-brilhos i:nth-child(3) { left: 76%; top: 17%; }
.cena-brilhos i:nth-child(4) { left: 6%; top: 20%; width: 6%; }
.cena-brilhos i:nth-child(5) { left: 68%; top: 26%; width: 6%; background: #ffc2e2; }
.cena-brilhos i:nth-child(6) { left: 28%; top: -2%; width: 6%; background: #c8f1ff; }
.cena.afinado .cena-brilhos i { animation: cena-faisca 1.3s ease-in-out infinite; }
.cena.afinado .cena-brilhos i:nth-child(2) { animation-delay: -0.35s; }
.cena.afinado .cena-brilhos i:nth-child(3) { animation-delay: -0.7s; }
.cena.afinado .cena-brilhos i:nth-child(4) { animation-delay: -0.95s; }
.cena.afinado .cena-brilhos i:nth-child(5) { animation-delay: -0.55s; }
.cena.afinado .cena-brilhos i:nth-child(6) { animation-delay: -1.15s; }
@keyframes cena-faisca {
  0%, 100% { opacity: 0; transform: scale(0.3) rotate(0deg); }
  45% { opacity: 0.95; transform: scale(1) rotate(20deg); }
  70% { opacity: 0.4; transform: scale(0.7) rotate(35deg); }
}

/* notinhas saindo do microfone quando canta ALTO (distingue "alto" de "afinado") */
.cena-notas {
  position: absolute;
  left: 2%;
  top: 2%;
  width: 44%;
  height: 24%;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.cena.voz-alta .cena-notas { opacity: 1; }
.cena-notas i {
  position: absolute;
  left: 46%;
  bottom: 0;
  width: 40%;
  aspect-ratio: 1;
  opacity: 0;
}
.cena-notas i svg { display: block; width: 100%; height: 100%; }
.cena.voz-alta .cena-notas i { animation: cena-nota-voz 1.25s ease-out infinite; }
.cena.voz-alta .cena-notas i:nth-child(2) { animation-delay: -0.42s; left: 22%; width: 34%; }
.cena.voz-alta .cena-notas i:nth-child(3) { animation-delay: -0.84s; left: 58%; width: 30%; }
@keyframes cena-nota-voz {
  0% { opacity: 0; transform: translate3d(0, 20%, 0) scale(0.6) rotate(-8deg); }
  18% { opacity: 1; }
  70% { opacity: 0.85; }
  100% { opacity: 0; transform: translate3d(-55%, -230%, 0) scale(1.05) rotate(12deg); }
}

/* ---------- careta (desafinando ~1,5 s): cabeca inclina, boca torta, gota de suor ---------- */
.cena-cantor .cena-cab-careta {
  transform-box: view-box;
  transform-origin: 100px 112px;
  transition: transform 0.32s cubic-bezier(0.3, 1.4, 0.5, 1);
}
.cena.careta .cena-cab-careta { transform: rotate(-5deg) translate(-1px, 1.2px); }
.cena-cantor [data-av="boca"] {
  transform-box: view-box;
  transform-origin: 100px 92px;
  transition: transform 0.28s ease;
}
.cena.careta .cena-cantor [data-av="boca"] { transform: rotate(10deg) scale(0.86, 0.72); }
.cena-cantor .cena-suor { opacity: 0; transition: opacity 0.25s ease; }
.cena.careta .cena-suor { opacity: 1; }
.cena-cantor .cena-gota { transform-box: fill-box; transform-origin: 50% 0; }
.cena.careta .cena-gota { animation: cena-gota 1.2s ease-in infinite; }
@keyframes cena-gota {
  0% { transform: translateY(-2px) scale(0.8); }
  70% { transform: translateY(5px) scale(1); }
  100% { transform: translateY(7px) scale(1); opacity: 0; }
}

/* ---------- nota longa: "sentindo" (olhos fechados, sobrancelha sobe) ---------- */
.cena-cantor .cena-olhos-fechados { opacity: 0; transition: opacity 0.12s ease; }
.cena.sentindo .cena-olhos-fechados { opacity: 1; }
.cena-cantor .av-olho { transition: opacity 0.12s ease; }
.cena.sentindo .cena-cantor .av-olho { opacity: 0; }
.cena-cantor .cena-sobrancelhas { transition: transform 0.25s ease; }
.cena.sentindo .cena-sobrancelhas,
.cena.careta .cena-sobrancelhas { transform: translateY(-2.4px); }

/* ---------- plateia (altura/descida vem do JS: faixa passa da borda de baixo) ---------- */
.cena-plateia {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -12%;
  height: 52%;
  --pl-r: 16px;
}
.pl-camada {
  position: absolute;
  inset: 0;
  will-change: transform;
}
.pl-bracos {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  transform: scaleY(0);
  transition: transform 0.22s cubic-bezier(0.3, 1.5, 0.5, 1);
  transition-delay: var(--d, 0ms);
}
.pl-boa .pl-bracos { transform: scaleY(1); }
.pl-luz { opacity: 0.5; transition: opacity 0.3s ease; }
.pl-boa .pl-luz,
.pl-ruim .pl-luz { opacity: 1; }
.pl-murmurio,
.pl-gag,
.pl-perfil { opacity: 0; transition: opacity 0.25s ease; }
.pl-ruim .pl-murmurio,
.pl-ruim .pl-gag,
.pl-ruim .pl-perfil { opacity: 1; }
.pl-cabeca { transform-box: fill-box; transform-origin: 50% 70%; transition: transform 0.4s ease; }
.pl-ruim .pl-cabeca { transform: translate(calc(var(--vira, 0) * 1px), calc(var(--desce, 0) * 1px)) rotate(calc(var(--gira, 0) * 1deg)); }

/* emotes da reacao boa: brotam em cima das cabecas e somem em ~1 s (so transform/opacity) */
.pl-emotes { position: absolute; inset: 0; }
.pl-emote {
  position: absolute;
  width: calc(var(--pl-r) * 1.25);
  height: calc(var(--pl-r) * 1.25);
  margin: calc(var(--pl-r) * -0.62) 0 0 calc(var(--pl-r) * -0.62);
  opacity: 0;
  will-change: transform, opacity;
}
.pl-emote svg { display: block; width: 100%; height: 100%; }
.pl-boa .pl-emote { animation: pl-emote 1.05s ease-out var(--d, 0ms) infinite; }
.pl-emote--timtim { width: calc(var(--pl-r) * 1.1); height: calc(var(--pl-r) * 1.1); }
.pl-boa .pl-emote--timtim { animation: pl-timtim 0.9s ease-out var(--d, 0ms) infinite; }
@keyframes pl-emote {
  0% { opacity: 0; transform: translate3d(0, 20%, 0) scale(0.5); }
  16% { opacity: 1; transform: translate3d(0, -10%, 0) scale(1.08); }
  62% { opacity: 1; }
  100% { opacity: 0; transform: translate3d(12%, -150%, 0) scale(0.92); }
}
@keyframes pl-timtim {
  0%, 12% { opacity: 0; transform: scale(0.2) rotate(0deg); }
  30% { opacity: 1; transform: scale(1.15) rotate(20deg); }
  70% { opacity: 0.7; transform: scale(0.9) rotate(34deg); }
  100% { opacity: 0; transform: scale(0.6) rotate(40deg); }
}

/* ---------- festa da reacao boa: fogos (estadio) e papel picado (festival, estadio) ---------- */
.cena-festa { opacity: 0; transition: opacity 0.45s ease; }
.cena.reacao-boa .cena-festa { opacity: 1; }
.cena-fogos i {
  position: absolute;
  width: 22%;
  aspect-ratio: 1;
  margin-left: -11%;
  opacity: 0;
  will-change: transform, opacity;
  animation: cena-fogo 1.6s ease-out var(--d, 0ms) infinite;
  animation-play-state: paused;
}
.cena-fogos i svg { display: block; width: 100%; height: 100%; }
@keyframes cena-fogo {
  0% { opacity: 0; transform: scale(0.15); }
  12% { opacity: 1; }
  55% { opacity: 0.9; transform: scale(1); }
  100% { opacity: 0; transform: translate3d(0, 12%, 0) scale(1.12); }
}
.cena-confete i {
  position: absolute;
  top: -3%;
  width: 7px;
  height: 11px;
  border-radius: 1.5px;
  opacity: 0.85;
  will-change: transform;
  animation: cena-confete var(--dur, 2.8s) linear var(--d, 0ms) infinite;
  animation-play-state: paused;
}
@keyframes cena-confete {
  from { transform: translate3d(0, 0, 0) rotate(0deg); }
  to { transform: translate3d(var(--dx, 0px), calc(var(--cena-h) * 1.06), 0) rotate(560deg); }
}
.cena.reacao-boa .cena-fogos i,
.cena.reacao-boa .cena-confete i { animation-play-state: running; }

/* ---------- paleta por degrau (cada degrau com um pouco mais de luz no topo que o anterior) ---------- */
.cena--churrasco { --cone-cor: 255, 200, 140; --veu: 8, 5, 18; --veu-topo: 0.1; }
.cena--boteco { --cone-cor: 255, 210, 150; --veu: 10, 5, 12; --veu-topo: 0.08; }
.cena--barzinho { --cone-cor: 255, 176, 88; --aura-a: 255, 196, 90; --veu: 10, 6, 6; --veu-topo: 0.06; }
.cena--rodeio { --cone-cor: 214, 190, 255; --veu: 6, 4, 18; --veu-topo: 0.04; }
.cena--festival { --cone-cor: 255, 190, 232; --aura-b: 180, 77, 255; --veu: 10, 4, 22; --veu-topo: 0.02; --veu-meio: 0.42; }
.cena--estadio { --cone-cor: 214, 224, 255; --aura-a: 255, 214, 120; --aura-b: 61, 224, 255; --veu: 8, 10, 26; --veu-topo: 0; --veu-meio: 0.4; }

@media (prefers-reduced-motion: reduce) {
  .cena *,
  .cena *::before,
  .cena *::after { animation: none !important; transition: none !important; }
  .cena-fumaca,
  .cena-festa { display: none; }
}

/* ---------- integração no app (js/palco-cena.js) ----------
   Antes de cantar o cantor fica em pé no palco: o aviso "Pronto pro show?" vai pro lado direito,
   num cartão próprio, sem o véu borrado por cima da cena inteira. */
.pista-wrap.com-cena .pista-overlay {
  background: linear-gradient(90deg, rgba(11, 6, 20, 0) 0%, rgba(11, 6, 20, 0) 30%, rgba(11, 6, 20, 0.5) 58%, rgba(11, 6, 20, 0.66) 100%);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  place-items: center end;
  padding: 12px;
}
.pista-wrap.com-cena .overlay-card {
  max-width: min(30ch, 62%);
  padding: 14px 12px;
  border-radius: 16px;
  background: rgba(11, 6, 20, 0.74);
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.pista-wrap.com-cena .overlay-texto { font-size: 1rem; } /* (o texto ficou curto: dá pra ler sem óculos) */

/* ---------- o RETRATO (no lugar do boneco; dono 14/10): foto / inicial / microfone num círculo ----------
   Posição e tamanho vêm do JS (--ret-x/--ret-y/--ret-d: a área da cabeça + tronco do boneco, que a
   pista já deixa livre). --voz (0..1) vem do JS a cada quadro em que muda: o círculo pulsa, o anel
   acende. Afinado: o anel gira. Desafinando: o círculo tomba de leve. Nota longa: brilho maior. */
.cena-retrato {
  position: absolute;
  left: var(--ret-x, 0px);
  top: var(--ret-y, 0px);
  width: var(--ret-d, 100%);
  height: var(--ret-d, 100%);
  --voz: 0;
}
.cena-espelhada.cena-com-retrato .cena-vira { transform: perspective(900px) rotateY(var(--cena-virar)); } /* foto e nome nunca espelhados */
.cena-retrato-pulso {
  position: absolute;
  inset: 0;
  transform: scale(calc(1 + var(--voz) * 0.06));
  transition: transform 0.08s linear;
  will-change: transform;
}
.cena-retrato-anel {
  position: absolute;
  inset: -8%;
  border-radius: 50%;
  background: conic-gradient(from 0deg, #ffd36e, #ff7ab8, #b44dff, #3de0ff, #7dffb2, #ffd36e);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 6.5%), #000 calc(100% - 6%));
  mask: radial-gradient(farthest-side, transparent calc(100% - 6.5%), #000 calc(100% - 6%));
  opacity: calc(0.35 + var(--voz) * 0.65);
  will-change: transform, opacity;
}
.cena.afinado .cena-retrato-anel { opacity: 1; animation: cena-retrato-gira 2.2s linear infinite; }
@keyframes cena-retrato-gira { to { transform: rotate(1turn); } }
.cena-retrato-disco {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  overflow: hidden;
  display: grid;
  place-items: center;
  background: hsl(var(--h, 280) 55% 42%);
  box-shadow:
    0 0 0 max(2px, calc(var(--ret-d, 120px) * 0.022)) rgba(255, 255, 255, 0.92),
    0 0 calc(var(--ret-d, 120px) * (0.08 + var(--voz) * 0.22)) rgba(255, 211, 110, calc(0.25 + var(--voz) * 0.5)),
    0 10px 26px rgba(0, 0, 0, 0.45);
  transition: transform 0.25s ease;
}
.cena.sentindo .cena-retrato-disco {
  box-shadow:
    0 0 0 max(2px, calc(var(--ret-d, 120px) * 0.022)) rgba(255, 255, 255, 0.95),
    0 0 calc(var(--ret-d, 120px) * 0.45) rgba(255, 211, 110, 0.85),
    0 10px 26px rgba(0, 0, 0, 0.45);
}
.cena.careta .cena-retrato-disco { transform: rotate(-7deg); }
.cena-retrato-foto { display: block; width: 100%; height: 100%; object-fit: cover; }
.cena-retrato-ini {
  color: #fff;
  font-weight: 900;
  font-size: calc(var(--ret-d, 120px) * 0.4);
  line-height: 1;
  letter-spacing: -0.02em;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}
.cena-retrato-disco[data-tipo="pessoa"] { background: radial-gradient(circle at 50% 35%, #3a3348, #16121e); color: #b9b0cc; }
.cena-retrato-pessoa { width: 62%; height: 62%; margin-top: 12%; }
/* a placa do nome SOBRE a borda de baixo do círculo (como o selo "ao vivo"): sai só 10% do diâmetro
   pra baixo e nunca fica mais larga que o círculo (a conta de layoutRetrato conta com isso) */
.cena-retrato-nome {
  position: absolute;
  left: 50%;
  bottom: calc(var(--ret-d, 120px) * -0.1);
  transform: translateX(-50%);
  max-width: 100%;
  padding: 0.22em 0.8em;
  border-radius: 999px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  background: rgba(12, 10, 18, 0.74);
  color: #fff;
  font-weight: 800;
  font-size: max(12px, calc(var(--ret-d, 120px) * 0.13));
  box-shadow: 0 0 0 1px rgba(255, 211, 110, 0.55);
}
.cena-retrato-nome[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) {
  .cena.afinado .cena-retrato-anel { animation: none; }
  .cena-retrato-pulso { transition: none; }
}