/* Barra de tempo dos minigames (enquete, quiz — e depois sorteio e duelo).
 *
 * POR QUE CSS E NAO TAILWIND: as classes de fase entram por JS, e o Tailwind
 * aqui e o play CDN (gera a regra quando VE a classe no DOM). Pra algo que
 * precisa estar certo no PRIMEIRO QUADRO isso e corrida perdida — mesma licao
 * do cartao de aviso e da piscada do tempo real.
 *
 * POR QUE A ANIMACAO E DE TRANSICAO E NAO DE `setInterval`:
 * o dono pediu barra ANIMADA e avisou que "os tempos geralmente vao ser
 * curtos". Atualizando a largura de 1 em 1 segundo (como era), uma enquete de
 * 60s andava em 60 degraus visiveis. Agora o JS aplica UMA transicao linear com
 * duracao igual ao tempo restante: o navegador interpola a 60fps, de graca, sem
 * timer nenhum — e continua correto quando a aba volta do segundo plano, porque
 * o relogio da transicao e o do navegador.
 */

.wtempo {
  position: relative;
  height: 10px;                 /* era 4px: o dono pediu maior */
  border-radius: 999px;
  overflow: hidden;
  background: rgba(100, 116, 139, .25);   /* slate-500/25: serve claro e escuro */
}
.dark .wtempo { background: rgba(148, 163, 184, .22); }

.wtempo-barra {
  position: relative;
  height: 100%;
  border-radius: 999px;
  overflow: hidden;
  /* `will-change` porque a largura anima por segundos seguidos. */
  will-change: width;
  background: linear-gradient(90deg, #10b981, #34d399);   /* emerald 500 -> 400 */
}

/* O BRILHO QUE ATRAVESSA: e o que faz a barra parecer viva mesmo quando o
 * tempo restante e longo e a largura quase nao muda. */
.wtempo-barra::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    transparent 0%, rgba(255, 255, 255, .45) 50%, transparent 100%);
  animation: wtempoBrilho 1.6s linear infinite;
}

@keyframes wtempoBrilho {
  from { transform: translateX(-100%); }
  to   { transform: translateX(100%); }
}

/* ---- fases ----
 * O JS troca a classe do CONTAINER (nao da barra) pra a cor e o ritmo virem
 * juntos numa regra so. */
.wtempo--aviso .wtempo-barra {
  background: linear-gradient(90deg, #f59e0b, #fbbf24);   /* amber */
}
.wtempo--urgente .wtempo-barra {
  background: linear-gradient(90deg, #e11d48, #fb7185);   /* rose */
  /* Pulsa no fim: com tempo curto, cor sozinha passa batido. */
  animation: wtempoPulsa .85s ease-in-out infinite;
}
.wtempo--urgente .wtempo-barra::after { animation-duration: .8s; }

@keyframes wtempoPulsa {
  50% { opacity: .5; }
}

/* ACABOU: cinza, parado, sem brilho — e CHEIA, nao vazia.
 *
 * Zero de tempo restante daria largura zero, e o componente virava uma faixa
 * vazia que parece bug (o dono olhou um quiz encerrado e disse "nao to nem
 * vendo a barra"). Cheia e cinza comunica "esse tempo acabou" e mantem o
 * componente na tela. */
.wtempo--fim .wtempo-barra {
  width: 100% !important;
  background: rgba(100, 116, 139, .55);
  animation: none;
  transition: none;
}
.dark .wtempo--fim .wtempo-barra { background: rgba(148, 163, 184, .45); }
/* `animation: none` junto do `display: none`: sem cancelar, o navegador segue
 * mantendo um ciclo de animacao pra um elemento que ninguem ve. */
.wtempo--fim .wtempo-barra::after { display: none; animation: none; }

/* Quem pediu menos movimento nao ganha brilho nem pulso — mas a barra continua
 * encolhendo, porque ali a informacao E o movimento. */
@media (prefers-reduced-motion: reduce) {
  .wtempo-barra::after { display: none; }
  .wtempo--urgente .wtempo-barra { animation: none; }
}