/*
 * 66_celebracao.css — PACOTE liga-celebracao (2309) · §2.9 (docs/GUSTAVO-2309.md)
 * ═══════════════════════════════════════════════════════════════════════════
 * O motor de celebração: confete em CSS, "+N" contando (o contador é do
 * MovimentoHelper — `.contador` já vem de 03_movimento.css, esta folha só
 * estiliza a MOLDURA ao redor dele), o medidor de nível "enchendo".
 *
 * ─── A REGRA A MAIS, ALÉM DE "SÓ transform E opacity" (MARCA.md §2) ───────
 *
 * Toda `animation`/`@keyframes` desta folha mora dentro de
 * `@media (prefers-reduced-motion: no-preference)` — e não só confia no
 * apagador global (`02_base.css`/`03_movimento.css`, que zera a DURAÇÃO para
 * 0,01ms sob `reduce`). O aceite deste pacote é mais estrito que "quase
 * instantâneo": `getAnimations()` tem que voltar VAZIO, e depender só da
 * duração zerada é apostar numa corrida com o instante em que o Playwright
 * chama esse método. Aqui a declaração de animação simplesmente NÃO EXISTE
 * sob `reduce` — sem corrida nenhuma para vencer. O confete e o medidor têm
 * um segundo cinto de segurança em `celebracao_controller.js`: os dois só são
 * criados/animados se `matchMedia("(prefers-reduced-motion: reduce)")` for
 * falso, então sob `reduce` nem chega a existir elemento para animar.
 *
 * Todo `animation`/`.animate()` daqui usa `fill: none` (o padrão) — NUNCA
 * `forwards`/`both`. Um efeito que "segura o quadro final" continua "em
 * efeito" (e por isso RELEVANTE para `getAnimations()`) pelo tempo que durar
 * essa retenção; o valor final de cada peça já está escrito como estado
 * ESTÁTICO (o texto final do contador, o `value` final do `<progress>` do
 * medidor — nenhum dos dois é CSS), e a animação só passa por cima dele — ao
 * acabar, `fill: none` devolve o controle para esse mesmo valor estático,
 * sem "estalo" visual. O medidor, em especial, nem usa `animation`/
 * `.animate()`: é `celebracao_controller` escrevendo `progress.value` via
 * `requestAnimationFrame` (a mesma técnica do `contador_controller`) — ver o
 * comentário na regra `.celebracao__medidor`, abaixo.
 */

.celebracao {
  position: relative;
  margin: var(--esp-4) 0;
  overflow: visible;
}

.celebracao__lista {
  display: flex;
  flex-direction: column;
  gap: var(--esp-3);
  list-style: none;
  margin: 0;
  padding: 0;
}

.celebracao__item {
  padding: var(--esp-4);
  border-radius: var(--raio-3);
  background: var(--fundo-elevado);
  border: 1px solid var(--borda);
  text-align: center;
}

.celebracao__item--pontos { border-color: var(--cor-pontos) }
.celebracao__item--nivel { border-color: var(--cor-marca) }
.celebracao__item--curso { border-color: var(--cor-aprovado-forte, var(--cor-marca)) }

.celebracao__rotulo {
  margin: 0 0 var(--esp-1);
  font-size: var(--texto-sm);
  color: var(--texto-tenue);
  font-weight: var(--peso-medio);
}

.celebracao__numero { margin: 0 }
.celebracao__contador {
  font-size: var(--texto-xl, 2rem);
  font-weight: var(--peso-forte);
  color: var(--cor-pontos);
}

.celebracao__texto { margin: 0; font-size: var(--texto-md) }
.celebracao__texto--com-icone {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--esp-2);
}

/* ── O medidor de nível "enchendo" ────────────────────────────────────────
   O `<progress>` de `shared/_medidor` (onda D) já é o elemento certo: `value`/
   `max` são atributo HTML, não `style=`, que a CSP do projeto (nonce em
   `style-src`) descarta em produção — ver o comentário de `shared/_medidor` e
   de `02_base.css`. O "enchendo" é `celebracao_controller` escrevendo
   `progress.value` quadro a quadro (a mesma técnica do `contador_controller`
   para o número), então não é CSS `animation`/`transition` nem Web Animations
   — não entra em `getAnimations()` em nenhum cenário, com ou sem
   `prefers-reduced-motion`. Esta regra só dá o respiro acima do texto. */
.celebracao__medidor { margin-top: var(--esp-3) }

/* ── Confete ────────────────────────────────────────────────────────────── */
.celebracao__confete {
  position: absolute;
  inset: -1rem 0 auto 0;
  height: 6rem;
  overflow: hidden;
  pointer-events: none;
}

.celebracao__confete-pedaco {
  position: absolute;
  top: 0;
  left: var(--x, 50%);
  width: 0.5rem;
  height: 0.75rem;
  border-radius: 1px;
  opacity: 0;
}

.celebracao__confete-pedaco--1 { background: var(--cor-pontos) }
.celebracao__confete-pedaco--2 { background: var(--cor-marca) }
.celebracao__confete-pedaco--3 { background: var(--cor-ritmo, var(--cor-marca-forte)) }

@media (prefers-reduced-motion: no-preference) {
  .celebracao__confete-pedaco {
    animation: confete-cai 1.1s var(--curva-saida, ease-in) var(--atraso, 0ms);
  }

  @keyframes confete-cai {
    0%   { opacity: 1; transform: translateY(0) rotate(0deg) }
    100% { opacity: 0; transform: translateY(5.5rem) rotate(var(--rotacao, 360deg)) }
  }
}