/* ==========================================================================
   A cena do login (login-anim.js): o pulso passa pelos clientes, cada rosto pula e
   mostra a nota, a nota voa para o quadro "Hoje, ao vivo" e o ranking das unidades se
   reorganiza. No celular (ou sem espaço para o quadro), a pílula do NPS no canto.
   Em arquivo próprio para a cena entrar e sair inteira, sem espalhar no styles.css.
   ========================================================================== */

.cena { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.cena-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.cena-linha { fill: none; stroke: rgba(61, 61, 245, .22); stroke-width: 2; }
.cena-onda {
  fill: none; stroke: url(#cena-grad); stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round;
  filter: drop-shadow(0 0 6px rgba(138, 107, 255, .75));
}

.emo { display: block; user-select: none; -webkit-user-drag: none; }
span.emo { line-height: 1; text-align: center; }

/* ---- os clientes na linha ---- */
.cena-rosto { position: absolute; left: 0; top: 0; }
.cena-rosto[hidden] { display: none; }
.cena-rosto .emo { transform-origin: 50% 100%; }
.cena-rosto.pula .emo { animation: cena-pula .75s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes cena-pula {
  0% { transform: none; }
  35% { transform: translateY(-26%) scale(1.22); }
  70% { transform: translateY(4%) scale(.96, 1.04); }
  100% { transform: none; }
}
.cena-rosto.chega .emo { animation: cena-chega .55s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes cena-chega { from { transform: scale(0) rotate(-20deg); opacity: 0; } to { transform: none; opacity: 1; } }
.cena-rosto.sai .emo { transition: transform .25s ease, opacity .25s ease; transform: scale(.3); opacity: 0; }

.cena-nota, .cena-voa {
  font-size: 12px; font-weight: 800; border-radius: 999px; padding: 2px 8px; white-space: nowrap;
}
.cena-nota { position: absolute; left: 50%; bottom: 100%; transform: translate(-50%, 0); opacity: 0; }
.cena-rosto.pula .cena-nota { animation: cena-nota 1.2s ease-out; }
@keyframes cena-nota {
  0% { opacity: 0; transform: translate(-50%, 6px); }
  20%, 70% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -18px); }
}
.cena-voa { position: absolute; left: 0; top: 0; z-index: 3; box-shadow: 0 4px 12px rgba(19, 19, 34, .12); }
.cena .prom-c { background: var(--prom-soft); color: var(--prom-ink); }
.cena .neu-c { background: var(--neu-soft); color: var(--neu-ink); }
.cena .det-c { background: var(--det-soft); color: var(--det-ink); }

/* ---- o quadro "Hoje, ao vivo", com o ranking dentro ---- */
.cena-quadro {
  position: absolute; z-index: 2; width: 336px; color: var(--ink);
  background: rgba(255, 255, 255, .80); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border: 1px solid rgba(201, 201, 251, .9); border-radius: 18px; padding: 14px 16px 12px;
  box-shadow: 0 12px 34px rgba(61, 61, 245, .12);
}
.cena-quadro[hidden], .cena-pilula[hidden] { display: none; }
.cena-quadro.sem-ultima .cena-ultima, .cena-quadro.sem-trio .cena-trio { display: none; }
.cena-vivo {
  display: flex; align-items: center; gap: 7px; font-size: 11.5px; font-weight: 800; color: var(--muted);
  text-transform: uppercase; letter-spacing: .06em;
}
.cena-vivo i, .cena-pilula i { width: 8px; height: 8px; border-radius: 50%; background: var(--det); animation: cena-ponto 1.6s infinite; }
@keyframes cena-ponto {
  0% { box-shadow: 0 0 0 0 rgba(244, 45, 94, .5); }
  70% { box-shadow: 0 0 0 8px rgba(244, 45, 94, 0); }
  100% { box-shadow: 0 0 0 0 rgba(244, 45, 94, 0); }
}
/* Os números são de exemplo: quem entra não pode confundir com os da própria rede. */
.cena-exemplo {
  margin-left: auto; font-size: 10.5px; font-weight: 700; letter-spacing: 0; text-transform: none;
  color: var(--muted); background: var(--surface-3); border-radius: 6px; padding: 1px 7px;
}
.cena-nps { display: flex; align-items: flex-end; gap: 12px; margin: 6px 0 9px; }
.cena-nps small { display: block; font-size: 11.5px; color: var(--muted); font-weight: 700; }
.cena-nps b {
  display: block; font-size: 42px; font-weight: 800; letter-spacing: -.04em; line-height: 1;
  font-variant-numeric: tabular-nums;
}
.cena-nps b.bate, .cena-pilula b.bate { animation: cena-bate .45s ease; }
@keyframes cena-bate { 40% { transform: scale(1.12); } }
.cena-zona { font-size: 13px; font-weight: 800; color: var(--prom-ink); padding-bottom: 5px; }
.cena-pilha { display: flex; height: 8px; border-radius: 99px; overflow: hidden; gap: 2px; }
.cena-pilha i { transition: flex-grow .5s ease; }
.cena-trio {
  display: flex; gap: 10px; justify-content: space-between; margin-top: 8px;
  font-size: 11.5px; font-weight: 700; color: var(--ink-2);
}
.cena-trio span { display: flex; align-items: center; gap: 4px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.cena-trio span.mais { animation: cena-mais .6s ease; }
@keyframes cena-mais { 30% { color: var(--accent); transform: translateY(-2px); } }
.cena-rk {
  margin: 12px 0 0; padding-top: 10px; border-top: 1px solid var(--rule);
  font-size: 11.5px; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: .06em;
  display: flex; justify-content: space-between;
}
.cena-rk span { text-transform: none; letter-spacing: 0; font-weight: 700; }
.cena-podio {
  position: relative; display: grid; grid-template-columns: 1fr 1.1fr 1fr; align-items: end; gap: 6px; margin-top: 6px;
  background: radial-gradient(80% 70% at 50% 100%, rgba(232, 181, 0, .18), transparent 72%);
}
.cena-deg { display: flex; flex-direction: column; align-items: center; text-align: center; min-width: 0; }
.cena-deg .cara { animation: cena-quica 1.4s ease-in-out infinite; }
.cena-deg.p1 .cara { animation-duration: 1.1s; }
@keyframes cena-quica { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8%); } }
.cena-deg.troca .cara-w { animation: cena-cai .6s cubic-bezier(.3, 1.7, .5, 1) both; }
@keyframes cena-cai { from { transform: translateY(-34px) scale(.5); opacity: 0; } to { transform: none; opacity: 1; } }
.cena-deg .nm {
  font-size: 11px; font-weight: 800; margin-top: 3px; line-height: 1.15; max-width: 100%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cena-deg .np { font-size: 15px; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.cena-deg.p1 .np { font-size: 18px; }
.cena-bloco { width: 100%; border-radius: 9px 9px 0 0; margin-top: 3px; display: grid; place-items: start center; padding-top: 3px; }
.cena-deg.p1 .cena-bloco { height: 40px; background: linear-gradient(180deg, #F5C518, #E0A800); }
.cena-deg.p2 .cena-bloco { height: 30px; background: linear-gradient(180deg, #C5CBD6, #A3AAB8); }
.cena-deg.p3 .cena-bloco { height: 22px; background: linear-gradient(180deg, #DDA372, #C2834B); }
.cena-confete { position: absolute; inset: -20px -10px 0; pointer-events: none; }
.cena-confete i {
  position: absolute; top: 0; width: 6px; height: 9px; border-radius: 2px;
  animation: cena-confete var(--d) ease-in forwards;
}
@keyframes cena-confete {
  0% { opacity: 1; transform: translate(0, 0) rotate(0); }
  100% { opacity: 0; transform: translate(var(--x), 130px) rotate(600deg); }
}
.cena-ultima {
  margin-top: 9px; padding-top: 8px; border-top: 1px solid var(--rule); font-size: 11.5px; color: var(--muted);
  display: flex; align-items: center; gap: 7px; min-height: 32px;
}
.cena-ultima.nova { animation: cena-flash .6s ease; }
@keyframes cena-flash { from { background: var(--accent-soft); } to { background: transparent; } }

/* ---- a pílula, quando o quadro não cabe ---- */
.cena-pilula {
  position: absolute; z-index: 2; display: flex; align-items: center; gap: 6px;
  background: rgba(255, 255, 255, .85); border: 1px solid rgba(201, 201, 251, .9); border-radius: 999px;
  padding: 5px 10px 5px 9px; font-size: 11px; font-weight: 800; color: var(--muted);
  box-shadow: 0 6px 16px rgba(61, 61, 245, .10);
}
.cena-pilula i { width: 7px; height: 7px; }
.cena-pilula b { color: var(--ink); font-size: 13px; font-variant-numeric: tabular-nums; }

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