/* Balbuu Timer — a CENA única: as 3 telas moram no mesmo céu (PROMPT-FINAL).
   escolher → viagem → chegada é só o data-modo da <main> mudando: a viagem voa pela MESMA trilha
   que acendeu na escolha. Cores só por token (DESIGN.md do Balbuu + pecas/marca.css). */

:root{
  --fundo-app: var(--grafite);
  --txt-claro: #FFFFFF;                    /* texto sobre o céu escuro: branco do manual (neutro) */
  --txt-claro-2: rgba(255,255,255,.88);
  --txt-destaque: var(--amarelo);          /* nome do destino */
  --borda-clara: rgba(255,255,255,.42);
  --botao-claro: rgba(21,39,58,.62);       /* navy translúcido: botão legível em cima do céu */
  --acao-txt: var(--grafite);              /* texto sobre laranja: navy, nunca branco */
  --veu: rgba(21,39,58,.35);               /* ~35% de navy por cima do céu: trilha, número e Balbuu saltam */
}

html,body{height:100%;overflow:hidden;background:var(--fundo-app);color:var(--txt-claro)}
body{font-family:'Nunito',system-ui,sans-serif}
[hidden]{display:none !important}
.so-leitor{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.cena{position:fixed;inset:0;overflow:hidden}

/* ---------- o céu (parado: nada pisca, nada se mexe) ---------- */
.ceu{
  position:absolute;inset:0;
  background:linear-gradient(var(--veu),var(--veu)),url(../img/fundo/ceu-em-pe.jpg?v=16) center / cover no-repeat,var(--fundo-app);
}
@media (orientation:landscape){
  .ceu{background:linear-gradient(var(--veu),var(--veu)),url(../img/fundo/ceu-deitado.jpg?v=16) center / cover no-repeat,var(--fundo-app)}
}

/* ---------- a trilha ---------- */
.trilha{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.trilha-linha,.trilha-ate{fill:none;stroke:var(--amarelo);stroke-width:3;stroke-linecap:round;stroke-dasharray:2 10;opacity:.45}
/* escolhendo: a trilha inteira · viajando e chegando: só até o destino */
.trilha-ate,
.cena[data-modo="viagem"] .trilha-linha,
.cena[data-modo="chegada"] .trilha-linha{display:none}
.cena[data-modo="viagem"] .trilha-ate,
.cena[data-modo="chegada"] .trilha-ate{display:inline}
.est polygon{fill:var(--amarelo);stroke:var(--amarelo);stroke-linejoin:round;opacity:.45;transition:opacity .25s}
.est.acesa polygon{opacity:1}
.est.apagada polygon{fill:none;stroke:var(--azul);opacity:1}
.est .halo{fill:var(--amarelo);opacity:0;transform-box:fill-box;transform-origin:center}
.est.brilha .halo{animation:brilho .7s ease-out}
.cena[data-modo="escolher"] .est.sob{display:none}     /* embaixo da planetinha: só na viagem */
@keyframes brilho{0%{opacity:.6;transform:scale(.5)}100%{opacity:0;transform:scale(1.8)}}

.terra,.destino,.balbuu-parado,.balbuu-festa{position:absolute}
/* a chegada: amassa e estica com o PÉ no chão (a origem é o pé: 95,9% da altura dos quadros alinhados) */
.balbuu-festa{transform-origin:50% 95.9%}
/* chegando voando: o Balbuu de perfil aparece até pousar; o de pé espera invisível no lugar dele */
.cena[data-modo="chegada"].pousando .balbuu{display:block}
.cena[data-modo="chegada"].pousando .balbuu-festa{visibility:hidden}
.terra svg,.destino svg,.destino img{width:100%;height:100%;object-fit:contain;display:block;overflow:visible}
.balbuu-parado,.balbuu-festa{pointer-events:none;object-fit:contain}
.destino{pointer-events:none;transition:transform 1.2s ease}
.destino.perto{transform:scale(1.12)}

/* ---------- as 10 planetinhas (as paradas do tempo) ---------- */
.paradas{position:absolute;inset:0;pointer-events:none;transition:opacity .3s}
.parada{
  position:absolute;pointer-events:auto;border:0;background:none;padding:0;cursor:pointer;
  display:flex;align-items:center;justify-content:center;border-radius:9999px;
}
.parada .forma{position:relative;display:flex;align-items:center;justify-content:center;transition:transform .2s}
.parada svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.parada .corpo{transition:opacity .2s}
.parada .miolo{fill:var(--grafite)}
.parada .destaque{fill:none;stroke:var(--amarelo);opacity:0;transition:opacity .2s}
.parada .num{position:relative;font-family:'Baloo 2',cursive;font-weight:800;line-height:1;color:var(--txt-claro);padding-top:.08em}
/* a escolhida: inconfundível (o planeta de verdade atrás, anel amarelo, um pouco maior) */
.parada[aria-pressed="true"] .forma{transform:scale(1.1)}
.parada[aria-pressed="true"] .corpo{opacity:0}
.parada[aria-pressed="true"] .destaque{opacity:1}
.cor-turq .corpo .bola{fill:var(--turq)}
.cor-amarelo .corpo .bola{fill:var(--amarelo)}
.cor-azul .corpo .bola{fill:var(--azul)}
.cor-rosa .corpo .bola{fill:var(--rosa)}
.parada .contorno{fill:none;stroke:var(--grafite)}
.parada .cratera{fill:var(--grafite);opacity:.22}
.parada .brilho{fill:var(--card);opacity:.4}
.parada .anel-planeta{fill:none;stroke:var(--card);opacity:.55}
.parada:focus-visible{outline:3px solid var(--amarelo);outline-offset:2px}

/* ---------- o Balbuu voando DE FRENTE (voo-folha.webp: 6 quadros de 520 px, a asa sobe e desce) ----------
   ⛔ O voo de perfil (voo-perfil.webp, 2 quadros de 162 px) SAIU em 24/09: palavra do Filipe, "parece um
   print, voando errado com a asa, mal recortado". */
.balbuu{
  position:absolute;left:0;top:0;pointer-events:none;z-index:2;
  width:var(--b);height:var(--b);
  background:url(../img/balbuu/voo-folha.webp?v=16) 0 0 / 600% 100% no-repeat;
  transform-origin:50% 50%;will-change:transform;
  animation:bater .5s steps(6) infinite;
}
@keyframes bater{to{background-position-x:calc(var(--b) * -6)}}

/* ---------- a GRADE de estrelas da viagem (js/grade.js): 1 estrela = 10 s ---------- */
.grade{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;display:none}
.cena[data-modo="viagem"] .grade,.cena[data-modo="chegada"] .grade{display:block}
.cena[data-modo="viagem"] .trilha,.cena[data-modo="chegada"] .trilha,
.cena[data-modo="viagem"] .terra,.cena[data-modo="chegada"] .terra{display:none}
.gr-est polygon{fill:var(--amarelo);stroke:var(--amarelo);stroke-linejoin:round}
.gr-est .caroco{fill:var(--amarelo);opacity:0}
/* comida: some a estrela, fica o "caroço" (um pontinho apagado), como o caroço da maçã */
.gr-est.comida .miolo{display:none}
.gr-est.comida .caroco{opacity:.35}
.cena.pausado .balbuu{animation-play-state:paused}

/* ---------- em cima ---------- */
.topo{
  position:absolute;left:0;right:0;top:0;z-index:5;
  display:flex;align-items:center;gap:12px;
  padding:max(10px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) 6px max(12px,env(safe-area-inset-left));
}
/* ⚠️ seletor com a MESMA força que .btn-redondo perde pra ele (o que vem depois ganha): por isso
   o "esconde tudo" começa em .cena (mais forte) e cada tela mostra só os seus (achado no print) */
.cena .topo > *{display:none}
.destino-nome,.relogio{flex:1 1 auto;min-width:0;text-align:center}
.destino-nome{font-family:'Baloo 2',cursive;font-weight:800;line-height:1.05;font-size:clamp(22px,6.4vw,34px);color:var(--txt-destaque)}
.relogio{font-family:'Baloo 2',cursive;font-weight:700;line-height:1;font-size:28px;color:var(--txt-claro-2);font-variant-numeric:tabular-nums}
/* sem "order": a ordem do HTML já é a da tela (o leitor de tela lê na mesma ordem que o olho vê) */
.cena .topo > .btn-som{display:flex}
.cena[data-modo="escolher"] .btn-dado,
.cena[data-modo="viagem"] .btn-segurar,
.cena[data-modo="chegada"] .btn-inicio{display:flex}
.cena[data-modo="escolher"] .destino-nome,
.cena[data-modo="viagem"] .relogio,
.cena[data-modo="chegada"] .destino-nome{display:block}

.btn-redondo{
  flex:0 0 auto;width:56px;height:56px;border-radius:9999px;
  border:1px solid var(--borda-clara);background:var(--botao-claro);color:var(--txt-claro);
  display:flex;align-items:center;justify-content:center;cursor:pointer;
}
.btn-redondo svg{width:30px;height:30px}
.btn-dado{width:60px;height:60px}
.btn-redondo:focus-visible,.btn-acao:focus-visible{outline:3px solid var(--amarelo);outline-offset:3px}

.btn-segurar{position:relative}
.btn-segurar .anel{position:absolute;inset:-3px;width:calc(100% + 6px);height:calc(100% + 6px);transform:rotate(-90deg);overflow:visible}
.btn-segurar .anel circle{fill:none;stroke:var(--laranja);stroke-width:4;stroke-linecap:round;stroke-dasharray:170;stroke-dashoffset:170;transition:stroke-dashoffset .2s}
.btn-segurar.segurando .anel circle{stroke-dashoffset:0;transition:stroke-dashoffset 2s linear}
.btn-segurar .icone{display:flex}
.dica-sair{
  position:absolute;z-index:6;left:max(12px,env(safe-area-inset-left));top:calc(max(10px,env(safe-area-inset-top)) + 64px);
  padding:6px 12px;border-radius:9999px;border:1px solid var(--borda-clara);background:var(--fundo-app);
  font-weight:800;font-size:15px;color:var(--txt-claro);opacity:0;transition:opacity .2s;pointer-events:none;
}
.dica-sair.mostrar{opacity:1}

/* ---------- embaixo: a ação, grande, ao alcance do polegar ---------- */
.base{
  position:absolute;left:0;right:0;bottom:0;z-index:5;
  display:flex;justify-content:center;align-items:center;
  padding:8px max(16px,env(safe-area-inset-right)) max(14px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));
}
.cena .base > *{display:none}
.cena[data-modo="escolher"] .btn-vai,
.cena[data-modo="chegada"] .btn-denovo{display:flex}
.cena[data-modo="viagem"] .btn-pausa{display:flex}
.btn-acao{
  width:min(100%,340px);height:66px;border-radius:9999px;cursor:pointer;
  align-items:center;justify-content:center;gap:10px;
  font-family:'Baloo 2',cursive;font-weight:800;font-size:34px;line-height:1;padding-top:4px;
  background:var(--laranja);color:var(--acao-txt);border:2px solid var(--laranja);
  transition:transform .2s;
}
.btn-acao:active{transform:scale(.96)}
.btn-acao .icone{display:flex}
.btn-acao .icone svg{width:30px;height:30px}
/* desligado se marca por COR (contorno tracejado), não por transparência: o texto continua legível */
.btn-vai:disabled{background:var(--botao-claro);color:var(--laranja);border-style:dashed;cursor:default}
.btn-pausa{width:72px;height:72px}
.btn-pausa svg{width:32px;height:32px}

/* ---------- o que aparece em cada tela ---------- */
.cena[data-modo="escolher"] .balbuu,
.cena[data-modo="escolher"] .balbuu-festa,
.cena[data-modo="viagem"] .balbuu-parado,
.cena[data-modo="viagem"] .balbuu-festa,
.cena[data-modo="chegada"] .balbuu-parado,
.cena[data-modo="chegada"] .balbuu{display:none}
.cena[data-modo="viagem"] .paradas,
.cena[data-modo="chegada"] .paradas{opacity:0;pointer-events:none}
.cena[data-modo="viagem"] .parada,
.cena[data-modo="chegada"] .parada{pointer-events:none}
.cena[data-modo="viagem"] .est.fora,
.cena[data-modo="chegada"] .est.fora{display:none}

@media (prefers-reduced-motion:reduce){
  .parada .forma,.parada .corpo,.parada .destaque,.btn-acao,.est polygon{transition:none}
  /* o Balbuu ainda anda (é a informação), mas sem bater asa nem brilho */
  .balbuu{animation:none}
  .est.brilha .halo{animation:none}
}

/* ---------- botõezinhos de canto da tela de escolher: "i" pro adulto (js/sobre.js) e
   "Conheça o Balbuu" (js/conheca.js). Cada um tem a sua chave; o canto vem de CENA.cantoLivre ---------- */
.canto{
  position:absolute;z-index:4;width:48px;height:48px;border-radius:9999px;padding:4px;cursor:pointer;
  border:1px solid var(--borda-clara);background:var(--botao-claro);color:var(--txt-claro);
  display:flex;align-items:center;justify-content:center;
}
.canto img{width:100%;height:100%;object-fit:contain;display:block}
.canto svg{width:26px;height:26px}
.canto:focus-visible{outline:3px solid var(--amarelo);outline-offset:3px}
.cena:not([data-modo="escolher"]) .canto{display:none !important}
.cartao-fundo{position:fixed;inset:0;z-index:20;background:rgba(21,39,58,.72);display:flex;align-items:center;justify-content:center;padding:16px}
.cartao{
  width:min(100%,360px);background:var(--card);color:var(--grafite);border:1px solid var(--bordacard);border-radius:24px;
  padding:20px 20px 16px;display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center;
}
.cartao-logo{width:88px;height:88px;object-fit:contain}
.cartao-titulo{font-family:'Baloo 2',cursive;font-weight:800;font-size:26px;line-height:1.1}
.cartao-texto{font-size:17px;line-height:1.4}
.cartao-ir{display:flex;width:100%;font-size:24px;height:60px}
.cartao-voltar{
  min-height:48px;padding:0 24px;border:1px solid var(--grafite);border-radius:9999px;background:none;cursor:pointer;
  color:var(--grafite);font-family:'Nunito',system-ui,sans-serif;font-weight:800;font-size:18px;
}
.cartao-voltar:focus-visible,.cartao-link:focus-visible{outline:3px solid var(--laranja);outline-offset:3px}
.cartao-link{
  display:flex;align-items:center;justify-content:center;width:100%;min-height:52px;padding:0 16px;
  border:1px solid var(--bordacard);border-radius:16px;color:var(--grafite);text-decoration:none;
  font-family:'Nunito',system-ui,sans-serif;font-weight:800;font-size:18px;
}