/* La Bocca Buffet · animações e transições
   Arquivo reservado para a fase de refinamento das interações. */

:root{
  --ease-out:cubic-bezier(.23,1,.32,1);       /* entradas */
  --ease-in-out:cubic-bezier(.77,0,.175,1);   /* cortina das fotos */
  --ease-drawer:cubic-bezier(.32,.72,0,1);    /* modal subindo no celular */
}

/* ===== Transição entre páginas =====
   A página antiga some rápido e a nova entra subindo de leve.
   O topo (logo + Menu) fica parado. Funciona no Chrome, Edge e Safari;
   nos outros navegadores a troca é normal, sem animação. */
@view-transition{navigation:auto}
header{view-transition-name:lb-header}
::view-transition-group(lb-header){animation:none}
::view-transition-old(root){animation:180ms var(--ease-out) both lb-page-out}
::view-transition-new(root){animation:420ms var(--ease-out) 60ms both lb-page-in}
@keyframes lb-page-out{to{opacity:0}}
@keyframes lb-page-in{from{opacity:0;transform:translateY(10px)}}

/* Para o orçamento: o botão clicado cresce e se transforma no cartão do formulário.
   O botão some logo no começo; uma caixa creme leva a forma até o lugar do cartão;
   no fim o cartão aparece por cima. (Marcação do botão no common.js e do cartão no orcamento.html) */
::view-transition-group(lb-orc){animation-duration:900ms;animation-timing-function:var(--ease-in-out);background:#FAF7F2;border-radius:10px;overflow:hidden}
::view-transition-image-pair(lb-orc){isolation:auto}
::view-transition-old(lb-orc){animation:lb-page-out 160ms ease both;height:100%;object-fit:cover}
::view-transition-new(lb-orc){animation:lb-orc-in 450ms var(--ease-out) 560ms both;height:100%;object-fit:cover;object-position:top}
@keyframes lb-orc-in{from{opacity:0}}

/* ===== Modais, galeria e menu =====
   O common.js põe data-enter no instante em que abre (e tira em seguida)
   e data-leave enquanto fecha. Saída mais curta que a entrada. */

/* Modais de eventos, cardápios e orçamento: fundo esmaece, caixa cresce de 96% */
.r-modal-wrap>[data-act="close"][tabindex="-1"],
.o-mwrap>[data-act="close"][tabindex="-1"]{transition:opacity 250ms var(--ease-out)}
.r-modal,.o-modal{transition:opacity 250ms var(--ease-out),transform 250ms var(--ease-out)}
[data-modal][data-enter]>[data-act="close"][tabindex="-1"],
[data-modal][data-leave]>[data-act="close"][tabindex="-1"]{opacity:0}
[data-modal][data-enter] :is(.r-modal,.o-modal),
[data-modal][data-leave] :is(.r-modal,.o-modal){opacity:0;transform:scale(.96)}
[data-modal][data-leave]>[data-act="close"][tabindex="-1"],
[data-modal][data-leave] :is(.r-modal,.o-modal){transition-duration:180ms}

/* Galeria em tela cheia: esmaece e a foto cresce de leve */
.r-lightbox{transition:opacity 250ms var(--ease-out)}
.r-lightbox>img{transition:transform 250ms var(--ease-out)}
.r-lightbox[data-enter],.r-lightbox[data-leave]{opacity:0}
.r-lightbox[data-enter]>img,.r-lightbox[data-leave]>img{transform:scale(.97)}
.r-lightbox[data-leave],.r-lightbox[data-leave]>img{transition-duration:180ms}

/* Menu em tela cheia · Cortina
   Abrir: o fundo desce de cima, os links sobem de dentro da própria linha (um após o outro),
   a foto abre em cortina e o topo e o rodapé do menu aparecem.
   Fechar (mais rápido): os links saem para cima e o fundo sobe de volta. */
[data-modal="nav"]{clip-path:inset(0 0 0 0);transition:clip-path 700ms var(--ease-in-out)}
[data-modal="nav"][data-enter]{clip-path:inset(0 0 100% 0)}
[data-modal="nav"][data-leave]{clip-path:inset(0 0 100% 0);transition:clip-path 520ms var(--ease-in-out) 120ms}
[data-modal="nav"][data-opening] li{overflow:hidden}
[data-modal="nav"] li>a{transition:transform 850ms var(--ease-out) calc(300ms + var(--n,0) * 60ms),opacity 300ms ease calc(300ms + var(--n,0) * 60ms)}
[data-modal="nav"] li:nth-child(2)>a{--n:1}[data-modal="nav"] li:nth-child(3)>a{--n:2}[data-modal="nav"] li:nth-child(4)>a{--n:3}
[data-modal="nav"] li:nth-child(5)>a{--n:4}[data-modal="nav"] li:nth-child(6)>a{--n:5}
[data-modal="nav"][data-enter] li>a{transform:translateY(105%)}
[data-modal="nav"][data-leave] li>a{transform:translateY(-30%);opacity:0;transition:transform 300ms var(--ease-out),opacity 200ms ease}
[data-modal="nav"] figure img{clip-path:inset(0 0 0 0);transition:clip-path 900ms var(--ease-in-out) 380ms}
[data-modal="nav"][data-enter] figure img{clip-path:inset(0 0 100% 0)}
[data-modal="nav"][data-leave] figure img{transition:none}
[data-modal="nav"]>div:first-child,[data-modal="nav"]>div:last-child{transition:opacity 500ms var(--ease-out) 350ms}
[data-modal="nav"][data-enter]>div:first-child,[data-modal="nav"][data-enter]>div:last-child{opacity:0}
[data-modal="nav"][data-leave]>div:first-child,[data-modal="nav"][data-leave]>div:last-child{opacity:0;transition:opacity 200ms ease}

[data-modal][data-leave]{pointer-events:none}

/* Painel de cardápios do orçamento: desliza da esquerda (no celular, sobe de baixo) */
.o-dback{transition:opacity 300ms var(--ease-out)}
.o-drawer{transition:transform 520ms var(--ease-drawer)}
[data-modal][data-enter] .o-drawer,[data-modal][data-leave] .o-drawer{transform:translateX(-100%)}
[data-modal][data-leave] .o-drawer{transition:transform 280ms var(--ease-out)}
@media (max-width:640px){[data-modal][data-enter] .o-drawer,[data-modal][data-leave] .o-drawer{transform:translateY(100%)}}

/* Celular: os modais viram uma folha que sobe de baixo */
@media (max-width:640px){
  .r-modal,.o-modal{transition:transform 450ms var(--ease-drawer)}
  [data-modal][data-enter] :is(.r-modal,.o-modal),
  [data-modal][data-leave] :is(.r-modal,.o-modal){opacity:1;transform:translateY(100%)}
  [data-modal][data-leave] :is(.r-modal,.o-modal){transition:transform 260ms var(--ease-out)}
}

/* Menos movimento: sem deslocamento, só esmaecer */
@media (prefers-reduced-motion:reduce){
  ::view-transition-new(root){animation:200ms ease both lb-page-fade}
  ::view-transition-old(root){animation:150ms ease both lb-page-out}
  .r-modal,.o-modal,.o-drawer,.r-lightbox>img,[data-modal="nav"] li>a{transform:none !important}
  [data-modal="nav"],[data-modal="nav"] figure img{clip-path:none !important;transition:opacity 250ms ease !important}
  [data-modal="nav"][data-enter],[data-modal="nav"][data-leave]{opacity:0}
  .r-modal,.o-modal{transition:opacity 200ms ease !important}
  [data-modal][data-enter] :is(.r-modal,.o-modal),
  [data-modal][data-leave] :is(.r-modal,.o-modal){opacity:0 !important}
}
@keyframes lb-page-fade{from{opacity:0}}

/* ===== Intro (página inicial, primeira visita da sessão) =====
   0,15 s: o "La Bocca" dourado se escreve da esquerda para a direita · 0,95 s: "BUFFET" surge
   1,85 s: o logo sobe e some · 2,0 s: a cortina escura sobe e revela o topo (que faz a abertura dele).
   Qualquer clique, tecla ou rolagem pula direto para a cortina (home.js). */
.lb-splash{display:none}
.lb-splash-on .lb-splash{display:flex;position:fixed;inset:0;z-index:200;align-items:center;justify-content:center;background:#0D0B0A;
  animation:lb-splash-up 850ms var(--ease-in-out) 2000ms both}
.lb-splash-on,.lb-splash-on body{overflow:hidden}
.lb-splash-logo{width:min(380px,64vw)}
.lb-splash-logo svg{display:block;width:100%;height:auto;overflow:visible}
.lb-splash-on .lb-splash-logo{animation:lb-splash-out 500ms var(--ease-out) 1850ms both}
.lb-splash-on .lb-splash-gold{animation:lb-splash-write 1100ms cubic-bezier(.45,0,.2,1) 150ms both}
.lb-splash-on .lb-splash-buffet{animation:lb-splash-in 600ms var(--ease-out) 950ms both}
@keyframes lb-splash-write{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes lb-splash-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes lb-splash-out{to{opacity:0;transform:translateY(-14px)}}
@keyframes lb-splash-up{from{clip-path:inset(0 0 0 0)}to{clip-path:inset(0 0 100% 0)}}

/* ===== Abertura do topo (página inicial, primeira visita da sessão) =====
   Foto assenta de 108% para 100%, título sobe linha a linha, depois texto e botões. */
@property --hs{syntax:'<number>';inherits:false;initial-value:1}
.r-hero>img{transform:translate3d(0,var(--py,0px),0) scale(var(--hs));will-change:transform}
.lb-intro .r-hero>img{--hs:1.08}
.lb-intro .r-hero h1:not([data-split]){visibility:hidden}
.lb-intro .r-hero h1 .lb-ln>span{transform:translateY(110%)}
.lb-intro .r-hero-lead,.lb-intro .r-hero-in>div{opacity:0;transform:translateY(10px)}
.lb-intro.lb-go .r-hero>img{--hs:1;transition:--hs 1800ms var(--ease-out)}
.lb-intro.lb-go .r-hero h1 .lb-ln>span{transform:none;transition:transform 1000ms var(--ease-out) calc(150ms + var(--li,0) * 110ms)}
.lb-intro.lb-go .r-hero-lead,.lb-intro.lb-go .r-hero-in>div{opacity:1;transform:none;transition:opacity 700ms var(--ease-out),transform 700ms var(--ease-out)}
.lb-intro.lb-go .r-hero-lead{transition-delay:480ms}
.lb-intro.lb-go .r-hero-in>div{transition-delay:600ms}

/* ===== Topo fino ao rolar =====
   Enquanto a pessoa rola, o topo vira uma faixa fina: logo pequeno à esquerda e só o ícone do Menu.
   2 s depois de parar, volta ao tamanho normal. Tudo com transform, então a página não "pula":
   o topo sobe (--hd = altura normal − altura fina) e o conteúdo desce metade disso para ficar centrado. */
header{--hd:35px;--ls:.5;transition:transform 500ms var(--ease-out)}
header>div{transition:transform 500ms var(--ease-out)}
header>div>a img{transform-origin:left center;transition:transform 500ms var(--ease-out)}
header [data-act="nav-open"]{transform-origin:right center;
  transition:transform 500ms var(--ease-out),font-size 350ms var(--ease-out),gap 350ms var(--ease-out),padding 350ms var(--ease-out),background-color 200ms ease,color 200ms ease,border-color 200ms ease}
header[data-compact]{transform:translateY(calc(var(--hd) * -1))}
header[data-compact]>div{transform:translateY(calc(var(--hd) / 2))}
header[data-compact]>div>a img{transform:scale(var(--ls))}
header[data-compact] [data-act="nav-open"]{transform:scale(.82);font-size:0 !important;gap:0 !important;padding:0 12px !important}
header[data-compact] [data-act="nav-open"]:active{transform:scale(.8)}
@media (max-width:640px){header{--hd:21px;--ls:.6}}

/* ===== Toque nos botões: afundam de leve; cores trocam suavemente ===== */
.btn-ivory,.btn-cafe,.btn-line-light,.btn-line-dark,.r-menu-btn,
[data-act="rv-prev"],[data-act="rv-next"],[data-act="lb-prev"],[data-act="lb-next"],
[data-pick],[data-svc],[data-menu-pick],[data-menu-tab]{
  transition:transform 160ms var(--ease-out),background-color 200ms ease,color 200ms ease,border-color 200ms ease}
.btn-ivory:active,.btn-cafe:active,.btn-line-light:active,.btn-line-dark:active,.r-menu-btn:active,
[data-act="rv-prev"]:active,[data-act="rv-next"]:active,
[data-pick]:active,[data-svc]:active,[data-menu-pick]:active,[data-menu-tab]:active{transform:scale(.97)}
.card:active{transform:scale(.985);transition:transform 160ms var(--ease-out)}

/* ===== Orçamento: barra de progresso anda suave ===== */
#o-step-bar{transition:width 600ms var(--ease-out)}

@media (prefers-reduced-motion:reduce){
  .r-hero>img{transform:none !important}
  header,header>div,header>div>a img,header [data-act="nav-open"]{transition:none !important}
  .btn-ivory:active,.btn-cafe:active,.btn-line-light:active,.btn-line-dark:active,.r-menu-btn:active,.card:active{transform:none}
}

/* ===== Seções aparecendo ao rolar (página inicial) =====
   O home.js marca os elementos com data-rv e, quando entram na tela,
   adiciona data-rv-in. Ao terminar, remove as marcas e o elemento volta
   ao estilo original. Sem JS, nada fica escondido.
   Papéis: kicker (sobretítulo, só esmaece) · lead (título, sobe mais)
   · sup (texto e botões, sobe menos) · photo (foto em cortina)
   · tiles (grade de fotos em cortina) · group (cards e listas que sobem) */

/* Títulos linha a linha: cada linha sobe de dentro de uma máscara.
   O JS quebra o título em linhas (.lb-ln) e devolve o texto original no fim. */
.lb-ln{display:block;overflow:hidden;padding-bottom:.14em;margin-bottom:-.14em}
.lb-ln>span{display:block}
[data-rv="lines"] .lb-ln>span{transform:translateY(110%)}
[data-rv="lines"][data-rv-in][data-split]{clip-path:none}
[data-rv="lines"][data-rv-in] .lb-ln>span{transform:none;transition:transform 900ms var(--ease-out) calc(var(--rv-d,0ms) + var(--li,0) * 90ms)}

/* Estado inicial (escondido, sem transição) */
[data-rv="kicker"]{opacity:0}
[data-rv="lead"]{opacity:0;transform:translateY(16px)}
[data-rv="sup"],[data-rv="group"]>*{opacity:0;transform:translateY(10px)}
[data-rv="photo"],[data-rv="tiles"]>*{clip-path:inset(0 0 100% 0)}

/* Entrada */
[data-rv][data-rv-in],
[data-rv][data-rv-in]>*{opacity:1;transform:none;clip-path:inset(0 0 0 0)}
[data-rv="kicker"][data-rv-in]{transition:opacity 500ms var(--ease-out) var(--rv-d,0ms)}
[data-rv="lead"][data-rv-in]{transition:opacity 700ms var(--ease-out) var(--rv-d,0ms),transform 700ms var(--ease-out) var(--rv-d,0ms)}
[data-rv="sup"][data-rv-in],[data-rv="group"][data-rv-in]>*{transition:opacity 600ms var(--ease-out) var(--rv-d,0ms),transform 600ms var(--ease-out) var(--rv-d,0ms)}
[data-rv="photo"][data-rv-in]{transition:clip-path 900ms var(--ease-in-out) var(--rv-d,0ms)}
[data-rv="tiles"][data-rv-in]>*{transition:clip-path 750ms var(--ease-in-out) var(--rv-d,0ms)}

/* Quem navega pelo teclado nunca fica com um item invisível */
[data-rv]:focus-within,[data-rv]>*:focus-within{opacity:1;transform:none;clip-path:none}

/* Menos movimento: tudo só esmaece, junto e sem deslocamento */
@media (prefers-reduced-motion:reduce){
  [data-rv],[data-rv]>*{transform:none !important;clip-path:none !important}
  [data-rv="photo"],[data-rv="tiles"]>*{opacity:0}
  [data-rv][data-rv-in],[data-rv][data-rv-in]>*{opacity:1;transition:opacity 300ms ease !important}
}