/* ==========================================================================
   CONVITE ANTONELLA 3 ANOS
   Arte pesada = imagens em assets/. Aqui só layout, camadas e animação.

   Índice
     1. Paleta e tokens (cores, tempos e easings da abertura)
     2. Base
     3. Componentes (ícone, pill, chip, botão, sombra no chão)
     4. Tela de entrada (camadas)
     5. Abertura: fases da timeline
     6. Cena + herói + folha
     7. Herói: entrada em cascata + repouso
     8. Folha: contagem e jornada de 3 etapas
     9. Confete
    10. Keyframes
    11. Movimento reduzido
   ========================================================================== */

/* ---------- 1. PALETA E TOKENS ------------------------------------------ */
:root {
  /* Paleta (use só estas cores) */
  --azul: #4a9bd4;
  --navy: #2a3a63;
  --ceu: #bfe3f7;
  --dourado: #f6bf4e;
  --dourado-claro: #ffdd8c;
  --creme: #fff8ec;
  --menta: #7fd1a8;

  /* Derivados: apenas misturas da paleta */
  --navy-suave: color-mix(in srgb, var(--navy) 70%, var(--creme));
  --ceu-topo: color-mix(in srgb, var(--azul) 45%, var(--ceu));
  --creme-quente: color-mix(in srgb, var(--dourado-claro) 22%, var(--creme));

  /* Sombras: sempre suaves e desfocadas */
  --sombra-sm: 0 6px 20px color-mix(in srgb, var(--navy) 10%, transparent);
  --sombra: 0 16px 44px color-mix(in srgb, var(--navy) 14%, transparent);
  --sombra-dourada: 0 14px 36px color-mix(in srgb, var(--dourado) 55%, transparent);

  /* Tempos e easings da abertura.
     Os valores reais vêm das constantes no topo do js/app.js, que
     sobrescrevem estas variáveis; aqui ficam só como padrão. */
  --t-antecipa: 200ms;
  --t-chacoalho: 450ms;
  --t-flash: 250ms;
  --t-onda: 600ms;
  --t-pop: 320ms;
  --t-cortina: 800ms;
  --t-entrada: 560ms;
  --t-letra: 520ms;
  --ease-overshoot: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-inercia: cubic-bezier(0.76, 0, 0.24, 1);
  --ease-letra: cubic-bezier(0.2, 1.4, 0.4, 1);
  --ease-suave: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-saida: cubic-bezier(0.2, 0.7, 0.3, 1);

  /* Tipografia */
  --fonte-titulo: "Baloo 2", "Arial Rounded MT Bold", system-ui, sans-serif;
  --fonte-texto: "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Forma */
  --raio: 24px;
  --raio-pilula: 999px;

  /* Safe areas */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --margem-esq: calc(20px + var(--safe-left));
  --margem-dir: calc(20px + var(--safe-right));
}

/* ---------- 2. BASE ------------------------------------------------------ */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  background: var(--creme);
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--fonte-texto);
  line-height: 1.55;
  color: var(--navy);
  /* Um mundo só: azul no topo descendo para creme quente na base */
  background: linear-gradient(180deg,
    var(--ceu-topo) 0,
    var(--ceu) 70vh,
    var(--creme-quente) 100%);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
body.travado { overflow: hidden; }

[hidden] { display: none !important; }
img { display: block; max-width: 100%; height: auto; }
button { font: inherit; color: inherit; }
h1, h2, h3, p { margin: 0; }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

:focus-visible {
  outline: 3px solid var(--azul);
  outline-offset: 3px;
  border-radius: 10px;
}

/* ---------- 3. COMPONENTES ---------------------------------------------- */
.icone {
  width: 1.25em;
  height: 1.25em;
  flex-shrink: 0;
}

.pill,
.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  border-radius: var(--raio-pilula);
  background: color-mix(in srgb, var(--creme) 88%, transparent);
  color: var(--navy);
  font-weight: 800;
  box-shadow: var(--sombra-sm);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
}
.pill { padding: 0.55em 1.25em; font-size: 0.95rem; letter-spacing: 0.02em; }
.chip { padding: 0.45em 1.1em; font-size: 1rem; }
.pill .icone,
.chip .icone { color: var(--dourado); }

.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55em;
  min-height: 56px;
  padding: 0.8em 1.8em;
  border: 0;
  border-radius: var(--raio-pilula);
  font-family: var(--fonte-titulo);
  font-weight: 800;
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
  user-select: none;
}
.botao[disabled] { cursor: default; }
.botao--dourado {
  background: linear-gradient(180deg, var(--dourado-claro), var(--dourado));
  color: var(--navy);
  box-shadow: var(--sombra-dourada);
}

/* Sombra elíptica e desfocada no "chão", sob os pés */
.sombra-chao {
  position: absolute;
  z-index: -1;
  left: 50%;
  bottom: 1%;
  width: 58%;
  height: 7%;
  translate: -50% 50%;
  border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--navy) 30%, transparent), transparent);
  filter: blur(6px);
}

/* Imagem ausente: some o ícone quebrado, o espaço (proporção) continua */
.img-ausente img { visibility: hidden; }

/* ---------- 4. TELA DE ENTRADA ------------------------------------------ */
.entrada { display: none; }

.js .entrada {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: var(--ceu); /* aparece só se fundo.jpg faltar */
  transform-origin: 50% 100%;
}

/* z0: cenário pronto. Gradiente da paleta embaixo = fallback */
.entrada__fundo {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    url("../assets/fundo.jpg") center top / cover no-repeat,
    linear-gradient(180deg, var(--ceu-topo), var(--ceu) 60%, var(--creme));
}

/* z1: brilho dourado suave e constante atrás do personagem */
.entrada__luz {
  position: absolute;
  z-index: 1;
  left: 50%;
  top: 52%;
  width: min(120vw, 620px);
  aspect-ratio: 1;
  translate: -50% -50%;
  border-radius: 50%;
  background: radial-gradient(closest-side,
    color-mix(in srgb, var(--dourado-claro) 55%, transparent),
    color-mix(in srgb, var(--creme) 25%, transparent) 55%,
    transparent);
  animation: respirar 4s ease-in-out infinite;
  pointer-events: none;
}

.entrada__palco {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(10px, 2.2vh, 20px);
  width: 100%;
  padding:
    calc(16px + var(--safe-top)) var(--margem-dir)
    calc(20px + var(--safe-bottom)) var(--margem-esq);
}
.entrada__pill {
  position: relative;
  z-index: 3;
  animation: cair 0.8s var(--ease-overshoot) 0.1s both;
}

/* z2: personagem. "isolation" cria a pilha local: flash e onda ficam atrás */
.entrada__personagem {
  --alt: min(54vh, 500px);
  position: relative;
  z-index: 2;
  isolation: isolate;
  height: var(--alt);
  aspect-ratio: 683 / 1024; /* proporção fixa: zero layout shift */
  max-width: 82vw;
  animation: subir 0.9s var(--ease-overshoot) 0.25s both;
}
@supports (height: 1svh) {
  .entrada__personagem { --alt: min(54svh, 500px); }
}
.ent-squash,
.ent-chacoalho,
.ent-flutua {
  width: 100%;
  height: 100%;
  will-change: transform;
}
.ent-squash { transform-origin: 50% 96%; } /* amassa a partir dos pés */
.ent-chacoalho { transform-origin: 50% 90%; }
.ent-flutua { position: relative; animation: flutuar 3.4s ease-in-out 1.2s infinite; }
.entrada__personagem img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center bottom;
  -webkit-user-drag: none;
  user-select: none;
}
.entrada__personagem .sombra-chao { animation: sombra-flutuar 3.4s ease-in-out 1.2s infinite; }

/* Pontos de efeito centrados na caixa de presente
   (centro da caixa na imagem: ~59% da largura, ~62% da altura) */
.caixa-brilho,
.ent-flash,
.ent-onda {
  position: absolute;
  left: 59%;
  top: 62%;
  aspect-ratio: 1;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  will-change: transform, opacity;
}
/* Brilho pulsando por cima da caixa durante o chacoalho */
.caixa-brilho {
  width: 70%;
  margin: -35% 0 0 -35%;
  background: radial-gradient(closest-side,
    color-mix(in srgb, var(--creme) 90%, transparent),
    color-mix(in srgb, var(--dourado-claro) 70%, transparent) 45%,
    transparent);
  mix-blend-mode: screen;
}
/* Clarão radial com raios de luz (atrás do personagem) */
.ent-flash {
  z-index: -1;
  width: 230%;
  margin: -115% 0 0 -115%;
  background: radial-gradient(closest-side,
    var(--creme) 0%,
    color-mix(in srgb, var(--dourado-claro) 85%, transparent) 28%,
    color-mix(in srgb, var(--dourado-claro) 25%, transparent) 55%,
    transparent 72%);
}
.ent-flash::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: repeating-conic-gradient(from 0deg,
    color-mix(in srgb, var(--creme) 85%, transparent) 0deg 5deg,
    transparent 5deg 18deg);
  -webkit-mask: radial-gradient(closest-side, #000 20%, transparent 95%);
          mask: radial-gradient(closest-side, #000 20%, transparent 95%);
}
/* Shockwave: anel que expande e some */
.ent-onda {
  z-index: -1;
  width: 320%;
  margin: -160% 0 0 -160%;
  border: 5px solid var(--creme);
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--dourado) 55%, transparent),
    0 0 30px color-mix(in srgb, var(--dourado-claro) 80%, transparent),
    inset 0 0 30px color-mix(in srgb, var(--dourado-claro) 60%, transparent);
  transform: scale(0);
}

.entrada__botao {
  position: relative;
  z-index: 3;
  min-height: 60px;
  padding-inline: 2.2em;
  font-size: 1.3rem;
  /* entrada usa transform; o pulso idle usa "scale" (propriedade separada)
     para não brigar com o afundar do clique */
  animation:
    subir 0.8s var(--ease-overshoot) 0.5s both,
    pulsar 2.4s ease-in-out 1.8s infinite;
  transition:
    transform var(--t-antecipa) var(--ease-overshoot),
    box-shadow var(--t-antecipa) ease;
  will-change: transform;
}

/* ---------- 5. ABERTURA: FASES DA TIMELINE ------------------------------
   O JS adiciona as classes na ordem; elas se acumulam no .entrada.
   ------------------------------------------------------------------------- */

/* Fase 1 — Antecipação: botão afunda, personagem "agacha" */
.fase-antecipa .entrada__botao {
  animation-play-state: paused;
  transform: translateY(4px) scale(0.95);
  box-shadow: 0 6px 16px color-mix(in srgb, var(--dourado) 40%, transparent);
}
.fase-antecipa .ent-flutua,
.fase-antecipa .entrada__personagem .sombra-chao { animation-play-state: paused; }
.fase-antecipa .ent-squash {
  transform: scale(1.04, 0.92);
  transition: transform var(--t-antecipa) var(--ease-overshoot);
}

/* Fase 2 — Chacoalho crescente + caixa pulsando de brilho */
.fase-chacoalha .ent-squash {
  transform: none; /* solta o agachamento com overshoot */
}
.fase-chacoalha .ent-chacoalho { animation: chacoalhar var(--t-chacoalho) ease-in-out both; }
.fase-chacoalha .caixa-brilho { animation: caixa-pulsa var(--t-chacoalho) ease-in both; }

/* Fase 3 — Estouro: pop do personagem, clarão e shockwave */
.fase-estouro .ent-chacoalho { animation: estouro-pop var(--t-pop) var(--ease-overshoot) both; }
.fase-estouro .caixa-brilho { animation: none; opacity: 0; }
.fase-estouro .ent-flash { animation: flash var(--t-flash) ease-out both; }
.fase-estouro .ent-onda { animation: onda var(--t-onda) var(--ease-saida) both; }

/* Fase 4 — Cortina sobe com inércia, afastando (scale + fade) */
.fase-cortina {
  transform: translateY(-120%) scale(1.04);
  opacity: 0;
  border-bottom-left-radius: 50% 12%;
  border-bottom-right-radius: 50% 12%;
  pointer-events: none;
  transition:
    transform var(--t-cortina) var(--ease-inercia),
    opacity var(--t-cortina) cubic-bezier(0.7, 0, 0.9, 0.4),
    border-radius var(--t-cortina) var(--ease-inercia);
  will-change: transform, opacity;
}

/* ---------- 6. CENA + HERÓI + FOLHA --------------------------------------
   A cena é fixa e fica atrás de tudo. O herói (textos) rola por cima dela,
   e a .folha sobe cobrindo a cena. O personagem nunca "boia": fica sempre
   em pé no gramado, e quem se move é o conteúdo.
   ------------------------------------------------------------------------- */
.convite { position: relative; outline: none; }

.cena {
  /* largura da dupla dançando; os balões se posicionam a partir dela */
  --larg: min(98vw, 640px, calc(44vh * 1000 / 791));
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
/* z0: céu + gramado, ancorado embaixo para o chão ficar sempre visível.
   Gradiente da paleta por baixo = fallback se o arquivo faltar. */
.cena__fundo {
  position: absolute;
  inset: 0;
  background:
    url("../assets/fundo-conteudo.jpg") center bottom / cover no-repeat,
    linear-gradient(180deg, var(--ceu-topo), var(--ceu) 70%, var(--menta));
}

/* z1: cacho de balões, discreto no canto esquerdo, sempre acima da
   cabeça da amiga (altura calculada a partir do tamanho da dupla) */
.cena__baloes {
  position: absolute;
  z-index: 1;
  left: calc(-4% + var(--safe-left));
  bottom: max(21%, calc(7% + var(--safe-bottom) + var(--larg) * 0.791 * 0.86));
  width: clamp(104px, 27vw, 210px);
  aspect-ratio: 480 / 720;
  opacity: 0.92;
}
.cena__baloes-flutua {
  width: 100%;
  height: 100%;
  transform-origin: 50% 100%;
  will-change: transform;
}
.cena__baloes img { width: 100%; height: 100%; object-fit: contain; }

/* z2: dupla dançando em pé no gramado (pés a ~7% da base da tela).
   Imagem horizontal (1000x791): o tamanho vem da largura, limitado pela
   altura da tela para não encostar no título em telas baixas. */
.cena__personagem {
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: calc(7% + var(--safe-bottom));
  width: var(--larg);
  aspect-ratio: 1000 / 791; /* proporção fixa: zero layout shift */
  translate: -50% 0;
  isolation: isolate;
}
@supports (height: 1svh) {
  .cena { --larg: min(98vw, 640px, calc(44svh * 1000 / 791)); }
}
.cena__flutua { width: 100%; height: 100%; transform-origin: 50% 98%; will-change: transform; }
.cena__personagem img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center bottom;
}
/* pés na imagem: amiga em x=28.9%, Bluey em x=66.7%, base em y=97.9% */
.cena__sombra { width: 22%; height: 6%; bottom: 2.1%; }
.cena__sombra--amiga { left: 28.9%; }
.cena__sombra--bluey { left: 66.7%; }

/* Herói: só textos, por cima do céu */
.heroi {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding:
    calc(clamp(22px, 5vh, 56px) + var(--safe-top)) var(--margem-dir)
    calc(64px + var(--safe-bottom)) var(--margem-esq);
}
@supports (height: 1svh) { .heroi { min-height: 100svh; } }

/* Nome como "arte": duas camadas de letras empilhadas (montadas no JS)
     .nome-arte__contorno -> letras creme engrossadas (contorno) + sombra macia
     .nome-arte__tinta    -> letras navy por cima
   Os contornos se fundem num único "adesivo" e nenhum contorno corta a
   letra vizinha. */
.nome-arte {
  display: grid;
  width: 100%;
  font-family: var(--fonte-titulo);
  font-weight: 800;
  font-size: clamp(2.7rem, 15vw, 6.25rem);
  line-height: 1.05;
  white-space: nowrap;
}
.nome-arte__contorno,
.nome-arte__tinta { grid-area: 1 / 1; }
.nome-arte__contorno {
  color: var(--creme);
  -webkit-text-stroke: 0.2em var(--creme);
  filter: drop-shadow(0 0.09em 0.12em color-mix(in srgb, var(--navy) 26%, transparent));
}
.nome-arte__tinta { color: var(--navy); }
.nome-arte .letra { display: inline-block; }

/* Frase com contorno creme fino (sombras sem deslocamento = só contorno) */
.heroi__frase {
  margin-top: 0.1em;
  font-family: var(--fonte-titulo);
  font-weight: 800;
  font-size: clamp(1.4rem, 6.4vw, 2.1rem);
  line-height: 1.2;
  color: var(--navy);
  text-shadow:
    0 0 2px var(--creme), 0 0 2px var(--creme), 0 0 3px var(--creme),
    0 0 4px var(--creme), 0 0 6px var(--creme),
    0 4px 14px color-mix(in srgb, var(--navy) 18%, transparent);
}

/* O "3": número gordo dourado com o mesmo tratamento do nome.
   O próprio elemento é a camada de contorno (creme engrossado + sombra);
   o ::after, por cima, é a tinta dourada em degradê (lida de data-n). */
.numero-arte {
  position: relative;
  display: inline-block;
  margin-inline: 0.08em;
  font-size: 1.75em;
  line-height: 0.9;
  vertical-align: -0.12em;
  color: var(--creme);
  -webkit-text-stroke: 0.2em var(--creme);
  text-shadow: none;
  filter: drop-shadow(0 0.08em 0.1em color-mix(in srgb, var(--navy) 28%, transparent));
}
.numero-arte::after {
  content: attr(data-n);
  position: absolute;
  inset: 0;
  -webkit-text-stroke: 0;
  background: linear-gradient(180deg,
    var(--dourado-claro) 18%,
    var(--dourado) 62%,
    color-mix(in srgb, var(--dourado) 82%, var(--navy)) 100%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}

.heroi__chip { margin-top: clamp(12px, 2vh, 20px); }

/* Fixo no pé da primeira tela, abaixo dos pés do personagem */
.heroi__rolar {
  position: absolute;
  left: 50%;
  bottom: calc(8px + var(--safe-bottom));
  translate: -50% 0;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 12px 6px 16px;
  border: 0;
  border-radius: var(--raio-pilula);
  background: color-mix(in srgb, var(--creme) 85%, transparent);
  box-shadow: var(--sombra-sm);
  color: var(--navy);
  font-size: 0.82rem;
  font-weight: 800;
  cursor: pointer;
}

/* Folha de conteúdo: sobe por cima da cena */
.folha {
  position: relative;
  z-index: 2;
  min-height: 70vh;
  padding: 14px var(--margem-dir) calc(48px + var(--safe-bottom)) var(--margem-esq);
  border-radius: 32px 32px 0 0;
  background: color-mix(in srgb, var(--creme) 94%, transparent);
  box-shadow: 0 -16px 48px color-mix(in srgb, var(--navy) 14%, transparent);
}
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .folha {
    background: color-mix(in srgb, var(--creme) 80%, transparent);
    -webkit-backdrop-filter: blur(18px) saturate(1.15);
            backdrop-filter: blur(18px) saturate(1.15);
  }
}
.folha__puxador {
  display: block;
  width: 44px;
  height: 5px;
  margin: 0 auto 8px;
  border-radius: 5px;
  background: color-mix(in srgb, var(--navy) 18%, transparent);
}

/* ---------- 7. HERÓI: ENTRADA EM CASCATA + REPOUSO ----------------------
   Cada elemento recebe --atraso (calculado no JS a partir das constantes).
   ------------------------------------------------------------------------- */
.js [data-entra],
.js .nome-arte .letra { opacity: 0; }

.heroi-entra [data-entra] {
  animation: entrar var(--t-entrada) var(--ease-overshoot) var(--atraso, 0ms) both;
  will-change: transform, opacity;
}
.heroi-entra [data-entra="personagem"] {
  animation: entrar-pop calc(var(--t-entrada) + 140ms) var(--ease-overshoot) var(--atraso, 0ms) both;
  transform-origin: 50% 100%;
}
.heroi-entra [data-entra="baloes"] {
  animation: entrar-baloes 900ms var(--ease-suave) var(--atraso, 0ms) both;
}
.heroi-entra .nome-arte .letra {
  animation: montar-letra var(--t-letra) var(--ease-letra) var(--atraso, 0ms) both;
  will-change: transform, opacity;
}

/* Repouso: personagem flutua; balões e o "3" em contratempo (ritmos e
   atrasos diferentes) para não ficar robótico */
/* dupla dança: pulinhos com balanço de um lado para o outro */
.heroi-entra .cena__flutua {
  animation: dancar 2.6s ease-in-out var(--atraso-idle, 0ms) infinite;
}
.heroi-entra .cena__sombra {
  animation: sombra-danca 1.3s ease-in-out var(--atraso-idle, 0ms) infinite;
}
.heroi-entra .cena__baloes-flutua {
  animation: baloes-idle 6.2s ease-in-out calc(var(--atraso-idle, 0ms) + 1.3s) infinite;
}
.heroi-entra .numero-arte {
  animation: numero-idle 3.7s ease-in-out calc(var(--atraso-idle, 0ms) + 0.7s) infinite;
}
.heroi-entra .heroi__rolar .icone {
  animation: quicar 1.8s ease-in-out calc(var(--atraso-idle, 0ms) + 400ms) infinite;
}

/* ---------- 8. FOLHA: BLOCOS, CONTAGEM E JORNADA ------------------------ */
.folha__miolo {
  width: 100%;
  max-width: 560px;
  margin-inline: auto;
}

.bloco { padding-top: 26px; }
.bloco + .bloco { padding-top: 44px; }
.bloco__cabeca { text-align: center; margin-bottom: 18px; }
.bloco__titulo {
  font-family: var(--fonte-titulo);
  font-weight: 800;
  font-size: clamp(1.75rem, 7.6vw, 2.3rem);
  line-height: 1.05;
  color: var(--navy);
}
.bloco__sub {
  margin-top: 4px;
  color: var(--navy-suave);
  font-weight: 700;
}

/* Cartão base (creme, sombra suave) */
.contagem__item,
.etapa {
  background: var(--creme);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
}

/* --- Contagem: todos os números no mesmo navy --- */
.contagem {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
.contagem__item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 16px 4px 14px;
}
/* acento discreto: tracinho dourado na base */
.contagem__item::after {
  content: "";
  position: absolute;
  bottom: 7px;
  left: 50%;
  width: 22px;
  height: 4px;
  translate: -50% 0;
  border-radius: 4px;
  background: var(--dourado);
  opacity: 0.8;
}
.contagem__numero {
  font-family: var(--fonte-titulo);
  font-weight: 800;
  font-size: clamp(1.9rem, 9vw, 2.8rem);
  line-height: 1;
  color: var(--navy);
  font-variant-numeric: tabular-nums;
}
.contagem__numero.tique { animation: tique 0.4s var(--ease-overshoot); }
.contagem__rotulo {
  margin: 6px 0 6px;
  font-size: 0.74rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--navy-suave);
}
.contagem__fim {
  padding: 18px;
  border-radius: var(--raio);
  background: var(--creme);
  box-shadow: var(--sombra);
  text-align: center;
  font-family: var(--fonte-titulo);
  font-weight: 800;
  font-size: 1.5rem;
}

/* --- Trilha de progresso 1 -> 2 -> 3 --- */
.trilha {
  display: flex;
  align-items: flex-start;
  margin: 0 0 18px;
  padding: 0 4px;
  list-style: none;
}
.trilha__passo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 76px;
  flex-shrink: 0;
  transition: opacity 0.4s ease;
}
.trilha__bolinha {
  position: relative;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--creme);
  color: var(--navy);
  box-shadow: var(--sombra-sm);
  font-family: var(--fonte-titulo);
  font-weight: 800;
  font-size: 1.15rem;
}
/* fundo colorido em camada própria: troca de cor por opacity */
.trilha__bolinha::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--menta);
  opacity: 0;
  transform: scale(0.4);
  transition: opacity 0.35s ease, transform 0.5s var(--ease-overshoot);
}
.trilha__num,
.trilha__check {
  position: relative;
  grid-area: 1 / 1;
  transition: opacity 0.3s ease, transform 0.45s var(--ease-overshoot);
}
.trilha__check { opacity: 0; transform: scale(0.3) rotate(-25deg); color: var(--navy); }
.trilha__nome {
  font-size: 0.78rem;
  font-weight: 800;
  color: var(--navy-suave);
  white-space: nowrap;
}
.trilha__linha {
  flex: 1;
  height: 4px;
  margin-top: 19px;
  border-radius: 4px;
  background: color-mix(in srgb, var(--navy) 12%, transparent);
  overflow: hidden;
}
.trilha__linha span {
  display: block;
  height: 100%;
  background: var(--menta);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.6s var(--ease-inercia);
}
.trilha__linha.cheia span { transform: scaleX(1); }

.trilha__passo[data-estado="bloqueada"] { opacity: 0.45; }
.trilha__passo[data-estado="ativa"] .trilha__bolinha {
  box-shadow: 0 0 0 3px var(--dourado), var(--sombra-dourada);
}
.trilha__passo[data-estado="concluida"] .trilha__bolinha::before { opacity: 1; transform: none; }
.trilha__passo[data-estado="concluida"] .trilha__num { opacity: 0; transform: scale(0.3); }
.trilha__passo[data-estado="concluida"] .trilha__check { opacity: 1; transform: none; }
.trilha__passo[data-estado="concluida"] .trilha__nome { color: var(--navy); }

/* --- Etapas (acordeão progressivo) --- */
.etapas { display: grid; gap: 12px; }

.etapa {
  position: relative;
  overflow: hidden;
  transition: box-shadow 0.4s ease, background-color 0.4s ease;
}
.etapa[data-estado="bloqueada"] {
  background: color-mix(in srgb, var(--creme) 55%, transparent);
  box-shadow: none;
}
.etapa[data-estado="bloqueada"] .etapa__cabeca { opacity: 0.5; }
.etapa[data-estado="ativa"] { box-shadow: 0 0 0 2px var(--dourado-claro), var(--sombra); }
.etapa.destravou { animation: destravar 0.6s var(--ease-overshoot); }

.etapa__cabeca {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 72px;
  padding: 14px 14px 14px 16px;
  transition: opacity 0.4s ease;
}
.etapa__selo {
  position: relative;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: 14px;
  background: color-mix(in srgb, var(--navy) 8%, transparent);
  color: var(--navy);
  font-family: var(--fonte-titulo);
  font-weight: 800;
  font-size: 1.1rem;
}
.etapa__selo::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  opacity: 0;
  transform: scale(0.5);
  transition: opacity 0.35s ease, transform 0.5s var(--ease-overshoot);
}
.etapa__selo > * {
  position: relative;
  grid-area: 1 / 1;
  opacity: 0;
  transform: scale(0.4);
  transition: opacity 0.3s ease, transform 0.45s var(--ease-overshoot);
}
.etapa[data-estado="bloqueada"] .etapa__selo-cadeado,
.etapa[data-estado="ativa"] .etapa__selo-num,
.etapa[data-estado="concluida"] .etapa__selo-check { opacity: 1; transform: none; }
.etapa[data-estado="ativa"] .etapa__selo::before {
  background: linear-gradient(180deg, var(--dourado-claro), var(--dourado));
  opacity: 1;
  transform: none;
}
.etapa[data-estado="concluida"] .etapa__selo::before {
  background: var(--menta);
  opacity: 1;
  transform: none;
}

.etapa__textos { flex: 1; min-width: 0; }
.etapa__titulo {
  font-family: var(--fonte-titulo);
  font-weight: 800;
  font-size: 1.25rem;
  line-height: 1.15;
  color: var(--navy);
}
.etapa__resumo {
  display: block;
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--navy-suave);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-height: 0;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 0.35s ease 0.15s, transform 0.4s var(--ease-suave) 0.15s;
}
/* resumo só aparece com a etapa concluída e fechada */
.etapa[data-estado="concluida"][data-aberta="false"] .etapa__resumo {
  max-height: none;
  opacity: 1;
  transform: none;
}

.etapa__editar {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border: 0;
  border-radius: 50%;
  background: var(--creme);
  color: var(--navy);
  box-shadow: var(--sombra-sm);
  cursor: pointer;
  opacity: 0;
  transform: scale(0.5);
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.45s var(--ease-overshoot);
}
.etapa[data-estado="concluida"][data-aberta="false"] .etapa__editar {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
.etapa__editar:active { transform: scale(0.9); }

/* Corpo que abre/fecha: a altura anima via grid-template-rows (0fr <-> 1fr)
   e o conteúdo entra com fade + slide */
.etapa__corpo {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.5s var(--ease-suave);
}
.etapa[data-aberta="true"] .etapa__corpo { grid-template-rows: 1fr; }
.etapa__conteudo {
  min-height: 0;
  overflow: hidden;
  padding-inline: 16px;
  opacity: 0;
  transform: translateY(-10px);
  transition: opacity 0.25s ease, transform 0.35s var(--ease-suave);
  visibility: hidden;
}
.etapa[data-aberta="true"] .etapa__conteudo {
  opacity: 1;
  transform: none;
  visibility: visible;
  transition: opacity 0.4s ease 0.12s, transform 0.5s var(--ease-suave) 0.12s, visibility 0s;
}
.etapa__conteudo > * { padding-bottom: 18px; }

/* --- Formulário "Quem vai" --- */
.quem { display: grid; gap: 14px; }
.campo { display: grid; gap: 6px; }
.campo__rotulo { font-weight: 800; }
.campo__input {
  width: 100%;
  min-height: 54px;
  padding: 14px 18px;
  border: 2px solid color-mix(in srgb, var(--ceu) 70%, var(--creme));
  border-radius: 18px;
  background: color-mix(in srgb, var(--ceu) 14%, var(--creme));
  color: var(--navy);
  font: inherit;
  font-size: 16px; /* evita zoom automático no iOS */
  -webkit-appearance: none;
          appearance: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.campo__input::placeholder { color: color-mix(in srgb, var(--navy) 42%, var(--creme)); }
.campo__input:focus {
  outline: none;
  border-color: var(--azul);
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--azul) 18%, transparent);
}
.campo__input[aria-invalid="true"] {
  border-color: var(--dourado);
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--dourado) 28%, transparent);
  animation: tremer 0.4s ease;
}
.campo__erro {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.9rem;
  font-weight: 700;
}
.campo__erro .icone { color: var(--dourado); }

.contador {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 10px 10px 12px;
  border-radius: 20px;
  background: color-mix(in srgb, var(--dourado-claro) 22%, var(--creme));
}
.contador__info { display: flex; align-items: center; gap: 12px; }
.contador__icone {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 14px;
  background: var(--creme);
  color: var(--navy);
  box-shadow: var(--sombra-sm);
}
.contador__rotulo { display: block; font-weight: 800; line-height: 1.2; }
.contador__dica { display: block; font-size: 0.78rem; font-weight: 700; color: var(--navy-suave); }
.contador__controles { display: flex; align-items: center; gap: 4px; }
.contador__botao {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: var(--creme);
  color: var(--navy);
  box-shadow: var(--sombra-sm);
  cursor: pointer;
  transition: transform 0.2s var(--ease-overshoot), opacity 0.2s ease;
}
.contador__botao:active { transform: scale(0.88); }
.contador__botao:disabled { opacity: 0.35; cursor: default; }
.contador__valor {
  min-width: 2ch;
  text-align: center;
  font-family: var(--fonte-titulo);
  font-weight: 800;
  font-size: 1.5rem;
  font-variant-numeric: tabular-nums;
}
.contador__valor.tique { animation: tique 0.35s var(--ease-overshoot); }

/* --- Botões extras --- */
.botao--bloco { width: 100%; }
.botao--grande {
  min-height: 60px;
  font-size: clamp(1.05rem, 4.8vw, 1.25rem);
  white-space: nowrap;
}
.botao--claro {
  background: var(--creme);
  color: var(--navy);
  box-shadow: var(--sombra-sm);
}
.botao { text-decoration: none; transition: transform 0.2s var(--ease-overshoot), box-shadow 0.2s ease; }
.botao:active { transform: scale(0.96); }

/* --- Localização --- */
.local { display: grid; gap: 10px; }
.local__nome {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--fonte-titulo);
  font-weight: 800;
  font-size: 1.15rem;
}
.local__nome .icone { color: var(--dourado); }
.local__endereco { margin-top: -6px; color: var(--navy-suave); font-weight: 700; }
.local__mapa {
  overflow: hidden;
  aspect-ratio: 16 / 11;
  border-radius: 20px;
  background: color-mix(in srgb, var(--ceu) 50%, var(--creme));
  box-shadow: var(--sombra-sm);
}
.local__mapa iframe { display: block; width: 100%; height: 100%; border: 0; }
/* flex: se um botão estiver escondido, o outro ocupa a linha toda */
.local__acoes { display: flex; gap: 10px; }
.local__acoes .botao { flex: 1; padding-inline: 0.8em; font-size: 1.05rem; }

/* Local ainda "A definir": aviso discreto no lugar do mapa */
.local--pendente .local__nome,
.local--pendente .local__endereco {
  padding-inline: 14px;
}
.local--pendente .local__nome {
  padding-top: 14px;
  border-radius: 18px 18px 0 0;
  background: color-mix(in srgb, var(--dourado-claro) 24%, var(--creme));
}
.local--pendente .local__endereco {
  margin-top: -10px;
  padding-bottom: 14px;
  border-radius: 0 0 18px 18px;
  background: color-mix(in srgb, var(--dourado-claro) 24%, var(--creme));
}

/* --- Confirmação final --- */
.final { display: grid; gap: 12px; }
.final__texto { font-weight: 700; color: var(--navy-suave); }
.final__previa {
  margin: 0;
  padding: 14px 16px;
  border-radius: 18px 18px 18px 6px;
  background: color-mix(in srgb, var(--menta) 22%, var(--creme));
  font-size: 0.95rem;
  white-space: pre-line;
}
.final__antes { display: grid; gap: 12px; }

/* --- Tela de sucesso (cada parte entra em cascata) --- */
.sucesso {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding-top: 6px;
  outline: none;
}
.sucesso > * { animation: entrar 0.6s var(--ease-overshoot) both; }
.sucesso > :nth-child(2) { animation-delay: 0.1s; }
.sucesso > :nth-child(3) { animation-delay: 0.25s; }
.sucesso > :nth-child(4) { animation-delay: 0.35s; }
.sucesso > :nth-child(5) { animation-delay: 0.5s; }
.sucesso > :nth-child(6) { animation-delay: 0.6s; }

/* Foto: pop (scale 0 -> 1 com overshoot) junto do confete */
.sucesso > .moldura {
  animation: pop-foto 0.75s var(--ease-letra) both;
}
.moldura {
  position: relative;
  width: min(94%, 360px);
  margin: 6px 0 4px;
  will-change: transform, opacity;
}
/* depois do pop: flutuação idle bem sutil */
.moldura__flutua {
  position: relative;
  animation: foto-idle 4.2s ease-in-out 0.9s infinite;
  will-change: transform;
}
.moldura__quadro {
  overflow: hidden;
  aspect-ratio: 900 / 658; /* proporção fixa: zero layout shift */
  border: 7px solid var(--creme);
  border-radius: 34px;
  /* fundo de "céu" com brilho dourado atrás das personagens */
  background:
    radial-gradient(70% 60% at 50% 72%, color-mix(in srgb, var(--dourado-claro) 55%, transparent), transparent 70%),
    linear-gradient(180deg, color-mix(in srgb, var(--ceu) 85%, var(--creme)), var(--creme));
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--dourado) 85%, transparent),        /* anel dourado */
    0 0 0 10px color-mix(in srgb, var(--dourado-claro) 30%, transparent), /* halo do anel */
    0 18px 44px color-mix(in srgb, var(--navy) 18%, transparent);         /* sombra suave */
}
.moldura__quadro img {
  width: 100%;
  height: 100%;
  padding: 5% 4% 0;
  object-fit: contain;
  object-position: center bottom;
}

/* Selo de check verde: "carimba" e o traço se desenha */
.check-selo {
  display: grid;
  place-items: center;
  width: 60px;
  height: 60px;
  border: 4px solid var(--creme);
  border-radius: 50%;
  background: var(--menta);
  box-shadow: 0 10px 26px color-mix(in srgb, var(--menta) 55%, transparent);
}
.check-selo svg {
  width: 58%;
  height: 58%;
  fill: none;
  stroke: var(--navy);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.check-selo path {
  stroke-dasharray: 22;
  stroke-dashoffset: 22;
  animation: desenhar-check 0.45s ease-out 0.75s forwards;
}
.moldura__check {
  position: absolute;
  right: -8px;
  bottom: -14px;
  animation: carimbo 0.55s var(--ease-letra) 0.45s both;
}
/* sem foto: o check aparece sozinho, maior */
.sucesso__check-solo { display: none; width: 76px; height: 76px; margin-top: 4px; }
.moldura[hidden] + .sucesso__check-solo { display: grid; }

/* Frase tratada: Baloo 800, nome em dourado com sombra macia */
.sucesso__frase {
  margin-top: 18px;
  font-family: var(--fonte-titulo);
  font-weight: 800;
  font-size: clamp(1.45rem, 6.6vw, 1.85rem);
  line-height: 1.15;
  color: var(--navy);
  text-shadow:
    0 0 2px var(--creme), 0 0 4px var(--creme),
    0 6px 18px color-mix(in srgb, var(--navy) 16%, transparent);
}
.sucesso__destaque {
  display: inline-block;
  background: linear-gradient(180deg,
    var(--dourado) 30%,
    color-mix(in srgb, var(--dourado) 72%, var(--navy)) 100%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  text-shadow: none;
  filter: drop-shadow(0 3px 8px color-mix(in srgb, var(--dourado) 45%, transparent));
}
.sucesso__titulo {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  font-weight: 800;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  color: var(--navy-suave);
}

.sucesso__aviso {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 24px;
  margin: 14px 0 10px;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--navy-suave);
}
/* indicador de carregamento discreto */
.carregando {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 2.5px solid color-mix(in srgb, var(--navy) 15%, transparent);
  border-top-color: var(--dourado);
  animation: girar 0.8s linear infinite;
}
.sucesso__aviso.pronto .carregando { display: none; }


/* --- Sugestão de presente: sanfona leve, opcional, fora do fluxo --- */
.bloco--presente { padding-top: 28px; }
.presente {
  border-radius: var(--raio);
  background: color-mix(in srgb, var(--creme) 72%, transparent);
  box-shadow: var(--sombra-sm);
  border: 1.5px dashed color-mix(in srgb, var(--dourado) 55%, transparent);
}
.presente__cabeca {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 64px;
  padding: 12px 16px;
  border: 0;
  background: none;
  color: var(--navy);
  text-align: left;
  cursor: pointer;
}
.presente__icone {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: 14px;
  background: color-mix(in srgb, var(--dourado-claro) 55%, var(--creme));
  color: var(--navy);
}
.presente__textos { flex: 1; min-width: 0; }
.presente__titulo {
  display: inline;
  font-family: var(--fonte-titulo);
  font-weight: 800;
  font-size: 1.12rem;
  line-height: 1.2;
}
.presente__opcional {
  margin-left: 4px;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--navy-suave);
}
.presente__seta {
  flex-shrink: 0;
  color: var(--navy-suave);
  transition: transform 0.45s var(--ease-overshoot);
}
.presente[data-aberta="true"] .presente__seta { transform: rotate(180deg); }

/* altura anima por grid-template-rows (0fr <-> 1fr) + fade/slide */
.presente__corpo {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.5s var(--ease-suave);
}
.presente[data-aberta="true"] .presente__corpo { grid-template-rows: 1fr; }
.presente__conteudo {
  min-height: 0;
  overflow: hidden;
  padding-inline: 16px;
  opacity: 0;
  transform: translateY(-8px);
  visibility: hidden;
  transition: opacity 0.25s ease, transform 0.35s var(--ease-suave), visibility 0s 0.35s;
}
.presente[data-aberta="true"] .presente__conteudo {
  opacity: 1;
  transform: none;
  visibility: visible;
  transition: opacity 0.4s ease 0.12s, transform 0.5s var(--ease-suave) 0.12s, visibility 0s;
}
/* frase de abertura: deixa claro que é opcional e sem obrigação */
.presente__intro {
  padding: 12px 14px;
  border-radius: 16px;
  background: color-mix(in srgb, var(--menta) 18%, var(--creme));
  color: var(--navy);
  font-weight: 700;
  font-size: 0.95rem;
  line-height: 1.45;
}
.presente__lista { display: grid; gap: 8px; margin: 10px 0 16px; padding: 0; list-style: none; }
.presente__item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px 8px 8px;
  border-radius: 16px;
  background: var(--creme);
  font-weight: 700;
}
.presente__item-icone {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  border-radius: 12px;
  background: color-mix(in srgb, var(--ceu) 55%, var(--creme));
  color: var(--navy);
}
.presente__item[data-presente="brinquedos"] .presente__item-icone {
  background: color-mix(in srgb, var(--dourado-claro) 50%, var(--creme));
}
.presente__rotulo { font-weight: 800; }


/* --- Rodapé: "Com carinho, Antonella" --- */
.rodape {
  margin-top: 40px;
  padding-bottom: 8px;
  text-align: center;
}
.rodape__coracao { width: 30px; height: 30px; color: var(--dourado); }
.rodape__com {
  margin-top: 4px;
  font-family: var(--fonte-titulo);
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--navy-suave);
}
.rodape__nome {
  font-family: var(--fonte-titulo);
  font-weight: 800;
  font-size: clamp(2rem, 9vw, 2.6rem);
  line-height: 1.05;
  color: var(--navy);
  text-shadow:
    0 0 2px var(--creme), 0 0 5px var(--creme),
    0 6px 18px color-mix(in srgb, var(--navy) 16%, transparent);
}
.rodape__pais {
  margin-top: 6px;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--navy-suave);
}

/* --- Entrada ao rolar (IntersectionObserver), em cascata --- */
.js [data-revela] {
  opacity: 0;
  transform: translateY(24px) scale(0.98);
  transition:
    opacity 0.6s ease var(--atraso-revela, 0ms),
    transform 0.75s var(--ease-overshoot) var(--atraso-revela, 0ms),
    box-shadow 0.4s ease, background-color 0.4s ease;
}
.js [data-revela].visivel { opacity: 1; transform: none; }

/* ---------- 9. CONFETE --------------------------------------------------- */
.confete {
  position: fixed;
  inset: 0;
  z-index: 200;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* ---------- 10. KEYFRAMES ------------------------------------------------- */

/* Tela de entrada (idle) */
@keyframes flutuar {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}
@keyframes sombra-flutuar {
  0%, 100% { transform: scaleX(1); opacity: 1; }
  50% { transform: scaleX(0.82); opacity: 0.65; }
}
@keyframes pulsar {
  0%, 100% { scale: 1; }
  50% { scale: 1.05; }
}
@keyframes respirar {
  0%, 100% { opacity: 0.85; scale: 1; }
  50% { opacity: 1; scale: 1.06; }
}
@keyframes subir {
  from { opacity: 0; transform: translateY(28px); }
  to { opacity: 1; transform: none; }
}
@keyframes cair {
  from { opacity: 0; transform: translateY(-20px); }
  to { opacity: 1; transform: none; }
}

/* Chacoalho: amplitude cresce (2° -> 6°) e as oscilações ficam mais
   curtas no fim (acelera), terminando um pouco "inflado" para o estouro */
@keyframes chacoalhar {
  0%   { transform: rotate(0); }
  16%  { transform: rotate(-2deg); }
  30%  { transform: rotate(2.5deg); }
  42%  { transform: rotate(-3.2deg); }
  53%  { transform: rotate(3.8deg) scale(1.01); }
  62%  { transform: rotate(-4.5deg) scale(1.015); }
  70%  { transform: rotate(5deg) scale(1.02); }
  77%  { transform: rotate(-5.5deg) scale(1.025); }
  83%  { transform: rotate(6deg) scale(1.03); }
  89%  { transform: rotate(-6deg) scale(1.035); }
  95%  { transform: rotate(5deg) scale(1.04); }
  100% { transform: rotate(0) scale(1.04); }
}
@keyframes caixa-pulsa {
  0%   { opacity: 0; transform: scale(0.6); }
  25%  { opacity: 0.35; transform: scale(0.8); }
  40%  { opacity: 0.15; transform: scale(0.75); }
  60%  { opacity: 0.6; transform: scale(0.95); }
  72%  { opacity: 0.3; transform: scale(0.9); }
  88%  { opacity: 0.85; transform: scale(1.1); }
  100% { opacity: 1; transform: scale(1.25); }
}
@keyframes estouro-pop {
  0%   { transform: scale(1.04); }
  35%  { transform: scale(1.1) translateY(-6px); }
  100% { transform: none; }
}
@keyframes flash {
  0%   { opacity: 0; transform: scale(0.45) rotate(0); }
  30%  { opacity: 1; transform: scale(0.95) rotate(6deg); }
  100% { opacity: 0; transform: scale(1.2) rotate(14deg); }
}
@keyframes onda {
  0%   { opacity: 1; transform: scale(0); }
  70%  { opacity: 0.35; }
  100% { opacity: 0; transform: scale(1); }
}

/* Herói */
@keyframes entrar {
  from { opacity: 0; transform: translateY(24px) scale(0.96); }
  to { opacity: 1; transform: none; }
}
@keyframes entrar-pop {
  0%   { opacity: 0; transform: translateY(40px) scale(0.82); }
  55%  { opacity: 1; transform: translateY(-6px) scale(1.04); }
  100% { opacity: 1; transform: none; }
}
@keyframes montar-letra {
  0%   { opacity: 0; transform: translateY(24px) scale(0.55) rotate(-10deg); }
  45%  { opacity: 1; }
  100% { opacity: 1; transform: none; }
}
@keyframes flutuar-idle {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}
@keyframes dancar {
  0%, 100% { transform: translateY(0) rotate(-1.5deg); }
  25% { transform: translateY(-9px) rotate(0); }
  50% { transform: translateY(0) rotate(1.5deg); }
  75% { transform: translateY(-9px) rotate(0); }
}
/* um pulinho a cada meio ciclo da dança: sombra encolhe quando sobem */
@keyframes sombra-danca {
  0%, 100% { transform: scaleX(1); opacity: 1; }
  50% { transform: scaleX(0.8); opacity: 0.6; }
}
@keyframes sombra-idle {
  0%, 100% { transform: scaleX(1); opacity: 1; }
  50% { transform: scaleX(0.86); opacity: 0.7; }
}
@keyframes numero-idle {
  0%, 100% { transform: translateY(0) rotate(-3deg); }
  50% { transform: translateY(-4px) rotate(3deg); }
}
@keyframes baloes-idle {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50% { transform: translateY(-14px) rotate(2.5deg); }
}
@keyframes entrar-baloes {
  from { opacity: 0; transform: translateY(60px); }
  to { opacity: 1; transform: none; }
}
@keyframes tique {
  0% { transform: scale(1); }
  40% { transform: scale(1.14); }
  100% { transform: scale(1); }
}
@keyframes tremer {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-6px); }
  50% { transform: translateX(6px); }
  75% { transform: translateX(-3px); }
}
@keyframes pop-foto {
  from { opacity: 0; transform: scale(0); }
  to { opacity: 1; transform: none; }
}
@keyframes foto-idle {
  0%, 100% { transform: translateY(0) rotate(-0.6deg); }
  50% { transform: translateY(-4px) rotate(0.6deg); }
}
@keyframes carimbo {
  from { opacity: 0; transform: scale(0) rotate(-25deg); }
  to { opacity: 1; transform: none; }
}
@keyframes desenhar-check { to { stroke-dashoffset: 0; } }
@keyframes girar { to { transform: rotate(360deg); } }
@keyframes destravar {
  0% { transform: scale(0.97); }
  55% { transform: scale(1.02); }
  100% { transform: scale(1); }
}
@keyframes quicar {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(4px); }
}

/* ---------- 11. MOVIMENTO REDUZIDO --------------------------------------
   O JS pula a sequência inteira; aqui garantimos tudo visível e parado.
   ------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
  .js [data-entra],
  .js .nome-arte .letra,
  .js [data-revela] { opacity: 1; transform: none; }
  .check-selo path { stroke-dashoffset: 0; }
}