/* =====================================================================
   TEMA "SEGREDO" · chá revelação. Paleta, fontes, a seção do segredo e a abertura do balão.
   Para um tema novo, troque este arquivo (e o link das fontes no index.html).
   O layout comum fica em base.css (carregado antes) e não muda de um tema para outro.
   ===================================================================== */
:root {
  --cor-menino: #5ea6dc;
  --cor-menina: #ea86ab;
  --cor-fundo: #fdf8f3;
  --cor-fundo-2: #f5eff8;        /* lilás bem claro: rosa + azul misturados */
  --cor-cartao: rgba(255, 255, 255, .72);
  --cor-linha: rgba(123, 104, 200, .24);
  --cor-texto: #2f2a45;
  --cor-suave: #6c6582;
  --cor-destaque: #7b68c8;       /* violeta: o meio do caminho entre os dois */
  --cor-destaque-claro: #ddd5f6;
  --cor-destaque-escuro: #4f3fa0;
  --cor-brilho: #ffffff;
  --cor-hover: rgba(123, 104, 200, .12);
  --cor-campo: #ffffff;
  --cor-flutuante: rgba(255, 255, 255, .9);
  --cor-botao-texto: #ffffff;
  --cor-papel: #ffffff;
  --cor-papel-verso: #f3eefa;
  --cor-papel-tinta: #2f2a45;
  --cor-enfeite: 234, 134, 171; 94, 166, 220; 123, 104, 200;  /* rosa; azul; violeta */
  --cor-confete: #ea86ab, #5ea6dc, #ffd36e, #7b68c8, #ffffff;

  --fundo-capa:
    radial-gradient(60% 50% at 0% 10%, rgba(234, 134, 171, .22), transparent 70%),
    radial-gradient(60% 50% at 100% 10%, rgba(94, 166, 220, .22), transparent 70%),
    var(--cor-fundo);
  --fundo-abertura: linear-gradient(115deg, #fde6ef 0%, #f3ecfb 50%, #e3f0fb 100%);
  --botao-fundo: linear-gradient(100deg, #e57aa3 0%, #8b77d4 52%, #4f9ad6 100%);
  --botao-sombra: 0 14px 30px -14px rgba(123, 104, 200, .7), inset 0 1px 0 rgba(255, 255, 255, .35);
  --sombra-foto: 0 26px 50px -30px rgba(60, 40, 90, .45);
  --sombra-flutuante: 0 10px 26px -14px rgba(60, 40, 90, .4);
  --gradiente-nome: linear-gradient(100deg, #e57aa3 0%, #b07ccd 30%, #7b68c8 50%, #6a8fd6 70%, #4f9ad6 100%);

  --fonte-titulo: 'Fredoka', 'Trebuchet MS', system-ui, sans-serif;
  --fonte-texto: 'Nunito', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --italico: normal;

  --raio: 24px;
  --largura: 1040px;
  --ease: cubic-bezier(.22, .8, .24, 1);
}

/* ---------- ajustes do tema ---------- */
.nome { font-weight: 600; letter-spacing: -.01em; background-size: 100% 100%; animation: none; }
.idade-num, .num, .grande, .recado-texto, .titulo-sec, .revelacao-titulo, .rodape-nome { font-weight: 500; }
.titulo-sec, .contagem-hoje, .contagem-depois, .recado-assinatura { color: var(--cor-destaque-escuro); }
.rotulo, .cartao h3, .prazo { color: var(--cor-destaque-escuro); }
.botao.principal { color: var(--cor-botao-texto); text-shadow: 0 1px 2px rgba(40, 20, 80, .35); }
.retrato::before { border-color: rgba(123, 104, 200, .35); }
.ilustracao { border-radius: 999px 999px 18px 18px; background: linear-gradient(160deg, #fde3ee, #efe9fb 50%, #dfeefb); }
.palpite-menino[aria-pressed="true"] { background: rgba(94, 166, 220, .16); border-color: var(--cor-menino); }
.palpite-menina[aria-pressed="true"] { background: rgba(234, 134, 171, .16); border-color: var(--cor-menina); }

/* ---------- seção do segredo ---------- */
.revelacao { background: var(--cor-fundo); }
.segredo { width: min(62vw, 230px); margin: 0 auto 22px; }
.segredo svg { width: 100%; height: auto; overflow: visible; }
.segredo .tampa { transform-box: fill-box; transform-origin: 50% 100%; transition: transform .9s var(--ease); }
.segredo .interrogacao { animation: pisca 2.4s ease-in-out 8; transform-box: fill-box; transform-origin: center; }
@keyframes pisca { 50% { transform: scale(1.08) rotate(-4deg); } }
.revelacao-titulo { color: var(--cor-destaque-escuro); }
html[data-revelado="menino"] .revelacao-titulo { color: var(--cor-menino); }
html[data-revelado="menina"] .revelacao-titulo { color: var(--cor-menina); }
html[data-revelado="menino"] .segredo .tampa, html[data-revelado="menina"] .segredo .tampa { transform: translateY(-26%) rotate(-14deg); }
html[data-revelado="menino"] .segredo .interrogacao, html[data-revelado="menina"] .segredo .interrogacao { display: none; }
.segredo .balao-saida { opacity: 0; transition: opacity .6s ease .4s, transform 1.2s var(--ease) .3s; transform: translateY(20%); transform-box: fill-box; }
html[data-revelado="menino"] .segredo .balao-saida, html[data-revelado="menina"] .segredo .balao-saida { opacity: 1; transform: none; }
html[data-revelado="menino"] .segredo .balao-saida path { fill: var(--cor-menino); }
html[data-revelado="menina"] .segredo .balao-saida path { fill: var(--cor-menina); }
.revelacao .botao { margin-top: 18px; }

/* ---------- abertura: o balão do segredo ---------- */
.abertura-balao .balao {
  position: absolute; left: 50%; top: 44vh; width: min(46vw, 210px); transform: translate(-50%, -50%);
  pointer-events: none; animation: flutua 3.4s ease-in-out 6 alternate;
}
.abertura-balao .balao svg { width: 100%; height: auto; overflow: visible; filter: drop-shadow(0 18px 24px rgba(60, 40, 90, .2)); }
@keyframes flutua { from { transform: translate(-50%, -52%) rotate(-3deg); } to { transform: translate(-50%, -46%) rotate(3deg); } }
.abertura-titulo {
  position: absolute; left: 0; right: 0; top: 14vh; text-align: center; pointer-events: none;
  font: 600 clamp(1.8rem, 8vw, 2.6rem)/1.1 var(--fonte-titulo); color: var(--cor-destaque-escuro);
  transition: opacity .4s ease;
}
.abertura-balao .abertura-dica { color: var(--cor-destaque-escuro); }
.estilhacos { position: absolute; left: 50%; top: 40vh; width: 0; height: 0; pointer-events: none; }
.estilhacos i {
  position: absolute; width: 14px; height: 8px; border-radius: 4px; opacity: 0;
  background: var(--c, var(--cor-menina)); transform: rotate(var(--a)) translateX(0);
}
.abertura-balao.abrindo .balao { animation: estoura .32s ease-in forwards; }
@keyframes estoura { 0% { transform: translate(-50%, -50%) scale(1); } 70% { transform: translate(-50%, -50%) scale(1.22); opacity: 1; } 100% { transform: translate(-50%, -50%) scale(1.5); opacity: 0; } }
.abertura-balao.abrindo .estilhacos i { animation: voa .7s cubic-bezier(.2, .7, .3, 1) .22s forwards; }
@keyframes voa { 0% { opacity: 1; transform: rotate(var(--a)) translateX(10px); } 100% { opacity: 0; transform: rotate(var(--a)) translateX(min(42vw, 230px)) rotate(200deg); } }
.abertura-balao.abrindo .abertura-titulo { opacity: 0; }