/* =========================================================================
   Palaphita — página inicial: a história em 7 momentos.

   Cada momento é uma "cena": uma secção alta (que dá o comprimento do scroll)
   com um palco colado ao ecrã. O JavaScript só escreve um número, --p, de 0 a 1,
   que diz quanto da cena já passou. Todo o resto — o texto a surgir, as fotos
   a subir — é CSS a ler esse número. Assim o movimento acompanha o dedo ou o
   rato 1:1, sem atrasos artificiais.
   ========================================================================= */

.scene{
  position:relative; height:175vh;
  color:var(--texto);   /* sem fundo: o palco cobre tudo, e um fundo aqui apareceria atrás da onda da borda */
  --p:0; --rgb:38,54,43; --fundo:#26362B; --texto:#F1E9DC; --acento:#CE9A4E;
}
.scene-stage{
  position:sticky; top:0; height:100vh; height:100svh; overflow:hidden;
}

/* um tema de cor por momento */
.scene[data-tema="floresta"]  { --rgb:38,54,43; --fundo:#26362B; --texto:#F1E9DC; --acento:#CE9A4E; }
.scene[data-tema="terracota"] { --rgb:142,68,32; --fundo:#8E4420; --texto:#F6EBDD; --acento:#F0C98B; }
.scene[data-tema="musgo"]     { --rgb:63,82,56; --fundo:#3F5238; --texto:#F1E9DC; --acento:#E2C27E; }
.scene[data-tema="madeira"]   { --rgb:74,47,26; --fundo:#4A2F1A; --texto:#F1E9DC; --acento:#E0AE62; }
.scene[data-tema="atlantico"]  { --rgb:35,66,76; --fundo:#23424C; --texto:#F1E9DC; --acento:#E7C47E; }
.scene[data-tema="areia"]     { --rgb:232,220,200; --fundo:#E8DCC8; --texto:#2E1B10; --acento:#2F5A66; }
.scene[data-tema="noite"]     { --rgb:28,38,32; --fundo:#1c2620; --texto:#F1E9DC; --acento:#CE9A4E; }

/* a borda de cima de cada cena é uma onda — nunca uma linha recta.
   Só existe enquanto a cena entra no ecrã: o JS escreve --e (1 → 0) e a onda achata-se
   no instante em que a cena encosta ao topo. */
.scene-stage.has-edge{
  -webkit-mask:
    url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 58' preserveAspectRatio='none'%3E%3Cpath d='M0,58 L0,30 C150,6 300,50 450,28 C600,6 750,48 900,26 C1050,6 1130,36 1200,22 L1200,58 Z'/%3E%3C/svg%3E") top / 100% calc(var(--e, 0) * 58px) no-repeat,
    linear-gradient(#000,#000) bottom / 100% calc(100% - var(--e, 0) * 58px) no-repeat;
          mask:
    url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 58' preserveAspectRatio='none'%3E%3Cpath d='M0,58 L0,30 C150,6 300,50 450,28 C600,6 750,48 900,26 C1050,6 1130,36 1200,22 L1200,58 Z'/%3E%3C/svg%3E") top / 100% calc(var(--e, 0) * 58px) no-repeat,
    linear-gradient(#000,#000) bottom / 100% calc(100% - var(--e, 0) * 58px) no-repeat;
}

/* cada cena sobrepõe-se 58 px ao fim da anterior: é por aí que a onda da borda deixa ver a cena de trás */
.scene:not(.scene-hero){ margin-top:-58px; }

/* foto principal: tela cheia, com um véu da cor do momento para o texto se ler */
.bg{ position:absolute; inset:-4% 0; overflow:hidden; }
.bg picture{ display:block; width:100%; height:100%; }
.bg img{
  width:100%; height:100%; object-fit:cover; object-position:var(--pos, 50% 50%);
  transform:scale(calc(1.16 - .1 * var(--p))) translate3d(0, calc((.5 - var(--p)) * 6%), 0);
  will-change:transform;
}
.bg-scrim{
  position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(0deg, rgba(var(--rgb), .93) 0%, rgba(var(--rgb), .6) 30%, rgba(var(--rgb), .12) 60%, rgba(var(--rgb), .3) 100%),
    rgba(var(--rgb), .08);
}

/* ------------------------------------------------- momento 1 · abertura --- */
.scene-hero{ height:300vh; --fundo:#1c2620; --texto:#F1E9DC; }
.hero-video{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  object-position:calc(50% + var(--pan, 0) * 50%) 50%;
}
.hero-scrim{
  position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(0deg, rgba(14,10,7,.74) 0%, rgba(14,10,7,.1) 52%, rgba(14,10,7,.42) 100%);
}
.hero-logo{
  position:absolute; left:50%; top:46%; width:clamp(290px,60vw,880px);
  transform:translate(-50%,-50%) translateY(calc(var(--p) * -24vh)) scale(calc(1 - var(--p) * .42));
  opacity:min(clamp(0, calc((var(--p) - .05) / .12), 1), clamp(0, calc((.84 - var(--p)) / .1), 1));
}
.hero-logo svg{ width:100%; height:auto; }
.hero-logo .st0, .hero-logo .st1{ fill:#F1E9DC; }
.hero-titulo{
  position:absolute; left:0; right:0; bottom:calc(11vh + 2.4rem); margin:0; padding:0 6vw; text-align:center;
  font:italic 500 clamp(1.6rem,4vw,3.5rem)/1.1 var(--display); letter-spacing:-.01em; text-wrap:balance;
  opacity:min(clamp(0, calc((var(--p) - .1) / .12), 1), clamp(0, calc((.7 - var(--p)) / .1), 1));
  transform:translateY(calc((1 - clamp(0, calc((var(--p) - .1) / .16), 1)) * 34px));
}
.hero-titulo span{ display:block; }
.scroll-cue{
  position:absolute; left:50%; bottom:3.6vh; transform:translateX(-50%);
  font-family:var(--mono); font-size:.68rem; letter-spacing:.2em; text-transform:uppercase; opacity:.8;
  display:flex; flex-direction:column; align-items:center; gap:.5rem;
  opacity:clamp(0, calc((.1 - var(--p)) / .06), .8);
}
.scroll-cue svg{ width:13px; height:19px; }

/* ----------------------------------------------- momentos 2 a 6 · palavra --- */
/* palavra e frase de um lado, parágrafo curto do outro: o centro da foto fica livre */
.scene-text{
  position:absolute; left:6vw; right:6vw; bottom:9vh; z-index:2;
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,38ch);
  grid-template-areas:"word panel" "phrase phrase";
  align-items:end; column-gap:4vw;
}
.scene[data-layout="b"] .scene-text{
  grid-template-columns:minmax(0,38ch) minmax(0,1fr);
  grid-template-areas:"panel word" "phrase phrase";
}
.scene[data-layout="b"] .word, .scene[data-layout="b"] .phrase{ justify-self:end; text-align:right; }

.word{
  grid-area:word; margin:0; white-space:nowrap; padding:0 .12em 0 .04em;   /* o itálico sai da caixa: sem isto a última letra é cortada */
  font:italic 500 clamp(2.8rem,9vw,9.4rem)/.96 var(--display); letter-spacing:-.025em;
  /* revela da esquerda para a direita, subindo um pouco */
  clip-path:inset(-12% calc((1 - clamp(0, calc((var(--p) - .2) / .2), 1)) * 100%) -12% 0);
  opacity:clamp(0, calc((var(--p) - .2) / .08), 1);
  transform:translateY(calc((1 - clamp(0, calc((var(--p) - .2) / .2), 1)) * 56px));
}
.phrase{
  grid-area:phrase; margin:1.1rem 0 0; max-width:34ch; text-wrap:balance;
  font:400 clamp(1.05rem,1.75vw,1.6rem)/1.45 var(--texto);
  opacity:clamp(0, calc((var(--p) - .34) / .12), 1);
  transform:translateY(calc((1 - clamp(0, calc((var(--p) - .34) / .16), 1)) * 26px));
}
/* no computador a frase é uma tagline: numa só linha, maior */
@media (min-width:801px){
  .phrase{ max-width:none; white-space:nowrap; font-size:clamp(1.05rem,1.35vw,1.4rem); letter-spacing:.01em; }
}
/* texto curto do botão do menu aceso: simples, sem caixa */
.scene-panel{
  grid-area:panel; margin:0 0 .35rem; max-width:42ch;
  font-size:clamp(.92rem,1.1vw,1.04rem); line-height:1.65; color:rgba(244,236,224,.86);
  opacity:clamp(0, calc((var(--p) - .42) / .12), 1);
  transform:translateY(calc((1 - clamp(0, calc((var(--p) - .42) / .16), 1)) * 18px));
}
.scene-panel a{
  display:inline-block; margin-top:.85rem;
  font:500 .7rem/1 var(--mono); letter-spacing:.14em; text-transform:uppercase;
  color:#fff; text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:.5em;
  text-decoration-color:rgba(255,255,255,.45);
  transition:color .3s var(--ease-out), text-decoration-color .3s var(--ease-out);
}
.scene-panel a:hover{ color:var(--acento); text-decoration-color:var(--acento); }

/* Autêntico: o mesmo filtro de terracota, mais leve, para a comida aparecer sem perder a leitura do texto */
#autentico .bg-scrim{
  background:
    linear-gradient(0deg, rgba(var(--rgb), .76) 0%, rgba(var(--rgb), .44) 30%, rgba(var(--rgb), .05) 60%, rgba(var(--rgb), .14) 100%);
}

/* ------------------------------------------------------ momento 7 · fecho --- */
.scene-fecho{ height:480vh; }
.fecho-text{
  position:absolute; left:6vw; top:calc(var(--nav-h) + 5vh); bottom:6vh; width:52vw; z-index:2;
  display:flex; flex-direction:column; justify-content:space-between;
}
.fecho-palavras{
  list-style:none; margin:0; padding:0; display:grid; gap:.1em;
  font:italic 500 clamp(1.8rem,4.2vw,4rem)/1.06 var(--display); letter-spacing:-.02em;
}
.fecho-palavras li{
  /* a troca é por tempo, não por posição do scroll: a palavra entra inteira, sem tremer */
  opacity:0; transform:translateX(-40px);
  transition:opacity .7s var(--ease-out), transform .7s var(--ease-out);
}
.fecho-palavras li.is-on{ opacity:.5; transform:none; }
.fecho-palavras li.is-now{ opacity:1; }
.fecho-palavras.fim li.is-on{ opacity:.35; }
.fecho-fim{ display:grid; gap:1.15rem; }
.fecho-frase{
  margin:0; max-width:32ch; text-wrap:balance;
  font:600 clamp(.95rem,1.7vw,1.45rem)/1.35 var(--texto); letter-spacing:.07em; text-transform:uppercase;
  color:var(--acento);
  opacity:clamp(0, calc((var(--p) - .70) / .08), 1);
  transform:translateY(calc((1 - clamp(0, calc((var(--p) - .70) / .1), 1)) * 24px));
}
.fecho-final{
  margin:0; max-width:36ch; font:italic 500 clamp(1.05rem,1.7vw,1.5rem)/1.4 var(--display);
  opacity:clamp(0, calc((var(--p) - .80) / .08), 1);
}
.fecho-logo{
  width:clamp(190px,22vw,320px);
  opacity:clamp(0, calc((var(--p) - .90) / .08), 1);
}
.fecho-logo svg{ width:100%; height:auto; }
.fecho-logo .st0, .fecho-logo .st1{ fill:#F1E9DC; }

/* cada palavra tem a sua foto em tela cheia. A nova entra por cima da anterior (que fica por baixo, opaca),
   por isso nunca há um instante em que se vêem duas fotos misturadas nem um fundo vazio */
.fecho-bg{ opacity:0; transition:opacity .9s ease; }
.fecho-bg.is-on{ opacity:1; }
.fecho-bg img{ transform:scale(1.05); will-change:auto; }

/* o lado do texto escurece para as palavras se lerem sobre qualquer foto */
.scene-fecho .bg-scrim{
  background:
    linear-gradient(90deg, rgba(var(--rgb), .86) 0%, rgba(var(--rgb), .6) 38%, rgba(var(--rgb), .1) 70%, transparent 100%),
    linear-gradient(0deg, rgba(var(--rgb), .55) 0%, transparent 38%);
}


/* ------------------------------------------------------------------ móvel -- */
@media (max-width:800px){
  .scene{ height:175vh; }
  .scene-fecho{ height:460vh; }
  .scene-hero{ height:280vh; }

  .scene-text, .scene[data-layout="b"] .scene-text{ display:block; left:6vw; right:6vw; bottom:calc(6vh + 52px); }
  .scene[data-layout="b"] .word, .scene[data-layout="b"] .phrase{ text-align:left; }
  .scene-panel{ margin-top:1.1rem; }
  .word{ font-size:clamp(2.5rem,14.6vw,5.4rem); }
  .phrase{ font-size:1.05rem; max-width:30ch; }

  .scene-fecho .bg-scrim{ background:linear-gradient(180deg, rgba(var(--rgb), .88) 0%, rgba(var(--rgb), .6) 40%, rgba(var(--rgb), .1) 68%, transparent 100%), linear-gradient(0deg, rgba(var(--rgb), .82) 0%, rgba(var(--rgb), .55) 32%, transparent 58%); }
  .fecho-text{ width:auto; right:6vw; bottom:calc(6vh + 52px); }
  .fecho-palavras{ font-size:clamp(1.9rem,10vw,3.4rem); }
  .fecho-frase{ max-width:none; }
  .hero-logo{ width:78vw; }
  .scroll-cue{ bottom:calc(3.6vh + 58px); }   /* acima dos botões fixos Agenda e Reservas */
}

/* quem pede menos movimento recebe a página em blocos normais, sem paralaxe */
@media (prefers-reduced-motion:reduce){
  .scene, .scene-hero, .scene-fecho{ height:auto; --p:1; }
  .scene-hero{ --p:.3; }
  .scene-stage{ position:relative; height:auto; min-height:100vh; }
  .word, .phrase, .scene-panel, .fecho-palavras li{ transform:none !important; }
  .fecho-palavras li, .fecho-bg{ opacity:1 !important; }
  .word{ clip-path:none; }
}