/* =====================================================================
   K-BaB · TRANSIÇÃO ENTRE PÁGINAS (View Transitions entre documentos) — v8, rodada de movimento
   ---------------------------------------------------------------------
   - A LONA: ao seguir um link interno, a lona laranja da barraca desce como cortina (com a
     bainha recortada e o nome 케이밥 pintado), cobre a página velha, quica de leve e sobe
     revelando a página nova, que assenta no lugar. A lona é um <div class="kbvt-lona"> que o
     /assets/transicoes.js põe nas duas páginas só durante a troca (aria-hidden, sem foco).
   - Direção: "avancar" (link, Avançar) → a lona desce do alto e volta para cima;
     "voltar" (botão Voltar do navegador) → ela sobe de baixo e volta para baixo;
     "idioma" (PT · EN · 한국어) → ela atravessa de lado.
   - Ficam PARADOS por cima da lona: o cordão de lâmpadas (kb-fio), o cabeçalho (kb-topo) e o
     aviso de privacidade (kb-aviso). No menu, o destaque da página atual (kb-nav) desliza do
     item antigo para o novo.
   - Elemento compartilhado (tipo "par"): quando a página nova tem um [data-mv-par] igual ao da
     antiga (ex.: foto do prato → foto na ficha), a foto se transforma de um lugar no outro, sem lona.
   - prefers-reduced-motion: reduce → a regra @view-transition nem é ligada (navegação normal).
   - Navegadores sem suporte ignoram tudo isto e navegam normalmente.
   - As duas páginas precisam ter este arquivo para a transição acontecer.
   ===================================================================== */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
}

/* a largura útil da página é a mesma com ou sem barra de rolagem (no computador): sem isto, ao ir de uma página
   comprida para uma que cabe na tela (ex.: Início → Cardápio), o cabeçalho "pularia" a largura da barra */
html { scrollbar-gutter: stable; }

/* elementos que ficam parados. O nome precisa ser único na página: por isso só os filhos
   diretos do <body> (jogos e ferramentas do curso também usam classes como "fio"). */
body > .fio, body > .kb-fio { view-transition-name: kb-fio; }
body > header.topo { view-transition-name: kb-topo; }
body > .kbp-barra { view-transition-name: kb-aviso; }
body > header.topo .nav > ul > li > a[aria-current="page"] { view-transition-name: kb-nav; }
/* durante a troca, o cordão vira camada posicionada (fica por cima da lona, como o cabeçalho) */
html:active-view-transition body > :is(.fio, .kb-fio) { position: relative; z-index: 60; }

/* ---------- a lona (só existe durante a troca) ---------- */
.kbvt-lona {
  position: fixed; left: 0; right: 0; top: -16px; z-index: 45;
  height: calc(100vh + 32px); height: calc(100lvh + 32px);
  display: grid; place-content: center; justify-items: center; gap: .1em;
  pointer-events: none; overflow: visible;
  view-transition-name: kb-lona;
  color: rgba(146, 48, 0, .3);
  background:
    linear-gradient(to top, #D2581A 0 16px, transparent 16px),
    linear-gradient(#D2581A 0 16px, transparent 16px),
    linear-gradient(90deg, transparent calc(20% - 2px), rgba(150, 50, 0, .32) 0 calc(20% + 2px), transparent 0 calc(80% - 2px), rgba(150, 50, 0, .32) 0 calc(80% + 2px), transparent 0),
    repeating-linear-gradient(90deg, rgba(120, 40, 0, 0) 0, rgba(120, 40, 0, .12) 5%, rgba(120, 40, 0, 0) 10%, rgba(255, 236, 200, .1) 13.5%, rgba(120, 40, 0, 0) 20%),
    radial-gradient(ellipse at 50% 45%, #F58A3C 0, #EE6A1F 62%);
}
/* bainhas recortadas (em cima e embaixo: a que aparece depende da direção) */
.kbvt-lona::before, .kbvt-lona::after { content: ""; position: absolute; left: 0; right: 0; height: 20px; background-repeat: repeat-x; background-size: 32px 20px; }
.kbvt-lona::after { bottom: -20px; background-image: radial-gradient(circle at 16px 0, #D2581A 0 15px, rgba(210, 88, 26, 0) 15.6px); }
.kbvt-lona::before { top: -20px; background-image: radial-gradient(circle at 16px 20px, #D2581A 0 15px, rgba(210, 88, 26, 0) 15.6px); }
.kbvt-lona b { font: 400 clamp(84px, 19vw, 230px)/.9 "Do Hyeon", "Noto Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif; letter-spacing: .02em; }
.kbvt-lona small { font: 800 clamp(15px, 1.6vw, 21px)/1 "Bricolage Grotesque", "Arial Narrow", system-ui, sans-serif; font-stretch: 80%; letter-spacing: .14em; color: rgba(146, 48, 0, .42); }
.kbvt-lona.kbvt-velha { transform: translateY(calc(-100% - 40px)); }

/* ---------- ritmo padrão (deslize curto: navegação sem lona) ---------- */
::view-transition-group(*) {
  animation-duration: .34s;
  animation-timing-function: cubic-bezier(.22, .8, .24, 1);
}
::view-transition-old(root) { animation: .2s cubic-bezier(.4, 0, 1, 1) both kbvt-sai-esq; }
::view-transition-new(root) { animation: .34s cubic-bezier(.22, .8, .24, 1) .05s both kbvt-entra-dir; }
html:active-view-transition-type(voltar)::view-transition-old(root) { animation-name: kbvt-sai-dir; }
html:active-view-transition-type(voltar)::view-transition-new(root) { animation-name: kbvt-entra-esq; }

/* ---------- com a lona ---------- */
html:active-view-transition-type(lona)::view-transition-old(root) { animation: .82s linear both kbvt-velha-coberta; }
html:active-view-transition-type(lona)::view-transition-new(root) { animation: .82s linear both kbvt-nova-revelada; }
html:active-view-transition-type(lona)::view-transition-group(kb-lona) { animation: none; }
html:active-view-transition-type(lona)::view-transition-old(kb-lona) { display: none; }
html:active-view-transition-type(lona)::view-transition-new(kb-lona) { animation: .82s both kbvt-lona-desce; }
html:active-view-transition-type(lona):active-view-transition-type(voltar)::view-transition-new(kb-lona) { animation-name: kbvt-lona-sobe; }
html:active-view-transition-type(lona):active-view-transition-type(idioma)::view-transition-new(kb-lona) { animation-name: kbvt-lona-lado; }
html:active-view-transition-type(lona):active-view-transition-type(idioma)::view-transition-old(root) { animation-name: kbvt-velha-lado; }
html:active-view-transition-type(lona):active-view-transition-type(idioma)::view-transition-new(root) { animation-name: kbvt-nova-lado; }
/* sem lona na página velha nem na nova: nada aparece */
::view-transition-old(kb-lona):only-child { display: none; }
/* o destaque do menu desliza */
::view-transition-group(kb-nav) { animation-duration: .5s; animation-timing-function: cubic-bezier(.34, 1.3, .64, 1); }

/* ---------- elemento compartilhado (foto do prato → foto da ficha) ---------- */
::view-transition-group(kb-par) { animation-duration: .52s; animation-timing-function: cubic-bezier(.2, .9, .25, 1); }
::view-transition-old(kb-par), ::view-transition-new(kb-par) { height: 100%; object-fit: cover; overflow: hidden; border-radius: 18px; }
::view-transition-old(kb-par):only-child, ::view-transition-new(kb-par):only-child { animation: .2s both kbvt-some; }
html:active-view-transition-type(par)::view-transition-old(root) { animation: .3s cubic-bezier(.4, 0, 1, 1) both kbvt-some; }
html:active-view-transition-type(par)::view-transition-new(root) { animation: .42s cubic-bezier(.22, .8, .24, 1) .08s both kbvt-surge-baixo; }

/* cabeçalho/cordão que só existe numa das páginas (ex.: site → curso): some ou aparece de leve */
::view-transition-old(kb-topo):only-child,
::view-transition-old(kb-fio):only-child,
::view-transition-old(kb-aviso):only-child,
::view-transition-old(kb-nav):only-child { animation: .18s ease-in both kbvt-some; }
::view-transition-new(kb-topo):only-child,
::view-transition-new(kb-fio):only-child,
::view-transition-new(kb-aviso):only-child,
::view-transition-new(kb-nav):only-child { animation: .3s ease-out .06s both kbvt-surge; }

@keyframes kbvt-sai-esq  { to   { opacity: 0; transform: translateX(-26px); } }
@keyframes kbvt-sai-dir  { to   { opacity: 0; transform: translateX(26px); } }
@keyframes kbvt-entra-dir { from { opacity: 0; transform: translateX(34px); } }
@keyframes kbvt-entra-esq { from { opacity: 0; transform: translateX(-34px); } }
@keyframes kbvt-some  { to   { opacity: 0; } }
@keyframes kbvt-surge { from { opacity: 0; } }
@keyframes kbvt-surge-baixo { from { opacity: 0; transform: translateY(18px); } }

/* a lona cai (aceleração da gravidade), quica um tiquinho no chão e é recolhida para cima */
@keyframes kbvt-lona-desce {
  0%   { transform: translateY(calc(-100% - 40px)); animation-timing-function: cubic-bezier(.5, 0, .85, .5); }
  38%  { transform: translateY(0); animation-timing-function: cubic-bezier(.2, .7, .4, 1); }
  44%  { transform: translateY(-2.4%); animation-timing-function: cubic-bezier(.5, 0, .7, 1); }
  50%  { transform: translateY(0); animation-timing-function: cubic-bezier(.62, 0, .28, 1); }
  100% { transform: translateY(calc(-100% - 40px)); }
}
@keyframes kbvt-lona-sobe {
  0%   { transform: translateY(calc(100% + 40px)); animation-timing-function: cubic-bezier(.5, 0, .85, .5); }
  38%  { transform: translateY(0); animation-timing-function: cubic-bezier(.2, .7, .4, 1); }
  44%  { transform: translateY(2.4%); animation-timing-function: cubic-bezier(.5, 0, .7, 1); }
  50%  { transform: translateY(0); animation-timing-function: cubic-bezier(.62, 0, .28, 1); }
  100% { transform: translateY(calc(100% + 40px)); }
}
@keyframes kbvt-lona-lado {
  0%   { transform: translateX(calc(100% + 40px)); animation-timing-function: cubic-bezier(.5, 0, .85, .5); }
  40%  { transform: translateX(0); animation-timing-function: cubic-bezier(.2, .7, .4, 1); }
  48%  { transform: translateX(0); animation-timing-function: cubic-bezier(.62, 0, .28, 1); }
  100% { transform: translateX(calc(-100% - 40px)); }
}
/* página velha: é empurrada de leve pela lona e some quando a lona cobre tudo */
@keyframes kbvt-velha-coberta {
  0%     { opacity: 1; transform: none; }
  37.9%  { opacity: 1; transform: translateY(20px) scale(.985); }
  38%, 100% { opacity: 0; transform: translateY(20px) scale(.985); }
}
/* página nova: aparece atrás da lona e assenta no lugar enquanto ela sobe */
@keyframes kbvt-nova-revelada {
  0%, 49.9% { opacity: 0; transform: translateY(28px) scale(.985); }
  50%    { opacity: 1; transform: translateY(28px) scale(.985); animation-timing-function: cubic-bezier(.16, .84, .24, 1); }
  100%   { opacity: 1; transform: none; }
}
@keyframes kbvt-velha-lado {
  0%     { opacity: 1; transform: none; }
  39.9%  { opacity: 1; transform: translateX(-24px); }
  40%, 100% { opacity: 0; }
}
@keyframes kbvt-nova-lado {
  0%, 47.9% { opacity: 0; transform: translateX(30px); }
  48%    { opacity: 1; transform: translateX(30px); animation-timing-function: cubic-bezier(.16, .84, .24, 1); }
  100%   { opacity: 1; transform: none; }
}

/* garantia extra: com movimento reduzido, nenhuma animação de transição (nem de outra origem) */
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) { animation: none !important; }
  .kbvt-lona { display: none !important; }
}