/* agradecimento do fim da campanha: a festa (canvas) na primeira tela, a carta embaixo no papel */
.festa {
  position: relative;
  height: 92vh;
  height: 92svh;  /* svh: a barra do navegador aparecendo e sumindo não remonta a festa */
  min-height: 30rem;
  overflow: hidden;
  background: #070A1C;
  color: var(--papel);
}
.festa canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  touch-action: pan-y;
  -webkit-tap-highlight-color: transparent;
}
/* sem JavaScript (ou antes dele) o recado aparece em texto; com a festa rodando, fica só pra leitor de tela */
.festa-texto { position: relative; max-width: 40rem; margin: 0 auto; padding: 24vh 1rem 2rem; text-align: center; }
.festa-texto h1 {
  margin: 0 0 1rem;
  font: 900 clamp(3.5rem, 19vw, 8rem)/.86 "Big Shoulders Display", Impact, sans-serif;
  text-transform: uppercase;
  color: var(--amarelo);
}
.festa-texto p { margin: 0; font-size: 1.25rem; font-weight: 700; }
.festa.animada .festa-texto {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.festa-botoes { position: absolute; top: .5rem; right: .5rem; z-index: 1; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .1rem .25rem; }
.festa-botoes :is(button, a) {
  display: flex; align-items: center; min-height: 2.75rem; padding: .5rem .6rem;
  border: 0; background: none; color: var(--papel);
  font: 700 1rem "Atkinson Hyperlegible", system-ui, sans-serif;
  text-decoration: underline; text-underline-offset: .2em;
  cursor: pointer;
}
/* começar: o navegador só deixa tocar som depois de um toque, então a festa e a música começam juntas aqui */
.comecar {
  position: absolute; left: 50%; top: 50%; z-index: 2;
  transform: translate(-50%, -50%);
  display: grid; justify-items: center; gap: .15rem;
  min-width: 15rem; padding: 1.1rem 2rem;
  border: 3px solid var(--tinta); border-radius: 999px;
  background: var(--amarelo); color: var(--tinta);
  font: 700 1.375rem/1.2 "Atkinson Hyperlegible", system-ui, sans-serif;
  cursor: pointer;
  animation: comecar-pulsa 1.6s ease-in-out infinite;
}
.comecar small { font-size: 1rem; font-weight: 400; }
.comecar:disabled { animation: none; cursor: progress; }
@keyframes comecar-pulsa { 50% { transform: translate(-50%, -50%) scale(1.05); } }
@media (prefers-reduced-motion: reduce) { .comecar { animation: none; } }
/* volta pro link que a pessoa abriu (app.js manda a primeira entrada pra cá) */
.seguir {
  position: fixed; left: 50%; bottom: max(1rem, env(safe-area-inset-bottom)); z-index: 5;
  transform: translateX(-50%);
  display: flex; align-items: center; justify-content: center;
  min-height: 3.5rem; padding: .85rem 1.6rem;
  border: 3px solid var(--tinta); border-radius: 999px;
  background: var(--amarelo); color: var(--tinta);
  font-size: 1.1875rem; font-weight: 700; text-decoration: none; white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
body.com-seguir { padding-bottom: 6rem; }

.carta { max-width: 38rem; margin: 0 auto; padding: 2.5rem 1rem 1rem; font-size: 1.1875rem; line-height: 1.6; }
.carta p { margin: 0 0 1rem; }
.carta h2 {
  margin: 2.75rem 0 .6rem;
  font: 900 clamp(2.1rem, 9vw, 2.75rem)/.95 "Big Shoulders Display", Impact, sans-serif;
  text-transform: uppercase;
  color: var(--vermelho);
}
.numero { margin: 0; font: 900 clamp(5.5rem, 31vw, 10rem)/.82 "Big Shoulders Display", Impact, sans-serif; text-transform: uppercase; color: var(--vermelho); }
.carta .numero-legenda { margin: .75rem 0 1.75rem; font-size: 1.375rem; font-weight: 700; line-height: 1.35; }
.carta .numero-antes { margin: 0 0 .25rem; font: 900 2rem/1 "Big Shoulders Display", Impact, sans-serif; text-transform: uppercase; color: var(--vermelho); }
.carta .destaque { margin: 1.5rem 0; padding-left: 1rem; border-left: .35rem solid var(--vermelho); font-size: 1.375rem; font-weight: 700; line-height: 1.4; }
.carta .rede { margin: 0; }
.rede-lista { line-height: 1.7; }
.rede-lista a { color: var(--tinta); font-weight: 700; }
.carta .rede-canais .rede-lista { margin: 0; font-size: 1rem; }
.historia-botao {
  display: block; margin-top: 1.5rem; padding: 1.1rem 1rem; border-radius: .9rem;
  background: var(--vermelho); color: var(--papel);
  font-size: 1.25rem; font-weight: 700; text-align: center; text-decoration: none;
}
.historia-botao:hover { background: var(--tinta); }
.carta .assinatura { margin-top: 1.75rem; font: 900 2rem/1.05 "Big Shoulders Display", Impact, sans-serif; text-transform: uppercase; }
.levar { margin-top: 2.75rem; padding: .25rem 1.25rem 1.25rem; border-radius: 1.1rem; background: var(--papel); }
.levar h2 { margin-top: 1rem; }
.levar .zap { display: flex; align-items: center; justify-content: center; gap: .5rem; min-height: 3.75rem; font-size: 1.1875rem; text-decoration: none; }
.levar .zap::before { content: ""; flex: none; width: 1.5rem; height: 1.5rem; background: url(/icones/whatsapp.svg) center / contain no-repeat; }
.baixar-festa {
  display: flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 3.5rem; margin-top: .75rem;
  border: 2px solid var(--tinta); border-radius: .7rem;
  color: var(--tinta); font-size: 1.125rem; font-weight: 700; text-decoration: none;
}
.baixar-festa::before { content: ""; flex: none; width: 1.25rem; height: 1.25rem; background: url(/icones/baixar.svg) center / contain no-repeat; }
.baixar-festa small { color: var(--cinza); font-size: .9375rem; font-weight: 400; }
.link-zap { display: block; margin-top: .9rem; color: var(--tinta); font-weight: 700; text-align: center; }
.creditos { max-width: 38rem; margin: 0 auto; padding: 1.5rem 1rem 3rem; color: var(--cinza); font-size: .875rem; line-height: 1.5; }
.creditos a { color: inherit; }

/* gravando o vídeo (?gravar=540x960): só a festa, do tamanho pedido */
body.gravando { overflow: hidden; }
body.gravando :is(main, footer, .festa-botoes, .seguir, .comecar) { display: none !important; }
body.gravando .festa { position: fixed; top: 0; left: 0; min-height: 0; }