/* ==========================================================================
   Kallos Sucos — hero-4-vidro.css
   HERO — OPÇÃO 4: o suco enche a tela conforme a rolagem (ativa).

   Este é o arquivo que veio pronto, copiado como estava — mesmas classes,
   mesmas medidas, mesmas animações. A cena é dirigida pelo GSAP + ScrollTrigger
   (ver o bloco no fim de index.html), e não pela mecânica de scroll do main.js.

   DUAS Únicas mudanças em relação ao original, ambas de escopo — o arquivo
   original era uma página sozinha, só com o hero, e estas duas regras eram
   globais nele:

     1. Os tokens de cor saíram de :root para .hero-scroll. Em :root, o
        --verde #049107 e o --marrom #4C2A0C sobrescreveriam as cores da marca
        (que são #1a5a33 e #6e3e25, amostradas do logo) no site inteiro —
        cabeçalho, botões e rodapé mudariam de cor junto. Dentro do hero o
        resultado é exatamente o mesmo.
     2. A fonte Nunito Sans saiu de body para .hero-scroll, pelo mesmo motivo:
        no body ela trocaria a tipografia de todas as outras seções.

   O Bootstrap não veio junto: no arquivo original ele só servia a seção de
   exemplo "Resto do site vem aqui" (.py-5 .container), nada do hero.

   As opções 1, 2 e 3 seguem guardadas — ver _naopublicar/_arquivo/heros/LEIA-ME.md.
   ========================================================================== */

/* --------------------------------------------------------- */
/* -- begin:: Tokens                                          */
/* --------------------------------------------------------- */
.hero-scroll{
  --verde:#049107;
  --suco:#FDCE01;
  --laranja:#F08A00;
  --marrom:#4C2A0C;
  font-family:'Nunito Sans',sans-serif;
  color:var(--marrom);
}

/* --------------------------------------------------------- */
/* -- begin:: Trilho e palco                                  */
/* --------------------------------------------------------- */
/* A rolagem real do hero e esta altura MENOS os 100svh do palco sticky,  */
/* e e nesse trecho que a tela fica travada: 260 aqui = 160svh de scroll  */
/* com o palco preso no topo. Encurtar demais nao acelera a animacao      */
/* apenas: espreme a cena toda num espaco onde ela mal aparece.           */
.hero-scroll{ position:relative; height:260svh; }

/* O palco prende ABAIXO do cabecalho, e nao no topo da janela.

   Com top:0 e 100svh ele nascia em y=76px (o hero comeca depois do
   cabecalho no fluxo) e passava 76px da borda de baixo: o leito de gelo
   ficava cortado. Ao primeiro toque de rolagem o sticky puxava tudo pra
   y=0 de uma vez, e a cena inteira dava um salto de 76px.

   Descontando a altura do cabecalho dos dois lados - do 'top' e da altura
   - o palco ja nasce exatamente no lugar onde vai ficar preso. Nao ha
   salto nenhum, e o quadro aparece inteiro desde o primeiro pixel.

   O gatilho do GSAP tem que comecar no mesmo ponto; ver o 'start' da
   linha do tempo no fim de index.html.                                */
.hero-palco{
  position:sticky; top:var(--header-h);
  height:calc(100svh - var(--header-h));
  overflow:hidden;
  isolation:isolate;
  background:linear-gradient(180deg,#FFF0BC 0%,#FFE199 100%);
}

/* --------------------------------------------------------- */
/* -- begin:: Fundo em tres camadas                           */
/*                                                            */
/* 1. .hero-nivel  o suco que sobe conforme o scroll          */
/* 2. .hero-luz    manchas quentes que derivam sozinhas,      */
/*                 como sol atravessando liquido              */
/* 3. .hero-brilho reflexo no topo, fixo                      */
/* --------------------------------------------------------- */
.hero-nivel{
  position:absolute; z-index:1;
  left:0; right:0; bottom:0;
  height:100%;
  background:linear-gradient(180deg,
    transparent 0%,
    #FFD54A 22%,
    #FDB913 55%,
    #EE8000 100%);
  transform-origin:bottom;
  transform:scaleY(.28);            /* comeca baixo: o "copo" quase vazio */
  will-change:transform;
  pointer-events:none;
}

.hero-luz{ position:absolute; z-index:1; inset:-20%; pointer-events:none; }
.hero-luz i{
  position:absolute; display:block;
  border-radius:50%;
  filter:blur(60px);
  mix-blend-mode:screen;
}
.hero-luz i:nth-child(1){
  width:52%; aspect-ratio:1; left:8%; top:14%;
  background:radial-gradient(circle,#FFF6C0,transparent 66%);
  opacity:.75;
  animation:deriva1 26s ease-in-out infinite;
}
.hero-luz i:nth-child(2){
  width:44%; aspect-ratio:1; right:4%; top:32%;
  background:radial-gradient(circle,#FFE070,transparent 66%);
  opacity:.6;
  animation:deriva2 34s ease-in-out infinite;
}
.hero-luz i:nth-child(3){
  width:60%; aspect-ratio:1; left:26%; bottom:6%;
  background:radial-gradient(circle,#FFFFFF,transparent 62%);
  opacity:.32;
  animation:deriva3 42s ease-in-out infinite;
}
@keyframes deriva1{
  0%,100%{ translate:0 0;        scale:1;    }
  50%    { translate:14% 8%;     scale:1.18; }
}
@keyframes deriva2{
  0%,100%{ translate:0 0;        scale:1.1;  }
  50%    { translate:-12% -10%;  scale:.9;   }
}
@keyframes deriva3{
  0%,100%{ translate:0 0;        scale:.95;  }
  50%    { translate:-16% 6%;    scale:1.22; }
}

/* Reflexo de topo, como a superficie do liquido. O creme no lugar do
   branco puro e o que segura o amarelo la em cima: com #FFF a 55% o
   degrade do palco chegava lavado, quase branco, nos primeiros 42%.  */
.hero-brilho{
  position:absolute; z-index:1; inset:0 0 auto;
  height:42%;
  background:linear-gradient(180deg,rgba(255,247,205,.5),transparent);
  pointer-events:none;
}

/* --------------------------------------------------------- */
/* -- begin:: Base de gelo e laranjas                         */
/* Fica NA FRENTE da garrafa: assim ela parece assentada      */
/* dentro do gelo, e nao colada por cima dele.                */
/* --------------------------------------------------------- */
/* Ancora e subida do GSAP se puxam: quanto mais fundo eu ancoro, mais o  */
/* vale central afunda e a garrafa boia; quanto mais a camada sobe na     */
/* rolagem, mais ela descola do rodape e mostra a faixa laranja do        */
/* .hero-nivel. Com a tira atual (5,5:1, so ~48svh de altura na tela) o   */
/* espaco entre os dois e curto: -2 aqui e 'y:-1svh' no GSAP e o par que  */
/* fecha, terminando a rolagem 1svh abaixo da borda do palco.             */
.hero-base{
  position:absolute; z-index:5;
  left:50%; bottom:-2svh;
  width:124%; min-width:1180px;
  transform:translateX(-50%);
  pointer-events:none; will-change:transform;
}
.hero-base img{ width:100%; height:auto; display:block; }

/* --------------------------------------------------------- */
/* -- begin:: Elementos que orbitam                           */
/* fundo  = pequeno e desfocado, atras da garrafa             */
/* meio   = nitido, no plano da garrafa                       */
/* frente = grande e desfocado, passa POR CIMA de tudo        */
/* O desfoque nos extremos imita profundidade de campo.       */
/* --------------------------------------------------------- */
.orb{
  position:absolute;
  left:50%; top:50%;
  width:var(--w,140px);
  margin:calc(var(--w,140px) / -2);
  pointer-events:none; will-change:transform;
}
.orb img{ width:100%; height:auto; display:block; }

.orb.is-fundo { z-index:2; filter:blur(3px) drop-shadow(0 10px 14px rgba(120,60,0,.22)) brightness(.94); }
.orb.is-meio  { z-index:3; filter:drop-shadow(0 14px 18px rgba(120,60,0,.26)); }
.orb.is-frente{ z-index:6; filter:blur(5px) drop-shadow(0 22px 28px rgba(120,60,0,.30)); }

/* --------------------------------------------------------- */
/* -- begin:: Garrafa                                         */
/* --------------------------------------------------------- */
.hero-produto{
  position:absolute; z-index:4;
  left:0; right:0; top:50%;
  display:flex; justify-content:center;
  will-change:transform;
}
/* Altura e recuo andam juntos: o topo da garrafa fica em 50% - margin-top
   e a base em 50% - margin-top + height. Mexer so na altura afunda a base
   no gelo e come o "1 litro"; mexer so no recuo joga a tampa pra tras do
   cabecalho sticky. Hoje: topo em 10svh, base em 89svh - medidos a partir
   do topo do PALCO, que e a janela menos o cabecalho.

   Dai o desconto do --header-h nos dois valores: o palco encolheu essa
   altura quando passou a prender abaixo do cabecalho, e sem descontar
   junto a garrafa afundava metade dela no gelo. Com o desconto ela so
   acompanha o quadro menor, e as duas folgas ficam onde estavam.       */
.hero-garrafa{
  height:min(79svh - var(--header-h), 770px); width:auto;
  margin-top:calc(-40svh + var(--header-h) / 2);
  filter:drop-shadow(0 30px 34px rgba(120,60,0,.30));
  animation:boiar 7s ease-in-out infinite;
}
@keyframes boiar{
  0%,100%{ translate:0 0; }
  50%    { translate:0 -16px; }
}

/* --------------------------------------------------------- */
/* -- begin:: Textos                                          */
/*                                                            */
/* Tres etapas em tres CANTOS, e elas nao se apagam: cada uma  */
/* entra no seu ponto da rolagem e FICA. No fim da cena as     */
/* tres estao na tela ao mesmo tempo, emoldurando a garrafa -  */
/* selo e titulo em cima a esquerda, a segunda a direita no    */
/* meio, a terceira embaixo a esquerda.                        */
/*                                                            */
/* Trocar uma pela outra no mesmo lugar era o que dava o corte */
/* seco na rolagem: o olho perdia a frase anterior de uma vez. */
/* Acumulando, cada entrada e um acrescimo, nao uma troca.     */
/*                                                            */
/* O card de vidro fosco que ficava atras saiu: ele borrava a  */
/* garrafa por baixo e virava um retangulo colado sobre a foto.*/
/* Sem o card o contraste passa a ser tarefa do TEXTO, e por   */
/* isso ele e marrom escuro em vez de branco. Sobre o creme e  */
/* o amarelo do fundo isso da ~10:1, contra os ~1,8:1 do       */
/* branco de antes: sair do vidro melhorou a leitura junto.    */
/* --------------------------------------------------------- */
.hero-coluna{
  /* O recuo nao e um valor solto: e a mesma coluna do .container do resto
     do site (1200px centrado + gutter), pra o titulo nascer alinhado com
     o logo do cabecalho. Em tela estreita o max() cai no proprio gutter
     e o calc de centralizar some. E 100%, nao 100vw: usada em left/right
     a porcentagem resolve contra a largura do palco, enquanto 100vw
     contaria a barra de rolagem e jogaria a coluna 15px pra dentro.   */
  --recuo:max(var(--gutter), calc((100% - var(--container)) / 2 + var(--gutter)));

  position:absolute; z-index:7;
  /* sem somar o cabecalho aqui: o palco ja comeca abaixo dele, e o
     desconto sairia dobrado, jogando o selo pro meio da tela */
  top:6svh;
  right:var(--recuo); bottom:5svh; left:var(--recuo);
  text-align:left;
  /* a camada inteira deixa o ponteiro passar: e por cima dela que o mouse
     limpa as goticulas do palco. So o link da ultima etapa recebe clique. */
  pointer-events:none;
}

.hero-bloco{
  position:absolute;
  /* O texto nao pode invadir a garrafa, que e centrada e esta por baixo
     (z-index 4 contra 7). Aqui o 50% ja e a metade da coluna util, entao
     a borda de dentro cai exatamente 18svh antes do centro da tela. A
     garrafa tem 79svh de altura por 0.37 de proporcao, ou seja ~14,6svh
     de meia-largura: 18svh e ela mais a folga. Mexeu na altura da
     garrafa? Mexe aqui junto.                                          */
  max-width:min(420px, calc(50% - 18svh));
}

/* Os tres cantos. A segunda etapa alinha a direita porque encostada
   naquela borda o texto justificado a esquerda fica solto no ar. */
/* A primeira leva mais largura que as outras duas porque na altura dela
   quem esta ao lado e o GARGALO da garrafa, nao o corpo: a barriga so
   comeca por volta de 26svh, e ate la sobra tela. Sem essa folga o
   titulo maior quebrava "Suco de laranja" em duas linhas, e cada linha
   aqui tem o proprio recorte - a quebra apareceria como uma terceira
   linha entrando sem animacao.                                       */
.hero-bloco[data-etapa="0"]{ top:0;    left:0; max-width:min(520px, calc(50% - 14svh)); }
/* As duas de baixo subiram: centrada e colada no pe, a segunda ficava na
   linha do rotulo e a terceira jogava o botao pra cima do botao flutuante
   do WhatsApp. Subindo as duas, o trio abre uma diagonal em volta da
   garrafa e o pe da tela respira. Sao estes dois numeros que regulam a
   altura de cada uma - o 'top' da segunda mede o CENTRO dela, porque o
   translate de -50% continua valendo.                                  */
.hero-bloco[data-etapa="1"]{ top:36%;     right:0; transform:translateY(-50%); text-align:right; }
.hero-bloco[data-etapa="2"]{ bottom:14%;  left:0; }

/* O selo alinhava pela BORDA da pilula, entao a letra dentro dele comecava
   1rem a direita do "S" de "Suco". Puxo o recorte inteiro pra tras desse
   1rem pra letra alinhar com letra. Vai no .mask e nao no selo porque o
   recorte tem overflow:hidden: no filho, a margem negativa seria cortada.

   So no desktop: em tela estreita o recuo da coluna cai pro gutter minimo
   (20px) e 1rem pra fora deixaria o selo a 4px da borda da tela.       */
@media (min-width:992px){
  .hero-bloco .d1{ margin-left:-1rem; }
  .hero-bloco[data-etapa="1"] .d1{ margin-left:0; margin-right:-1rem; }
}

.hero-bloco a{ pointer-events:none; }
.hero-bloco.is-ativo a{ pointer-events:auto; }

/* --- Mascara: cada linha sobe de dentro do proprio recorte --- */
/* A transicao mora AQUI, no estado de repouso, e nao so no .is-ativo:
   declarada so no ativo, a linha entra suave e sai num corte seco quando
   a pessoa volta pra cima. Como as etapas nao se apagam mais, essa saida
   so acontece rolando de volta, e e justamente ali que o corte aparecia. */
.mask{ display:block; overflow:hidden; }
.mask > *{
  display:block;
  transform:translateY(115%);
  opacity:0;
  transition:transform .5s cubic-bezier(.4,0,.2,1), opacity .35s linear;
}
/* pilula e botao sao inline-flex por natureza; o 'block' acima esticaria
   os dois pela largura inteira da coluna */
.mask > .hero-eyebrow,
.mask > .btn{ display:inline-flex; }

.hero-bloco.is-ativo .mask > *{
  transform:translateY(0);
  opacity:1;
  /* entrada mais longa que a saida, e com desaceleracao forte no fim:
     e o que faz a linha parecer pousar em vez de bater no lugar */
  transition:transform .9s cubic-bezier(.16,1,.3,1), opacity .5s linear;
}
/* o escalonamento e o que faz ler como uma frase sendo dita, e nao como
   um bloco inteiro aparecendo de uma vez. So na entrada: na volta as
   linhas recolhem juntas, senao a saida arrasta quase um segundo. */
.hero-bloco.is-ativo .d1 > *{ transition-delay:.04s; }
.hero-bloco.is-ativo .d2 > *{ transition-delay:.16s; }
.hero-bloco.is-ativo .d3 > *{ transition-delay:.28s; }
.hero-bloco.is-ativo .d4 > *{ transition-delay:.40s; }

/* --- Tipografia --- */
.hero-eyebrow{
  display:inline-flex; gap:.5rem;
  background:#fff; color:var(--verde);
  border-radius:.5rem; padding:.5rem 1rem;
  font-size:.74rem; font-weight:700;
  letter-spacing:.2em; text-transform:uppercase;
  box-shadow:0 8px 20px rgba(120,60,0,.16);
}
.hero-title{
  font-family:'Fredoka',sans-serif;
  font-size:clamp(2.4rem,5.6vw,4.1rem);
  font-weight:700; line-height:1.02; letter-spacing:-.02em;
  color:var(--marrom);
  margin:1rem 0 0;
  /* Halo de luz, nao sombra de card: as laranjas e os gelos do plano da
     frente passam POR TRAS do texto, e sobre a fruta escura o marrom
     perdia a borda. Um pixel de claro resolve sem desenhar caixa.     */
  text-shadow:0 1px 0 rgba(255,255,255,.5);
}
/* A segunda linha de cada titulo e sempre o argumento ("de verdade",
   "adicionado", "bem gelado"), e e ela que leva a cor da marca. Vira um
   padrao: depois do primeiro titulo o olho ja sabe que a linha verde e
   onde esta a promessa. Antes disso a tipografia do hero era marrom de
   ponta a ponta e a cor da marca so aparecia nos selos.

   Verde sobre o creme do fundo da ~4:1, bem acima dos 3:1 que texto
   grande pede. Nao vale descer esse realce pro corpo do texto: no
   tamanho de leitura ele reprovaria.                                 */
.hero-realce{ color:var(--verde); }

/* As tres convivem na tela no fim da cena, entao a hierarquia precisa
   aparecer: o h1 e o maior, os h2 vem abaixo dele. Subiram juntos, e a
   distancia entre os dois foi mantida de proposito. */
h2.hero-title{ font-size:clamp(1.9rem,3.8vw,2.8rem); }

/* Do titulo pro corpo o salto era de 4,1rem pra 1,05rem, e ainda com
   opacidade rebaixada: sobre a foto o paragrafo praticamente sumia. Ele
   e quem sustenta a alegacao ("sem conservante, sem concentrado"), nao
   pode ser o elemento mais fraco da tela. Subiu de corpo e de peso, e a
   opacidade saiu; a hierarquia continua garantida pelo tamanho.

   O balance conserta o rag: sem ele "nada de po, nada de xarope, nada de
   / concentrado" quebrava no meio da enumeracao.                     */
.hero-desc{
  font-size:1.15rem; line-height:1.5; font-weight:500;
  color:var(--marrom);
  max-width:34ch; margin:1rem 0 0;
  text-wrap:balance;
  text-shadow:0 1px 0 rgba(255,255,255,.5);
}
.hero-bloco[data-etapa="1"] .hero-desc{ margin-left:auto; }
/* A FORMA do botao vem do .btn do site (raio, peso, o levantar no hover).
   A cor nao: em verde solido ele brigava com o botao flutuante do
   WhatsApp, que e verde, solido e mora na mesma faixa horizontal da tela
   - dois botoes de mesmo peso e o olho nao sabe qual e o principal.

   O amarelo da marca (#ffdd00) resolveria a briga mas nao serve aqui: o
   hero inteiro e amarelo. Sobrou o marrom, que e a cor de maior contraste
   nesta cena (funciona sobre o fundo claro, sobre o gelo e sobre a
   laranja) e ainda amarra com os titulos. O verde volta no hover, onde
   ser chamativo e o que se espera.                                    */
.hero-btn{
  margin-top:1.6rem; padding:1rem 2.2rem; font-size:1rem;
  background:var(--marrom); color:var(--creme);
  box-shadow:0 14px 28px rgba(76,42,12,.30);
}
.hero-btn:hover{ background:var(--verde); color:#fff; }

.hero-rolar{
  position:absolute; z-index:7;
  left:50%; bottom:1.6rem; transform:translateX(-50%);
  color:#fff; font-size:.74rem; font-weight:700;
  letter-spacing:.18em; text-transform:uppercase;
  display:flex; flex-direction:column; align-items:center; gap:.45rem;
  text-shadow:0 3px 10px rgba(150,80,0,.35);
}
.hero-rolar span{
  width:2px; height:30px; border-radius:2px;
  background:linear-gradient(180deg,#fff,transparent);
  animation:desce 1.8s ease-in-out infinite;
}
@keyframes desce{
  0%  { scale:1 .3; transform-origin:top;    opacity:.4; }
  50% { scale:1 1;  transform-origin:top;    opacity:1; }
  100%{ scale:1 .3; transform-origin:bottom; opacity:.4; }
}

/* --------------------------------------------------------- */
/* -- begin:: Efeito gelo do hero                             */
/*                                                            */
/* Duas camadas, em lados opostos da cena:                    */
/*                                                            */
/* 1. .fumaca  vapor de gelo subindo, ATRAS da garrafa        */
/*             (z-index 3). Fica atras de proposito: por cima */
/*             ela embaçava o produto e lavava a cena inteira. */
/* 2. .frost   so as goticulas de condensacao, na frente      */
/*             (z-index 6), como se fossem no vidro da tela.  */
/*             Sem desfoque nenhum: nada aqui apaga a cena.   */
/*                                                            */
/* O mouse limpa um circulo das goticulas (--mx/--my abrem um */
/* buraco na mascara), as vizinhas fogem dele (o JS escreve   */
/* 'translate' em cada gota) e todas somem conforme o hero    */
/* sai da tela (--intensity).                                 */
/* --------------------------------------------------------- */

/* --- 1. Vapor de gelo, atras da garrafa ------------------- */
.fumaca{
  position:absolute; inset:0; z-index:3;
  overflow:hidden; pointer-events:none;
}
/* Cada baforada sobe, abre e se desfaz. Os --atraso e --dur
   diferentes sao o que impede o conjunto de pulsar junto.

   O branco puro sumia: sobre o creme do fundo nao ha contraste
   de luminancia nenhum. O tom gelado (azulado) resolve por
   contraste de COR, e ainda le como "frio" em vez de "neblina".

   Mais alta que larga, de proposito: vapor sobe em coluna. */
.fumaca span{
  position:absolute;
  bottom:-14%;
  left:var(--x);
  width:var(--w,20rem); height:calc(var(--w,20rem) * 1.5);
  background:radial-gradient(ellipse 48% 52% at 50% 62%,
    rgba(232,248,255,.92),
    rgba(198,232,252,.45) 44%,
    rgba(186,226,250,0) 70%);
  filter:blur(20px);
  opacity:0;
  animation:subirFumaca var(--dur,14s) ease-out var(--atraso,0s) infinite;
}
@keyframes subirFumaca{
  0%  { transform:translate3d(-50%, 14%, 0) scale(.5)  skewX(0deg);  opacity:0; }
  20% { opacity:var(--op,.7); }
  65% { opacity:calc(var(--op,.7) * .55); }
  100%{ transform:translate3d(calc(-50% + var(--desvio,3vw)), -92%, 0) scale(1.7) skewX(6deg); opacity:0; }
}

/* --- 2. Goticulas de condensacao, na frente --------------- */
.frost{
  position:absolute; inset:0; z-index:6; pointer-events:none;
  --mx:50%; --my:140%;   /* comeca fora da tela = nada limpo */
  --intensity:1;
  opacity:var(--intensity);
  transition:opacity .2s linear;
  /* Buraco menor que o raio de repulsao do JS (230px): assim a gota
     some so bem no centro e da pra ver ela fugindo do ponteiro. */
  -webkit-mask-image:radial-gradient(circle 120px at var(--mx) var(--my), transparent 0%, #000 82%);
          mask-image:radial-gradient(circle 120px at var(--mx) var(--my), transparent 0%, #000 82%);
}

/* wrapper que o jQuery move (parallax) */
.frost-shift{ position:absolute; inset:0; will-change:transform; }

/* Goticula de condensacao. A nitidez vem de tres coisas somadas:
   um brilho especular pequeno e duro no alto-esquerda, uma borda
   definida (o anel branco por dentro) e a sombra curta embaixo,
   que assenta a gota. Gradiente mole sozinho vira borrao. */
.frost-drop{
  position:absolute; border-radius:50%;
  background:
    radial-gradient(circle at 33% 27%,
      rgba(255,255,255,1) 0 14%,
      rgba(255,255,255,.72) 26%,
      rgba(255,255,255,.18) 46%,
      rgba(255,255,255,.04) 70%),
    radial-gradient(circle at 66% 76%,
      rgba(186,226,248,.7),
      rgba(186,226,248,.12) 52%,
      transparent 74%);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.55),
    inset 0 1.5px 1px rgba(255,255,255,.98),
    inset 0 -1.5px 2px rgba(120,170,200,.45),
    0 1px 2px rgba(80,120,150,.22);
}

@media (max-width:991.98px){
  .fumaca span{ filter:blur(18px); }
}
@media (prefers-reduced-motion:reduce){
  .fumaca{ display:none; }
}
/* --------------------------------------------------------- */
/* -- end:: Efeito gelo do hero                               */
/* --------------------------------------------------------- */

/* --------------------------------------------------------- */
/* -- begin:: Mobile                                          */
/*                                                            */
/* MESMA logica do desktop: as tres etapas ACUMULAM e ficam em */
/* tres cantos em volta da garrafa. O que muda e o eixo. No    */
/* desktop sobra largura, entao os cantos sao horizontais      */
/* (esquerda / direita / esquerda, cada um preso a uma borda). */
/* Aqui sobra ALTURA, entao os tres viram bandas empilhadas    */
/* que dividem a tela, mantendo o ziguezague na horizontal.    */
/*                                                            */
/* A diferenca pro desktop e que aqui o texto CRUZA a garrafa: */
/* num aparelho de 440px nao existe faixa lateral livre, entao */
/* o 'max-width:calc(50% - 18svh)' que protege a garrafa la    */
/* daria 28px de coluna aqui. Por isso o halo dos titulos abre */
/* mais embaixo - e ele que sustenta a leitura sobre a fruta.  */
/*                                                            */
/* A geometria, em coordenadas do PALCO (a janela menos o      */
/* cabecalho), medida num aparelho de 956px de altura:         */
/*                                                            */
/*    4svh  +-------------+  etapa 0, a esquerda              */
/*   28svh  |  ####       |  topo da garrafa                  */
/*    ~45svh|  #### etapa1|  etapa 1, a direita               */
/*   73svh  |  #### ~~~   |  topo do leito de gelo            */
/*   86svh  |  ####~~~~   |  base da garrafa, DENTRO do gelo  */
/*   88svh  | etapa 2     |  etapa 2, a esquerda, com o botao */
/*   92svh  +-------------+  pe do palco                      */
/*                                                            */
/* Os 13svh de sobreposicao entre a base da garrafa e o topo   */
/* do gelo sao o que faz ela parecer assentada no leito em vez */
/* de boiando acima dele. Mexeu na altura da garrafa? Refaz a  */
/* conta, senao ela volta a flutuar (ou afunda ate o rotulo).  */
/* --------------------------------------------------------- */
@media (max-width:991.98px){
  .hero-scroll{ height:220svh; }

  /* Garrafa: era 40svh e a base parava em 58svh, com 34svh de amarelo
     puro ate o gelo - o "vazio no meio" da tela. Em 58svh a base cai em
     86svh e entra no leito. A conta e a mesma do desktop: o 'top' vale
     (50 - X)svh, onde X e o numero do margin-top, e a base e top+height.
     Aqui X=22 -> topo em 28svh; 28 + 58 - header = 86svh de base.

     Em largura isso da ~177px num aparelho de 440px (a garrafa e 0.37:1),
     ou 40% da tela: presente sem virar parede. */
  .hero-garrafa{
    height:calc(58svh - var(--header-h));
    margin-top:calc(-22svh + var(--header-h) / 2);
  }

  /* Leito de gelo: a tira e 5,5:1, entao a largura E a altura dela. Em
     200% ela dava 160px de alto e lia como faixa colada no rodape. Em
     250% sao ~200px, e o corte fecha mais no vale central - que e
     justamente onde a garrafa pousa. */
  .hero-base{ width:250%; min-width:0; }

  .orb{ width:calc(var(--w,140px) * .58); margin:calc(var(--w,140px) * -.29); }
  .orb.is-frente{ filter:blur(3px) drop-shadow(0 14px 18px rgba(120,60,0,.3)); }
  .orb.is-fundo{ filter:blur(2px) drop-shadow(0 8px 12px rgba(120,60,0,.22)); }
  .hero-luz i{ filter:blur(40px); }

  /* --- As tres bandas ------------------------------------------
     O space-between e quem distribui: ele nao reparte a tela em
     tres fatias iguais, reparte a SOBRA depois de medir os blocos.
     Como os tres somam ~545px dos 800 uteis, sobram ~128px de
     respiro entre um e outro - e esse vao e o que separa banda de
     amontoado. Se algum texto crescer, o vao encolhe sozinho: e o
     primeiro lugar pra olhar se voltarem a se encostar. */
  .hero-coluna{
    top:4svh; bottom:4svh;
    display:flex; flex-direction:column; justify-content:space-between;
  }
  .hero-bloco,
  .hero-bloco[data-etapa="0"],
  .hero-bloco[data-etapa="1"],
  .hero-bloco[data-etapa="2"]{
    position:relative; inset:auto; transform:none;
    /* Subiu de 86%/20rem: com o titulo maior, "Suco de laranja" nao
       cabia mais numa linha so aqui dentro - e cada linha tem o proprio
       recorte, entao a quebra entraria como terceira linha sem animacao.
       O 94% e quem manda em tela estreita; o 24rem so segura o bloco em
       tela larga, pra ele continuar lendo como coluna curta e nao como
       faixa da largura da tela. */
    max-width:min(94%, 24rem);
  }
  /* o ziguezague, igual ao do desktop */
  .hero-bloco[data-etapa="1"]{ align-self:flex-end; text-align:right; }

  /* --- Tipografia -----------------------------------------------
     O line-height e 1.1 e nao o 1.02 do desktop: la ele funciona porque
     o corpo e 4,1rem e as linhas ja sao altas por si; num titulo de
     ~35px a mesma medida cola uma linha na outra e vira bloco macico.

     Os respiros entre selo, titulo e texto (.8rem) sao o que diz que
     sao tres coisas diferentes, e nao um paragrafo so.

     Sobre os DOIS tetos do tamanho, que e o miolo desta regra:

     O 6.9vw que estava aqui NUNCA valia. Ele so passa de 1,8rem acima
     de ~416px de largura, entao em qualquer celular comum o clamp
     ficava preso no PISO - o menor tamanho que alguem ja considerou
     aceitavel - e o vw ficava de enfeite. Em 9.2vw ele volta a
     responder de verdade: ~35px num aparelho de 382.

     O min(...svh) e o segundo teto, e existe por causa de aparelho
     BAIXO. Sao tres blocos dividindo a altura do palco: num 390x844
     sobram ~50px de respiro entre eles, mas num 375x667 o texto ja
     passa do espaco disponivel e o ultimo bloco seria cortado pelo
     overflow do palco. O svh corta o tamanho quando falta ALTURA -
     coisa que o vw sozinho nao enxerga, porque ele so sabe da largura.
     E o par vw/svh que faz o titulo crescer no aparelho grande sem
     estourar o pequeno.                                            */
  .hero-title,
  h2.hero-title{
    font-size:clamp(1.8rem, min(9.2vw, 4.6svh), 2.9rem);
    line-height:1.1;
    margin-top:.8rem;
  }
  /* mesma dupla trava: cresce com a largura, cede quando falta altura */
  .hero-desc{
    font-size:clamp(1rem, min(4.4vw, 2.3svh), 1.2rem);
    line-height:1.5;
    max-width:32ch; margin-top:.8rem;
  }
  .hero-eyebrow{ font-size:clamp(.72rem, 3.1vw, .85rem); padding:.5rem 1rem; }
  .hero-btn{ margin-top:1.2rem; }

  /* A etapa do meio cruza a garrafa, que aqui e a unica faixa da tela
     sem saida. Sobre a fruta escura um halo de 1px nao basta, entao ele
     abre um pouco. Continua sendo luz atras da letra, nao caixa. */
  .hero-title,
  h2.hero-title,
  .hero-desc{ text-shadow:0 1px 8px rgba(255,255,255,.9), 0 1px 0 rgba(255,255,255,.6); }

  /* O "Role para ver" pousa em cima do leito de gelo, que e a coisa mais
     clara da tela: em branco ele sumia. Vira marrom com halo claro - o
     mesmo par que os titulos usam. */
  .hero-rolar{
    color:var(--marrom);
    text-shadow:0 1px 8px rgba(255,255,255,.9);
  }
  .hero-rolar span{ background:linear-gradient(180deg,var(--marrom),transparent); }
}

@media (prefers-reduced-motion:reduce){
  .hero-garrafa,.hero-rolar span,.hero-luz i{ animation:none; }
  /* a etapa aparece sem a linha subindo do recorte. O opacity fica:
     ele nao e movimento, e e o que ainda distingue a etapa que ja
     entrou da que nao entrou. */
  .mask > *{ transform:none; transition:opacity .3s linear; }
  .hero-bloco.is-ativo .mask > *{ transform:none; transition:opacity .3s linear; }
}

/* ========================================================== */
/* -- begin:: MODO LEVE                                       */
/*                                                            */
/* Ativado pela classe .modo-leve no <html>, escrita por dois  */
/* lugares: o script do <head> (palpite, antes de pintar) e o  */
/* medidor de quadros do hero.js (medicao, ja rodando).        */
/*                                                            */
/* A regra que orientou todos os cortes abaixo: o que o chip   */
/* grafico faz de graca, a CPU faz caro. Sem placa de video, a */
/* conta que pesa nao e "quantos elementos tem na tela" - e    */
/* "quantos pixels precisam ser REDESENHADOS a cada quadro".   */
/*                                                            */
/* Por isso o corte nao e estetico, e por tipo de operacao:    */
/*   filter:blur()   redesenha uma vizinhanca inteira de       */
/*                   pixels por pixel de saida                 */
/*   mix-blend-mode  obriga o palco INTEIRO a ser recomposto   */
/*                   toda vez que qualquer coisa embaixo mexe  */
/*   mask-image      que segue o mouse repinta a camada toda   */
/*                   a cada quadro                             */
/*   animation infinita  paga esse preco pra sempre, mesmo com */
/*                   a pagina parada                           */
/*                                                            */
/* O que FICA: a garrafa, o leito de gelo, o suco que sobe, os */
/* textos e o parallax do scroll. A cena continua sendo a      */
/* mesma cena - ela so para de ser cara.                       */
/* ========================================================== */

/* --- 1. As manchas de luz -------------------------------- */
/* Estas eram o item mais caro da tela, e nao pelo desfoque:   */
/* pelo mix-blend-mode:screen. O palco tem isolation:isolate,  */
/* entao toda vez que o #heroNivel escala na rolagem o         */
/* navegador refaz a mistura do quadro inteiro. Era isso que   */
/* travava a ROLAGEM, nao a animacao em si.                    */
/*                                                             */
/* Nao apago: um radial-gradient ja nasce com borda suave, o   */
/* blur(60px) so estava suavizando o que ja era suave. Sem     */
/* blur e sem mistura, ele vira pintura comum - custa uma      */
/* rasterizacao unica e depois zero por quadro.                */
.modo-leve .hero-luz i{
  filter:none;
  mix-blend-mode:normal;
  animation:none;
  opacity:.42;      /* sem 'screen' a mancha chega mais forte; compenso */
}

/* --- 2. O vapor ------------------------------------------ */
/* Sete colunas com blur(20px), cada uma animada pra sempre e  */
/* cada uma cobrindo um retangulo grande da tela. E o efeito   */
/* mais discreto do hero e o segundo mais caro: sai inteiro.   */
.modo-leve .fumaca{ display:none; }

/* --- 3. A profundidade de campo das orbitas --------------- */
/* O desfoque dos planos da frente e de fundo imita lente. Mas */
/* sao 11 imagens grandes ANDANDO pela tela: cada quadro       */
/* refaz o desfoque no lugar novo. Troco lente por tamanho e   */
/* opacidade, que e o que a pintura sempre usou pra dizer      */
/* "isto esta longe" - e nao custa pixel nenhum a mais.        */
.modo-leve .orb.is-fundo { filter:none; opacity:.62; }
.modo-leve .orb.is-meio  { filter:none; opacity:.94; }
.modo-leve .orb.is-frente{ filter:none; opacity:.72; }

/* --- 4. A camada de condensacao -------------------------- */
/* O JS nem cria as goticulas no modo leve (ver hero.js), mas  */
/* a regra fica como rede: se a camada existir por qualquer    */
/* motivo, ela nao pinta. O mask-image e o caro aqui - ele     */
/* acompanha o ponteiro, entao repinta a camada toda a cada    */
/* movimento do mouse. */
.modo-leve .frost{ display:none; }

/* --- 5. A garrafa ---------------------------------------- */
/* A sombra fica: e desenhada uma vez e nao muda. O balanco    */
/* sai: e uma animacao infinita sobre uma imagem de ~770px COM */
/* filtro, ou seja, o par mais caro que existe - o navegador   */
/* tende a refazer o filtro a cada passo do movimento. Parada, */
/* a garrafa e so um bitmap pronto. */
.modo-leve .hero-garrafa{ animation:none; }

/* --- 6. Promessas de camada ------------------------------ */
/* will-change reserva memoria de video por elemento. Onde nao */
/* ha memoria de video pra reservar, a promessa vira custo sem */
/* beneficio. Deixo so onde algo de fato se move na rolagem.   */
.modo-leve .orb{ will-change:auto; }
.modo-leve .frost-shift{ will-change:auto; }

/* --- 7. A seta "role para ver" --------------------------- */
.modo-leve .hero-rolar span{ animation:none; }

/* --------------------------------------------------------- */
/* -- end:: MODO LEVE                                         */
/* --------------------------------------------------------- */