/* =====================================================================
   K-BaB · O BRANCO COMO PRESENÇA DE APOIO nas páginas do restaurante (02/11/2026)
   ---------------------------------------------------------------------
   Pedido do dono: o Branco volta ao site todo, mas como APOIO (guia, reações, dicas),
   nunca como o foco. Os pratos e o restaurante continuam no centro.
   - Sempre "atrás do balcão": a ilustração é cortada no peito, então ele fica apoiado
     num balcãozinho de lona (.br-balcao) ou na borda de alguma coisa (faixa, vitrine, barra).
   - Mesmo vocabulário de movimento do site (tokens --mv-* de /assets/movimento.css e as
     poses vivas da área Aprenda): sobe de trás do balcão com mola, o balão estoura depois,
     respira e balança de leve. Só transform/opacity. Pausa fora da tela e com a aba escondida.
   - Sem JavaScript: tudo aparece parado. Movimento reduzido: tudo parado, nada escondido.
   - Marcação (ver /assets/branco.js):
       <figure class="br [br-dir|br-noite|br-dica|br-rodape]" style="--br-w:120px">
         <span class="br-palco"><span class="br-corpo"><img class="br-img" …></span><span class="br-balcao"></span></span>
         <figcaption class="br-fala">…</figcaption>
       </figure>
   ===================================================================== */
.br {
  --br-w: 120px;
  --br-tinta: var(--noite, #14203A);
  position: relative;
  display: flex;
  align-items: flex-end;
  gap: 4px;
  margin: 0;
  min-width: 0;
}
.br-palco {
  position: relative;
  flex: none;
  width: var(--br-w);
  aspect-ratio: 1 / 1;
  /* corta só embaixo: é dali que ele sobe, de trás do balcão */
  clip-path: inset(-60% -60% 0 -60%);
}
.br-corpo { display: block; position: absolute; inset: 0 0 4px; }
.br-img {
  display: block;
  width: 100%;
  height: auto;
  max-width: none;
  transform-origin: 50% 100%;
  user-select: none;
  -webkit-user-drag: none;
}
/* o balcão da barraca: lona laranja com a borda escura, cobre o corte do peito */
.br-balcao {
  position: absolute;
  left: -10%;
  right: -10%;
  bottom: 0;
  height: 10px;
  border-radius: 6px 6px 3px 3px;
  background: var(--laranja, #EE6A1F);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .28), 0 2px 0 var(--br-tinta);
}
/* em fundo escuro, a luz das lampadinhas atrás dele (como na área Aprenda) */
.br-noite .br-img { filter: drop-shadow(0 0 14px rgba(255, 201, 74, .42)); }

/* ---------- o balão de fala ---------- */
.br-fala {
  position: relative;
  order: -1;                             /* padrão: balão à esquerda, rabinho apontando para ele */
  max-width: var(--br-fala-max, 16em);
  margin: 0 12px calc(var(--br-w) * .5) 0;
  padding: 8px 14px 9px;
  background: #fff;
  color: var(--noite, #14203A);
  border: 2.5px solid var(--noite, #14203A);
  border-radius: 16px;
  box-shadow: 0 3px 0 var(--noite, #14203A);
  font: 700 16px/1.3 var(--f-lat, system-ui, sans-serif);
  text-align: left;
  text-wrap: balance;
  transform-origin: 100% 100%;
}
.br-fala::after {
  content: "";
  position: absolute;
  right: -9px;
  bottom: 10px;
  width: 14px;
  height: 14px;
  background: #fff;
  border: 2.5px solid var(--noite, #14203A);
  border-left: 0;
  border-bottom: 0;
  transform: rotate(45deg) skew(-8deg, -8deg);
}
.br-fala [lang="ko"] { font-family: var(--f-ko, sans-serif); font-weight: 400; color: var(--laranja-esc, #B4480C); font-size: 1.14em; letter-spacing: 0; white-space: nowrap; }
.br-fala .br-ko { display: block; font-size: 1.2em; line-height: 1.15; }
.br-fala .br-rom { font-weight: 500; font-style: italic; color: var(--tinta-2, #46536E); font-size: .9em; white-space: nowrap; }
.br-fala .br-rot { display: block; font-family: var(--f-mao, cursive); font-weight: 400; font-size: 22px; line-height: 1; color: var(--laranja-esc, #B4480C); margin: 0 0 2px; }
.br-fala .br-rot[lang="ko"] { font-family: var(--f-ko, sans-serif); font-size: 15px; line-height: 1.2; }
/* balão à direita (dicas): rabinho do lado esquerdo */
.br-dir .br-fala { order: 0; margin: 0 0 calc(var(--br-w) * .42) 12px; transform-origin: 0 100%; }
.br-dir .br-fala::after { right: auto; left: -9px; border: 2.5px solid var(--noite, #14203A); border-right: 0; border-top: 0; }

/* ---------- variações por lugar ---------- */
/* dica (Primeira vez, Reservas): Branco pequeno à esquerda, balão à direita */
.br-dica { --br-w: 84px; --br-fala-max: 21em; margin: 18px 0 24px; max-width: 36em; }
.br-dica .br-fala { font-size: 15.5px; }
/* rodapé: mini Branco ao lado do disco do logo */
.br-rodape { --br-w: 66px; --br-tinta: #0B1426; gap: 0; }
.br-rodape .br-fala { font-size: 14px; padding: 5px 11px 6px; margin-bottom: 30px; border-width: 2px; box-shadow: 0 2px 0 #0B1426; border-color: #0B1426; }
.br-rodape .br-fala::after { border-width: 2px; border-color: #0B1426; bottom: 7px; width: 11px; height: 11px; left: -7px; }
.br-rodape .br-fala .br-rom { color: #46536E; }
.rodape-marca { display: flex; align-items: flex-end; gap: 14px; margin-bottom: 16px; }
.rodape-marca .br-rodape .br-fala .br-ko { font-size: 1.15em; }
/* Início e Visite já terminam com o Branco acenando logo acima do rodapé: um só basta */
body:has(.br-aprenda, .br-fecho) .br-rodape { display: none; }
/* dica no formulário de reserva (Preferências) */
.br-form { --br-w: 72px; margin: 14px 0 0; }
.br-form .br-fala { font-size: 15px; font-weight: 650; }
.rodape-marca .logo-disco { margin-bottom: 0 !important; }

/* ---------- Início: faixa "Aprenda coreano com o Branco" ----------
   Ele acena no canto de baixo, atrás do rodapé (a borda da faixa é o balcão). */
.aprenda-in > .br-aprenda {
  --br-w: clamp(104px, 9.6vw, 138px);
  grid-column: 2;
  justify-self: end;
  margin: 0 0 calc(-1 * clamp(64px, 7vw, 104px));
}
@media (max-width: 900px) { .aprenda-in > .br-aprenda { grid-column: 1; } }

/* ---------- Sobre: "Nossa história" — ele conta, atrás da comanda da linha do tempo ----------
   A comanda (que vem depois no HTML) cobre o corte do peito: aqui não precisa do balcãozinho. */
.historia .sec-cab > .br-historia {
  --br-w: clamp(100px, 9vw, 128px);
  margin: 0 clamp(8px, 2vw, 28px) -54px auto;
}
.historia .sec-cab > .br-historia .br-balcao { display: none; }
.historia .sec-cab > .br-historia .br-corpo { inset: 0; }

/* ---------- Visite: faixa da noite "Reserve antes de vir" — ele espera na rua das barracas ----------
   Texto e botões à esquerda; o Branco à direita, no balcão da barraca dele, em cima da borda da faixa. */
.fecho-in:has(> .br-fecho) {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "texto branco" "acoes branco";
  align-items: end;
  gap: 22px clamp(24px, 4vw, 64px);
}
.fecho-in:has(> .br-fecho) > :first-child { grid-area: texto; }
.fecho-in:has(> .br-fecho) > .acoes { grid-area: acoes; }
.fecho-in > .br-fecho {
  --br-w: clamp(100px, 9.6vw, 138px);
  grid-area: branco;
  justify-self: end;
  margin: 0 0 calc(-1 * clamp(48px, 5vw, 72px));
}
@media (max-width: 700px) {
  .fecho-in:has(> .br-fecho) { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "texto texto" "acoes branco"; column-gap: 8px; }
  .fecho-in > .br-fecho { --br-w: 92px; }
  .fecho-in > .br-fecho .br-fala { display: none; }
}

/* ---------- Privacidade e Termos: ele explica o resumo, em pé na linha tracejada da comanda ----------
   Sem balão (o resumo é a explicação dele). Absoluto: não muda a altura do cartão nem empurra nada. */
.comanda h2:has(> .br-resumo) { position: relative; padding-right: 84px; }
.comanda h2 > .br-resumo {
  --br-w: 70px;
  position: absolute;
  right: 4px;
  bottom: 0;
}

/* ---------- a reação da reserva (sobe de trás da barra de envio quando a mensagem fica pronta) ---------- */
.br-reage {
  --br-w: 92px;
  position: absolute;
  right: clamp(14px, 3vw, 30px);
  bottom: 100%;
  margin: 0 0 2px;               /* fica em cima da linha tracejada da barra */
  pointer-events: none;
  z-index: 1;
}
.br-reage .br-palco { clip-path: inset(-60% -60% 0 -200%); }
.br-reage .br-corpo { inset: 0; transform: translateY(102%); }
.br-reage .br-fala { margin-bottom: calc(var(--br-w) * .5); font-size: 15px; white-space: nowrap; opacity: 0; transform: scale(.4); }
.reserva-pe.r-pronto .br-reage .br-corpo { animation: br-reage 3.6s var(--mv-ease-suave, ease) both; }
.reserva-pe.r-pronto .br-reage .br-fala { animation: br-reage-fala 3.6s var(--mv-ease-suave, ease) both; }

/* ---------- MOVIMENTO (só sem "menos movimento") ---------- */
@media (prefers-reduced-motion: no-preference) {
  /* vivo: respira e balança de leve (mesmas curvas e ritmos do Branco da área Aprenda) */
  .br-img { animation: br-respira 3.8s var(--mv-ease-suave, ease-in-out) infinite, br-balanca 7.6s var(--mv-ease-suave, ease-in-out) infinite; }
  .br-rodape .br-img { animation-duration: 4.6s, 9.2s; }
  .br-longe .br-img, html.mv-oculto .br-img { animation-play-state: paused; }
  .br-reage .br-img { animation: none; }

  /* entrada (o /assets/branco.js põe .br-espera e, quando ele aparece na tela, .br-entra) */
  html.br-js .br-espera .br-corpo { transform: translateY(102%); }
  html.br-js .br-espera .br-fala { opacity: 0; }
  html.br-js .br-entra .br-corpo { animation: br-sobe .95s var(--mv-ease-entra, ease-out) var(--br-atraso, 0ms) both; animation-timing-function: var(--mv-ease-pouso, ease-out); }
  html.br-js .br-entra .br-fala { animation: br-balao .5s var(--mv-ease-mola, ease-out) calc(var(--br-atraso, 0ms) + 420ms) both; }

  /* reservas: o joinha quica no meio da subida */
  .reserva-pe.r-pronto .br-reage .br-img { animation: br-hop .72s var(--mv-ease-suave, ease) .45s; }
}

@keyframes br-respira { 0%, 100% { scale: 1 1; } 50% { scale: 1.012 1.028; } }
@keyframes br-balanca { 0%, 100% { rotate: -1deg; } 50% { rotate: 1deg; } }
@keyframes br-sobe { from { transform: translateY(102%); } to { transform: none; } }
@keyframes br-balao { from { opacity: 0; transform: scale(.55) translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes br-hop { 0% { translate: 0 0; scale: 1 1; } 22% { scale: 1.06 .92; } 48% { translate: 0 -12%; scale: .96 1.05; } 70% { translate: 0 0; scale: 1.04 .95; } 85% { translate: 0 -2%; } 100% { translate: 0 0; scale: 1 1; } }
/* sobe de trás da barra, fica um pouco e volta a se esconder (não cobre o formulário) */
@keyframes br-reage {
  0% { transform: translateY(102%); }
  11% { transform: translateY(-5%); }
  16% { transform: translateY(1%); }
  20%, 82% { transform: none; }
  100% { transform: translateY(102%); }
}
@keyframes br-reage-fala {
  0%, 12% { opacity: 0; transform: scale(.4) translateY(10px); }
  19% { opacity: 1; transform: scale(1.05); }
  23%, 78% { opacity: 1; transform: none; }
  86%, 100% { opacity: 0; transform: scale(.7) translateY(6px); }
}
@media (max-width: 899px) {
  .reserva-painel:has(.r-input:focus) .br-reage :is(.br-corpo, .br-fala, .br-img) { animation-play-state: paused !important; }
}
/* menos movimento: a reação aparece e some sem deslocamento (só esmaece) */
@media (prefers-reduced-motion: reduce) {
  .reserva-pe.r-pronto .br-reage .br-corpo { animation: br-reage-rm 3.6s linear both; }
  .reserva-pe.r-pronto .br-reage .br-fala { animation: br-reage-rm 3.6s linear both; }
}
@keyframes br-reage-rm { 0% { opacity: 0; transform: none; } 6%, 86% { opacity: 1; transform: none; } 100% { opacity: 0; transform: none; } }

/* impressão: o Branco não vai para o papel */
@media print { .br, .br-reage { display: none !important; } }