/* Cores medidas no logo (tools/cores.py e amostra de pixels). */
:root {
  --mata: #10271a;
  --creme: #ddcc9c;
  --flor: #c64d3f;
  --fita: #597233;
  --noite: #0b1a12;
  --titulo: 'Rye', Georgia, serif;
  --texto: system-ui, -apple-system, 'Segoe UI', sans-serif;
}
* { box-sizing: border-box; margin: 0; }
html { background: var(--noite); color: var(--creme); font-family: var(--texto); }
html:not(.aberto) { overflow: hidden; }
body { overflow-x: hidden; }
a { color: inherit; }

main { position: relative; z-index: 1; }

/* Abertura: cortina que sobe, a mesa já está atrás. */
#abertura {
  position: fixed; inset: 0; z-index: 10; background: var(--mata);
  display: grid; place-content: center; justify-items: center; gap: .5rem; text-align: center; padding: 6vw;
  overflow: hidden;   /* em janela baixa o conteúdo passava da caixa e o botão sobrava no topo depois de abrir */
  transition: transform .9s cubic-bezier(.7, 0, .2, 1), visibility 0s .9s;
}
html.aberto #abertura { transform: translateY(-100%); visibility: hidden; }
.flor { width: min(40vw, 190px); overflow: visible; }
.flor path { transform: rotate(0deg) scaleY(.15); animation: abrir 1.4s cubic-bezier(.2, .8, .2, 1) forwards; }
.petala { fill: var(--flor); }
.folha { fill: var(--fita); }
@keyframes abrir { to { transform: rotate(var(--a)) scaleY(1); } }
.marca { font-family: var(--titulo); font-size: clamp(3rem, 14vw, 6.5rem); line-height: .95; text-transform: uppercase; }
.fita { background: var(--fita); color: var(--creme); padding: .25rem 1.1rem; border-radius: 4px; letter-spacing: .18em; text-transform: uppercase; font-weight: 700; font-size: .95rem; }
.lema { margin-top: .6rem; letter-spacing: .06em; opacity: .85; }
#entrar { margin-top: 1.2rem; font: inherit; font-weight: 600; padding: .9rem 2rem; border-radius: 999px; border: 0; background: var(--flor); color: #fff; cursor: pointer; }
#entrar:disabled { background: transparent; color: var(--creme); opacity: .6; cursor: progress; }

/* Viagem: trilho alto, palco preso, tudo guiado pelo scroll */
#viagem { height: 1580vh; }
/* Palco fixo, não sticky: no Safari o sticky soltava no começo do scroll e a tela ficava só com o fundo.
   O #viagem vira só o espaço que dá a duração; as seções seguintes sobem por cima do palco como cortina. */
#viagem { pointer-events: none; }
.palco { position: fixed; inset: 0; height: 100svh; overflow: hidden; background: #1a0f08; }
.palco.fora { visibility: hidden; }   /* depois da viagem ele não precisa ser desenhado */
.mergulho { position: absolute; inset: 0; transform-origin: 48.5% 11%; will-change: transform; }   /* origem numa rosa da toalha */
.camera { position: absolute; inset: 0; will-change: transform; }
.mesa { position: absolute; left: 50%; top: 50%; height: 100%; width: auto; min-width: 100%; aspect-ratio: 1680 / 944;
  transform: translate(-50%, -50%); object-fit: cover; }

/* luzes do varal piscando por cima da pintura */
.lampada { position: absolute; width: 9vmin; aspect-ratio: 1; border-radius: 50%; translate: -50% -50%; mix-blend-mode: screen;
  background: radial-gradient(circle, rgb(255 214 140 / .85), rgb(255 170 60 / .25) 45%, transparent 70%);
  animation: piscar 3.2s ease-in-out infinite; }
@keyframes piscar { 0%, 100% { opacity: .55; scale: .9; } 45% { opacity: 1; scale: 1.12; } 60% { opacity: .7; } }

/* Prato e ingredientes: medidas em relação ao prato, que se ajusta à tela */
/* A centralização (-50%, -50%) de tudo que o GSAP move é feita no main.js com xPercent/yPercent:
   com `translate` no CSS o GSAP converte para pixels e perde o centro em algumas peças e no resize. */
.prato { position: absolute; left: 50%; top: 50%; width: min(52svh, 82vw); aspect-ratio: 1; }
.prato img { position: absolute; display: block; height: auto; }
.louca { inset: 0; width: 100%; will-change: transform; filter: drop-shadow(0 1.2vmin 1.6vmin rgb(40 15 0 / .55)); }
/* o braço fica na escala do prato (--p), com os dedos sobre a borda direita dele */
.garcom { --p: min(52svh, 82vw); position: absolute; left: calc(50% + var(--p) * .34); top: calc(50% - var(--p) * .27);
  width: calc(var(--p) * 1.95); height: auto; filter: drop-shadow(0 2vmin 2vmin rgb(30 10 0 / .5)); will-change: transform; }
.peca { left: var(--x); top: var(--y); width: var(--w); will-change: transform, opacity; }
.sombra { position: absolute; left: var(--x); top: var(--y); width: var(--w); aspect-ratio: 1.25;
  border-radius: 50%; background: radial-gradient(ellipse, rgb(50 18 0 / .7), transparent 68%); will-change: transform, opacity; }
.vapor { position: absolute; left: 34%; top: 20%; width: 34%; aspect-ratio: 1; opacity: 0; pointer-events: none; overflow: visible; }
.vapor path { fill: none; stroke: rgb(255 248 230 / .75); stroke-width: 7; stroke-linecap: round; stroke-dasharray: 60 140;
  animation: subir 2.6s linear infinite; filter: blur(1.2px); }
.vapor path:nth-child(2) { animation-delay: -.9s; } .vapor path:nth-child(3) { animation-delay: -1.7s; }
@keyframes subir { from { stroke-dashoffset: 200; } to { stroke-dashoffset: 0; } }
/* depois de pousar, cada peça respira um pouco: pintura viva, não foto parada */
.viva { animation: respirar 3.6s ease-in-out infinite; }
@keyframes respirar { 0%, 100% { rotate: -.4deg; } 50% { rotate: .4deg; } }

/* pratos de destaque: ocupam o lugar do prato herói */
.arte { position: absolute; left: 50%; top: 50%; width: min(56svh, 86vw); height: auto; opacity: 0;
  filter: drop-shadow(0 1.2vmin 1.6vmin rgb(40 15 0 / .55)); will-change: transform, opacity; }
.arte.alta { width: auto; height: min(62svh, 110vw); }

/* Cena do quintal */
.quintal { position: absolute; inset: 0; overflow: hidden; background: var(--noite); clip-path: circle(0% at 48.5% 11%); }
.pano { position: absolute; left: 0; top: 0; height: max(100svh, 62vw); aspect-ratio: 2048 / 1033; will-change: transform; }
.pano img { display: block; width: 100%; height: 100%; }
/* o letreiro do mural real, entre as asas */
.mural-letra { position: absolute; left: 23.3%; top: 31%; translate: -50% 0; rotate: -2deg; text-align: center; text-transform: uppercase;
  font-family: var(--titulo); line-height: .9; color: #f3e7c4; font-size: calc(max(100svh, 62vw) * .05); text-shadow: 0 .07em 0 rgb(0 0 0 / .35); }
.mural-letra small { display: block; margin-top: .35em; font-family: var(--texto); font-weight: 700; font-size: .34em; letter-spacing: .22em; }
/* Camadas de profundidade do quintal. A largura acompanha a da pintura vezes --prof; o main.js move cada uma
   proporcionalmente ao deslocamento da pintura, então a de --prof maior passa mais rápido. */
.quintal { --ph: max(100svh, 62vw); --pw: calc(var(--ph) * 1.9826); }
.camada { position: absolute; left: 0; top: 0; height: 100%; width: calc(var(--pw) * var(--prof)); pointer-events: none; will-change: transform; }
.camada img { position: absolute; left: var(--l); top: var(--t); width: var(--w); height: auto; }
.camada.meio img { filter: brightness(.82); }
.camada.perto img { filter: brightness(.7) saturate(.9); }
.camada.chao img { top: auto; bottom: -9svh; filter: brightness(.42) saturate(.75) blur(1.5px); }
.espelho { scale: -1 1; }
/* cada coisa balança no seu ritmo */
.pend { transform-origin: 50% 0; animation: balancar 5.5s ease-in-out infinite; }
.varal { transform-origin: 50% 0; animation: tremular 4.2s ease-in-out infinite; }
.planta { transform-origin: 50% 100%; animation: tremular 6.5s ease-in-out infinite; }
.lento { animation-duration: 7.5s; animation-delay: -2s; }
@keyframes tremular { 0%, 100% { rotate: -1.2deg; } 50% { rotate: 1.2deg; } }
.vagalumes { position: absolute; inset: 0; pointer-events: none; }
.vagalumes i { position: absolute; left: var(--l); top: var(--t); width: .9vmin; aspect-ratio: 1; border-radius: 50%;
  background: #e9ff8a; box-shadow: 0 0 1.4vmin .5vmin rgb(220 255 120 / .55); animation: vagar var(--d) ease-in-out infinite; }
@keyframes vagar { 0%, 100% { translate: 0 0; opacity: .15; } 30% { opacity: 1; } 50% { translate: 3vmin -4vmin; opacity: .5; } 75% { translate: -2vmin -1vmin; opacity: 1; } }

/* Moldura em volta da mesa: plantas e varal acima dela, vistos de cima, mais perto da câmera */
.moldura { position: absolute; inset: 0; pointer-events: none; will-change: transform; }
.canto { position: absolute; height: auto; filter: brightness(.5) saturate(.8) blur(1px); }
.c1 { left: -14vmin; top: -16vmin; width: 62vmin; rotate: 150deg; }
.c2 { right: -18vmin; top: -10vmin; width: 60vmin; rotate: -125deg; }
.c3 { right: -12vmin; bottom: -22vmin; width: 52vmin; rotate: -30deg; }
.moldura[data-prof="2.4"] .canto { filter: brightness(.34) saturate(.7) blur(2.5px); }
.c4 { left: -20vmin; top: -4vmin; width: 150vmin; rotate: -9deg; }
.c5 { left: -26vmin; bottom: -26vmin; width: 78vmin; rotate: 35deg; }
.c6 { right: 6vmin; top: -24vmin; width: 30vmin; rotate: 172deg; }

.cartao { position: absolute; left: 0; right: 0; bottom: 5svh; padding: 0 6vw; text-align: center; opacity: 0; visibility: hidden;
  text-shadow: 0 2px 14px rgb(20 6 0 / .9); will-change: transform, opacity; }
.cartao h2 { font-family: var(--titulo); font-weight: 400; font-size: clamp(1.5rem, 4.4vw, 2.8rem); line-height: 1.1; color: #fff3cf; text-shadow: 0 .08em 0 #7a1f12, 0 .3em .8em rgb(30 8 0 / .8); }
.cartao p { margin-top: .3rem; }
.cartao .botao { margin-top: .6rem; text-shadow: none; }

.rotulo { position: absolute; left: 0; right: 0; bottom: 9svh; text-align: center; padding: 0 5vw;
  font-family: var(--titulo); font-size: clamp(1.6rem, 5vw, 3.2rem); line-height: 1.1; color: #fff3cf;
  text-shadow: 0 .08em 0 #7a1f12, 0 .3em .8em rgb(30 8 0 / .8); opacity: 0; will-change: transform, opacity; }
/* convite para rolar: fica abaixo do rótulo e do cartão, some enquanto a página anda */
.role { position: absolute; left: 50%; bottom: 1svh; width: 1.5rem; margin-left: -.75rem; fill: none; stroke: #fff3cf; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round;
  filter: drop-shadow(0 1px 4px rgb(0 0 0 / .8)); opacity: 0; transition: opacity .25s; animation: chamar 1.4s ease-in-out infinite; }
.role.visivel { opacity: .9; transition-duration: .6s; }
@keyframes chamar { 50% { transform: translateY(.35rem); } }
.rotulo small { display: block; font-family: var(--texto); font-size: .38em; letter-spacing: .12em; text-transform: uppercase; margin-top: .5em; text-shadow: 0 2px 10px rgb(0 0 0 / .8); }
.vinheta { position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(transparent 58%, rgb(18 6 0 / .82)), radial-gradient(ellipse at center, transparent 45%, rgb(18 6 0 / .7)); }

.botao {
  display: inline-block; margin-top: 1rem; padding: .8rem 1.4rem; border-radius: 999px;
  background: var(--flor); color: #fff; font-weight: 600; text-decoration: none; pointer-events: auto;
}
.preco { font-family: var(--titulo); font-size: 1.5rem; }

/* Seções em HTML */
section:not(#viagem), footer { position: relative; padding: 12svh 6vw; }
section:not(#viagem) > h1 { font-family: var(--titulo); font-weight: 400; font-size: clamp(1.9rem, 6vw, 3.8rem); line-height: 1.1; margin-bottom: 1.5rem; }
section:not(#viagem) > p { max-width: 40rem; line-height: 1.6; }

#cardapio { background: var(--noite); min-height: 100svh; padding-top: calc(12svh + 70px); }
.faixa-chita { position: absolute; inset: 0 0 auto 0; height: 70px; background: url(../assets/cartoon/faixa.webp) center / auto 100% repeat-x; }

/* pinturas soltas que amarram as seções ao mundo da viagem */
.enfeite { position: absolute; height: auto; pointer-events: none; }
.samambaia { top: 40px; right: 4vw; width: clamp(90px, 16vw, 200px); transform-origin: 50% 0; animation: balancar 5s ease-in-out infinite; }
@keyframes balancar { 0%, 100% { rotate: -2.5deg; } 50% { rotate: 2.5deg; } }
.tucano { right: 5vw; bottom: 0; width: clamp(110px, 20vw, 240px); }
.folhas { right: -3vw; bottom: -4svh; width: clamp(140px, 26vw, 320px); opacity: .9; }
section:not(#viagem) > :not(.enfeite):not(.faixa-chita) { position: relative; z-index: 1; }

.categoria { margin-top: 3rem; max-width: 56rem; }
.categoria h2 { font-family: var(--titulo); font-weight: 400; font-size: 1.5rem; color: var(--flor); border-bottom: 1px solid rgb(221 204 156 / .25); padding-bottom: .4rem; }
.categoria ul { list-style: none; padding: 0; }
.item { display: grid; grid-template-columns: auto 1fr auto auto; gap: 1rem; align-items: center; padding: 1rem 0; border-bottom: 1px dashed rgb(221 204 156 / .18); }
.item img { width: 72px; height: 72px; object-fit: cover; border-radius: 12px; }
.item > div { grid-column: 2; }
.item h3 { font-size: 1.1rem; }
.item p { opacity: .8; font-size: .95rem; line-height: 1.4; margin-top: .2rem; }
.item .preco { font-size: 1.1rem; white-space: nowrap; }
.pedir { border: 1px solid var(--creme); border-radius: 999px; padding: .4rem .9rem; text-decoration: none; font-size: .9rem; }
@media (max-width: 520px) {
  .item { grid-template-columns: 1fr auto; }
  .item img { display: none; }
  .item > div { grid-column: 1; }
  .item .pedir { grid-column: 1 / -1; text-align: center; }
}

#avaliacoes, #local { background: var(--mata); }
#reserva { background: #a83c30; color: #fff; overflow: hidden; }   /* as folhas pintadas saem pela borda */   /* --flor escurecido: branco passa de 4,5 de contraste */
#reserva .botao { background: var(--mata); color: var(--creme); }
#depoimentos { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr)); margin-top: 2rem; max-width: 60rem; }
blockquote { border-left: 3px solid var(--flor); padding-left: 1rem; line-height: 1.5; }
cite { display: block; margin-top: .5rem; opacity: .7; font-style: normal; }
footer { background: var(--noite); text-align: center; display: grid; justify-items: center; gap: 1rem; }
footer img { border-radius: 50%; }

@media (max-width: 700px) { #viagem { height: 1350vh; } }
@media (prefers-reduced-motion: reduce) {
  .flor path { animation: none; transform: rotate(var(--a)); } #abertura { transition: none; }
  .lampada, .vapor path, .viva, .samambaia, .pend, .varal, .planta, .vagalumes i { animation: none; }
  #viagem { height: 100svh; }   /* sem viagem: o prato já aparece montado */
}