/* Prévia de lançamento do Greg: pergunta, três pontos, marca, contador. Só tokens de tokens.css.
   Estados: abertura (primeira visita), final (contador), chegou (zerou), sem movimento e sem JS (vão direto ao final). */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; min-height: 100vh; min-height: 100dvh; background: var(--fundo); color: var(--texto); font: var(--t-corpo); display: grid; grid-template-rows: 1fr auto; }
:focus-visible { outline: 2px solid var(--foco); outline-offset: 3px; border-radius: var(--raio-controle); }

.palco { position: relative; display: grid; place-items: center; padding: var(--e5) var(--e3); text-align: center; }

/* abertura: a pergunta e os três pontos ocupam o centro, por cima do estado final ainda apagado */
.abertura { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; }
.abertura > * { grid-area: 1 / 1; opacity: 0; transition: opacity var(--mov-entrada) var(--curva); }
.pergunta { margin: 0; font: var(--t-voz); font-size: clamp(2.4rem, 8vw, 5.5rem); line-height: 1.1; color: var(--texto); }
.pontos { display: flex; gap: clamp(1rem, 3vw, 2rem); }
.pontos i { display: block; width: clamp(1rem, 3vw, 1.75rem); aspect-ratio: 1; border-radius: 50%; background: var(--acento); opacity: 0; transform: scale(.4); transition: opacity var(--mov-entrada) var(--curva), transform var(--mov-entrada) var(--curva); }
[data-fase="pergunta"] .pergunta { opacity: 1; }
[data-fase^="pontos"] .pontos { opacity: 1; }
[data-fase="pontos-1"] .pontos i:nth-child(-n+1),
[data-fase="pontos-2"] .pontos i:nth-child(-n+2),
[data-fase="pontos-3"] .pontos i { opacity: 1; transform: scale(1); }
[data-fase="pontos-3"] .pontos i { animation: pulso 1.2s var(--curva) infinite; }
[data-fase="pontos-3"] .pontos i:nth-child(2) { animation-delay: .2s; }
[data-fase="pontos-3"] .pontos i:nth-child(3) { animation-delay: .4s; }
@keyframes pulso { 0%, 60%, 100% { opacity: 1; } 30% { opacity: .35; } }

/* estado final: marca, contador grande, data */
.final { display: grid; justify-items: center; gap: var(--e4); width: 100%; }
.marca { margin: 0; line-height: 0; transition: opacity var(--mov-entrada) var(--curva), transform var(--mov-entrada) var(--curva); }
.marca svg { display: block; height: clamp(4rem, 13vw, 7.5rem); width: auto; fill: var(--texto); }
.marca .ponto { fill: var(--acento); }
.resto { display: grid; justify-items: center; gap: var(--e4); width: 100%; transition: opacity var(--mov-entrada) var(--curva), transform var(--mov-entrada) var(--curva); }

.contador { display: flex; justify-content: center; align-items: flex-start; gap: clamp(.5rem, 2.4vw, 2rem); margin: 0; width: 100%; }
.contador div { display: grid; justify-items: center; min-width: 2ch; }
.contador b { font: 700 clamp(3.4rem, 17vw, 12rem)/1 var(--fonte); letter-spacing: -.04em; font-variant-numeric: tabular-nums; color: var(--texto); }
.contador span { font: var(--t-rotulo); letter-spacing: .08em; text-transform: uppercase; color: var(--meta); margin-top: var(--e2); }
.contador .sep { font: 700 clamp(3.4rem, 17vw, 12rem)/1 var(--fonte); color: var(--acento); min-width: 0; transform: translateY(-.06em); }
.quando { margin: 0; font: var(--t-lead); color: var(--texto-2); }
.quando span { display: block; font: var(--t-meta); color: var(--meta); margin-top: var(--e1); }
.quando strong { color: var(--texto); font-weight: 600; }

.chegou { display: none; margin: 0; font: var(--t-voz); font-size: clamp(2.4rem, 8vw, 5.5rem); line-height: 1.1; }
.chegou a { color: var(--acento-texto); text-decoration-thickness: 2px; text-underline-offset: .12em; }
[data-zerou] .contador, [data-zerou] .quando { display: none; }
[data-zerou] .chegou { display: block; }

/* enquanto a abertura roda, o final espera apagado; a marca entra antes do contador */
[data-fase="pergunta"] .marca, [data-fase^="pontos"] .marca { opacity: 0; transform: scale(.94); }
[data-fase="pergunta"] .resto, [data-fase^="pontos"] .resto, [data-fase="marca"] .resto { opacity: 0; transform: translateY(var(--e3)); }

.pe { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--e2) var(--e4); padding: var(--e3) var(--e3) var(--e4); font: var(--t-meta); color: var(--meta); }
.pe a { color: var(--acento-texto); text-underline-offset: 3px; display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--e2); }
.pe button { font: inherit; color: var(--meta); background: none; border: 0; padding: var(--e2); min-height: 44px; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.pe button:hover { color: var(--texto); }
.pe button[hidden] { display: none; }
.pe { transition: opacity var(--mov-entrada) var(--curva); }
[data-fase="pergunta"] .pe, [data-fase^="pontos"] .pe, [data-fase="marca"] .pe { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  .abertura { display: none; }
  .marca, .resto, .pontos i { transition: none; animation: none; }
}