/* ============================================================================
   A ABERTURA E O HERO CÓSMICO.

   Vem do brandbook oficial (Brandbook_Master_Cria_Ai_2026), que desenha o hero linha por
   linha nas pranchas 01 e 09 e nunca tinha sido implementado, e das três referências que
   ela mandou em 07/09/2026:

     unitedcarriers.com  planeta no escuro, cena fixada, corte seco do escuro pro claro
     huyml.co            carrossel 3D girando, com som a cada capa que passa
     offforum.com        tipografia enorme e movimento contido, sem 3D nenhum

   Do offforum vem a decisão técnica que manda em tudo aqui: ele não usa WebGL e mesmo
   assim tem UAU. Então NADA nesta cena usa Three.js. É canvas 2D e transform de CSS.
   O público dela compra pelo celular, e um hero que engasga custa venda.

   POR QUE ISTO SUBSTITUI A PRIMEIRA DOBRA, e não é só um enfeite por cima dela:

   Medido no navegador em 07/09/2026, numa janela de 800px: a colagem de vídeos ocupava a
   dobra inteira e a manchete ficava ABAIXO dela. Quem chegava de anúncio via logo, botão
   de entrar, letreiro e três colunas de vídeo, e nenhuma promessa. A dobra que mais
   custa dinheiro não vendia nada.

   REGRAS QUE ESTA CENA OBEDECE, porque a página está vendendo R$97 agora:
     1. dá pra pular a qualquer momento, com clique, tecla ou botão
     2. roda uma vez por dia
     3. quem tem "reduzir movimento" ligado no aparelho já cai no quadro final
     4. se qualquer imagem falhar, a cena termina do mesmo jeito
     5. o conteúdo de venda existe no HTML, independente da animação
   ============================================================================ */

/* ---- O HERO ---------------------------------------------------------------- */
.hero-cosmico {
  position: relative;
  /* MEDIDO, NAO CHUTADO.
     100svh sozinho dava hero maior que a tela, porque o menu e o letreiro ficam ACIMA
     dele e ocupam altura. Resultado medido numa janela de 577 por 554: o anel de cards
     inteiro caia fora da tela, 0 de 24 visiveis. O abertura.js mede o topo de verdade e
     escreve em --topo, entao isto funciona em qualquer tamanho de tela e de fonte. */
  min-height: calc(100svh - var(--topo, 0px));
  overflow: hidden;
  background: var(--bg, #02031B);
  display: flex;
  align-items: center;
  isolation: isolate;
}
body.cena-travada { overflow: hidden; }

#hcEstrelas {
  position: absolute; inset: 0; width: 100%; height: 100%;
  display: block; z-index: 0;
}

/* o planeta, no lugar dos quatro "blob" roxos que não pertenciam a marca nenhuma */
#hcPlaneta {
  position: absolute; right: -30vmin; bottom: -56vmin;
  width: 104vmin; height: 104vmin; border-radius: 50%; z-index: 1;
  background: radial-gradient(circle at 32% 22%,
    rgba(45,79,184,.48), rgba(19,24,67,.94) 46%, #02031B 72%);
  box-shadow: 0 0 0 1px rgba(255,106,43,.16), 0 -8px 90px 12px rgba(255,106,43,.28);
  opacity: 0; transform: translateY(20vmin) scale(.94);
  transition: opacity 1.6s ease, transform 2.2s cubic-bezier(.16,1,.3,1);
}
#hcPlaneta.on { opacity: 1; transform: none; }

/* ---- ato 1: a brasa antes da ignição --------------------------------------- */
#hcBrasa {
  position: absolute; left: 50%; bottom: 16vh; z-index: 6;
  width: 9px; height: 9px; margin-left: -4.5px; border-radius: 50%;
  background: #FF6A2B; box-shadow: 0 0 18px 5px rgba(255,106,43,.75);
  animation: hcPulsa 1.5s ease-in-out infinite;
}
@keyframes hcPulsa { 0%,100%{transform:scale(.8);opacity:.65} 50%{transform:scale(1.5);opacity:1} }
#hcBrasa.sumiu { opacity: 0; transition: opacity .18s; }

/* ---- O FOGUETE ---------------------------------------------------------------
   Ela em 07/09: "a abertura nao vejo foguete so os rabiscos... queria de fato que desse
   para ver o foguete e algo mais realista".

   Estava certa. A versao anterior mandava o foguete de 46vh abaixo da tela ate 132vh
   acima, 178vh de percurso em 1,5s. Isso e um borrao: ele atravessava a tela mais rapido
   do que o olho acompanha, e o que sobrava eram os riscos das estrelas.

   Agora ele DECOLA E FREIA. Sobe rapido, desacelera, e PARA na tela, grande, sangrando
   pela borda direita, no angulo que o brandbook desenha. Fica ali respirando enquanto a
   manchete assenta, e vira a imagem do hero em vez de um efeito que passou.

   A curva tem duas partes de proposito: entrada em ease-out forte (a propulsao que
   empurra) e depois quase parado (a inercia planando), que e literalmente o que o
   brandbook chama de "aceleracao controlada". */
#hcFoguete {
  position: absolute; right: -6vw; bottom: -60vh; z-index: 8;
  width: clamp(240px, 34vw, 520px);
  transform: rotate(14deg); opacity: 0; pointer-events: none;
  filter: drop-shadow(0 0 44px rgba(255,106,43,.5)) drop-shadow(0 18px 60px rgba(0,0,0,.55));
}
#hcFoguete.sobe { animation: hcDecolar 2s cubic-bezier(.12,.86,.16,1) forwards; }
@keyframes hcDecolar {
  0%   { bottom: -60vh; opacity: 0; transform: rotate(20deg) scale(.7); }
  10%  { opacity: 1; }
  100% { bottom: 16vh;  opacity: 1; transform: rotate(14deg) scale(1); }
}
/* depois que freia, ele nao fica congelado: respira devagar, como coisa em orbita */
#hcFoguete.parado { animation: hcFlutua 7s ease-in-out infinite; bottom: 16vh; opacity: 1; }
@keyframes hcFlutua {
  0%,100% { transform: rotate(14deg) translateY(0)     scale(1); }
  50%     { transform: rotate(13.2deg) translateY(-14px) scale(1.012); }
}

/* o rastro de propulsao: um facho quente que sobe atras dele e apaga sozinho.
   E o "trilha curta" que o brandbook pede no motion. */
#hcRastro {
  position: absolute; right: 4vw; bottom: -10vh; z-index: 7;
  width: clamp(90px, 13vw, 190px); height: 78vh;
  background: linear-gradient(0deg, rgba(255,106,43,0) 0%, rgba(255,106,43,.42) 22%,
              rgba(255,177,92,.6) 52%, rgba(255,106,43,0) 100%);
  filter: blur(26px);
  transform: rotate(14deg) scaleY(.2); transform-origin: bottom center;
  opacity: 0; pointer-events: none;
}
#hcRastro.on  { animation: hcRastroSobe 2s cubic-bezier(.12,.86,.16,1) forwards; }
@keyframes hcRastroSobe {
  0%   { opacity: 0;  transform: rotate(20deg) scaleY(.2); }
  22%  { opacity: .95; }
  100% { opacity: 0;  transform: rotate(14deg) scaleY(1); }
}
.hero-cosmico.tremendo { animation: hcTremor .5s ease-out; }
@keyframes hcTremor {
  0%,100% { transform: translate(0,0); }
  15% { transform: translate(-5px,4px); } 30% { transform: translate(5px,-3px); }
  50% { transform: translate(-3px,-4px); } 70% { transform: translate(3px,3px); }
  85% { transform: translate(-2px,1px); }
}

/* ---- a órbita de cards -------------------------------------------------------
   São fotos REAIS da biblioteca dela. A página de vendas usava 9 imagens e a biblioteca
   tem 325: o maior ativo da marca estava fora da página que vende ele.

   O anel fica ATRÁS da câmera, com translateZ negativo. Sem isso o arco da frente cresce
   e vira um túnel que come a última linha do texto. */
#hcPalco { position: absolute; inset: 0; perspective: 1400px; perspective-origin: 50% 32%; z-index: 2; pointer-events: none; }
/* A ALTURA DO ANEL E' MEDIDA NA TELA, NAO NA SECAO.
   Com "top: 76%" o anel se posiciona dentro do HERO, e o hero pode ser mais alto que a
   tela: medido numa janela de 577 por 554, o hero tinha 734px e o anel caia em 691, fora
   de vista, 0 de 24 cards na tela. O min() com svh trava o anel dentro da altura visivel
   em qualquer aparelho, sem precisar de conta em JavaScript. */
/* A ALTURA DO ANEL E' CALCULADA NO abertura.js, MEDINDO O TEXTO DE VERDADE.
   Tentei tres formulas so em CSS (76%, depois min(76%,64svh), depois min(76%,78svh)) e
   nenhuma serviu pros dois tamanhos: o que resolvia no celular punha 15 cards por baixo
   dos botoes no desktop, porque a coluna de texto muda de altura conforme a largura, o
   tamanho de fonte do aparelho e quantas linhas a manchete quebra. Numero fixo nao da
   conta de conteudo que muda de tamanho. O valor abaixo e' so o ponto de partida ate o
   script medir. */
#hcAnel { position: absolute; left: 50%; top: 80%; width: 0; height: 0; transform-style: preserve-3d; opacity: 0; transition: opacity 1.5s ease; }
#hcAnel.on { opacity: 1; animation: hcGirar 56s linear infinite; }
@keyframes hcGirar {
  from { transform: translateZ(-240px) rotateY(0); }
  to   { transform: translateZ(-240px) rotateY(-360deg); }
}
#hcAnel .hc-card {
  position: absolute; width: 104px; height: 139px; margin: -70px 0 0 -52px;
  border-radius: 8px; overflow: hidden; background: #131843;
  border: 1px solid rgba(255,106,43,.20); box-shadow: 0 14px 40px rgba(0,0,0,.6);
}
#hcAnel .hc-card img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: .74; }

/* O véu tem três trabalhos: apagar as pontas do anel pra ele não terminar em corte reto,
   escurecer o rodapé, e garantir contraste embaixo da coluna de texto. */
#hcVeu {
  position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background:
    linear-gradient(90deg, #02031B 0, rgba(2,3,27,.62) 14%, transparent 38%, transparent 82%, #02031B 100%),
    linear-gradient(180deg, transparent 52%, rgba(2,3,27,.55) 88%, #02031B 100%);
}

/* ---- o conteúdo que vende ---------------------------------------------------- */
.hc-conteudo {
  position: relative; z-index: 5; width: 100%;
  padding: clamp(90px,13vh,150px) clamp(20px,6vw,86px) clamp(150px,24vh,250px);
  /* a coluna de texto para antes da raposa. Medido: sem isto, os botoes passavam por
     baixo dela e o "ver como funciona" ficava ilegivel. */
  max-width: 1240px;
  opacity: 0; transform: translateY(18px);
}
.hc-conteudo.on { opacity: 1; transform: none; transition: opacity 1s ease .1s, transform 1.1s cubic-bezier(.16,1,.3,1); }

.hc-selo {
  font-family: var(--fonte-corpo, 'Manrope'), sans-serif; font-weight: 600;
  font-size: clamp(9.5px,1.05vw,11.5px); letter-spacing: .32em; text-transform: uppercase;
  color: #FF6A2B; margin: 0 0 clamp(12px,2vh,22px);
}
/* O SLOGAN ERA O H1 ATE 17/09/2026. Virou .hc-slogan com o mesmo desenho; o H1 agora e a
   linha descritiva .hc-h1 logo abaixo. display:block porque o elemento e uma div. */
.hero-cosmico .hc-slogan {
  display: block;
  font-family: var(--fonte-titulo, 'Sora'), sans-serif; font-weight: 800;
  letter-spacing: -.035em; line-height: .87; color: #F3ECDE;
  font-size: clamp(40px, 8vw, 108px); margin: 0 0 clamp(14px,2.4vh,26px); max-width: 15ch;
}
.hero-cosmico .hc-slogan i { font-style: normal; color: #FF6A2B; }
/* o H1 de verdade: diz o que o produto e, em corpo de subtitulo, sem roubar a cena do slogan */
.hero-cosmico .hc-h1 {
  font-family: var(--fonte-titulo, 'Sora'), sans-serif; font-weight: 600;
  font-size: clamp(17px, 1.75vw, 23px); line-height: 1.3; letter-spacing: -.01em;
  color: #F3ECDE; max-width: 32ch; margin: 0 0 clamp(10px,1.6vh,16px);
}
.hc-linha {
  font-family: var(--fonte-corpo, 'Manrope'), sans-serif;
  font-size: clamp(14px,1.55vw,17.5px); line-height: 1.62; color: rgba(243,236,222,.82);
  max-width: 50ch; margin: 0 0 clamp(20px,3.2vh,32px);
}
.hc-linha b { color: #F3ECDE; font-weight: 700; }

.hc-botoes { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.hc-bt {
  font-family: var(--fonte-corpo, 'Manrope'), sans-serif; font-weight: 600;
  font-size: 14px; letter-spacing: .04em; padding: 16px 32px; border-radius: 100px;
  cursor: pointer; text-decoration: none; display: inline-block; border: 1px solid transparent;
  transition: transform .22s, box-shadow .22s, background .22s;
}
/* gradiente, não laranja chapado com halo: a prancha 10 lista brilho exagerado como coisa
   a evitar, e é justamente o halo que faz botão de compra parecer barato */
.hc-bt.forte { background: linear-gradient(90deg,#FA480D,#C62A08); color: #fff; box-shadow: 0 10px 28px rgba(213,65,35,.34); }
.hc-bt.forte:hover { background: linear-gradient(90deg,#FF6A2B,#D54123); transform: translateY(-2px); box-shadow: 0 16px 38px rgba(213,65,35,.48); }
/* "vidro sutil" e' elemento de marca listado no brandbook, e aqui ele tem funcao: este
   botao fica por cima da orbita de cards e sem fundo proprio o texto disputava com a foto
   que passasse atras. */
.hc-bt.leve {
  border-color: rgba(243,236,222,.32); color: #F3ECDE;
  background: rgba(2,3,27,.55);
  backdrop-filter: blur(9px); -webkit-backdrop-filter: blur(9px);
}
.hc-bt.leve:hover { background: rgba(243,236,222,.08); transform: translateY(-2px); }

/* a fila de selos de confiança, direto da prancha 09.
   Vidro em todo tamanho: e' a linha de texto menor da dobra e a que mais sofre quando um
   card claro passa atras. Medido no desktop, com o anel girando, era a unica coisa que
   ficava dificil de ler. */
.hc-selos {
  display: flex; flex-wrap: wrap; gap: 6px 20px; margin-top: 26px;
  background: linear-gradient(90deg, rgba(2,3,27,.88), rgba(2,3,27,.42));
  backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px);
  padding: 12px 16px; border-radius: 12px; margin-left: -16px;
  border: 1px solid rgba(255,106,43,.13);
  width: fit-content; max-width: 100%;
}
.hc-selos span {
  font-family: var(--fonte-corpo, 'Manrope'), sans-serif; font-size: 12px;
  color: rgba(243,236,222,.62); display: inline-flex; align-items: center; gap: 7px;
}
.hc-selos span::before { content: "\2726"; color: #FF6A2B; font-size: 10px; }

/* ---- a FAÍ, protagonista ------------------------------------------------------ */
/* o foguete ocupa o alto da direita, entao a raposa fica embaixo e menor: os dois moram
   do mesmo lado sem se tocar, que e a composicao da prancha 01 do brandbook */
#hcFai {
  position: absolute; right: clamp(6px,2vw,44px); bottom: 0; z-index: 9;
  width: clamp(120px,14vw,196px); opacity: 0; transform: translateY(46px); pointer-events: none;
  filter: drop-shadow(0 18px 44px rgba(0,0,0,.6)) drop-shadow(0 0 28px rgba(255,106,43,.22));
}
#hcFai.on { opacity: 1; transform: none; transition: opacity .9s ease, transform 1.1s cubic-bezier(.16,1,.3,1); }

/* ---- pular --------------------------------------------------------------------- */
#hcPular {
  position: absolute; right: 18px; top: 84px; z-index: 20;
  background: rgba(243,236,222,.09); border: 1px solid rgba(243,236,222,.22);
  /* 22/09/2026: eram 9px de recheio, o que dava 35px de altura num celular de 375. E' o
     botao de sair da animacao de abertura, ou seja, a primeira coisa que alguem apressado
     procura. Vai pra 14 e fecha os 44 recomendados. */
  color: rgba(243,236,222,.85); border-radius: 100px; padding: 14px 18px;
  font-family: var(--fonte-corpo, 'Manrope'), sans-serif; font-size: 11.5px;
  font-weight: 600; letter-spacing: .12em; text-transform: uppercase; cursor: pointer;
  transition: background .2s, opacity .5s;
}
#hcPular:hover { background: rgba(243,236,222,.2); }
#hcPular.sumiu { opacity: 0; pointer-events: none; }

/* enquanto a cena roda, o topo da página não pode disputar a atenção */
body.cena-travada .nav, body.cena-travada .marquee { opacity: 0; transition: opacity .4s; }

/* O BOTAO DE CANTO DA FAI SO APARECE DEPOIS DO HERO.
   A FAI agora esta no hero em corpo inteiro. Deixar o botao dela no canto ao mesmo tempo
   punha duas raposas na mesma tela, e pior: medido, o botao de canto ficava exatamente
   por cima do "quero meu acesso". O botao volta assim que a pessoa rola pra fora do hero,
   que e' quando ele passa a ter serventia de verdade. */
body.hero-a-vista #fai-canto {
  opacity: 0; pointer-events: none; transition: opacity .4s ease;
}

/* no desktop a coluna reserva o espaco da raposa a direita */
@media (min-width: 861px) {
  /* reserva a faixa da direita, que agora e do foguete e da raposa */
  .hc-conteudo { padding-right: clamp(240px, 30vw, 480px); }
}

@media (max-width: 860px) {
  #hcAnel .hc-card { width: 74px; height: 99px; margin: -50px 0 0 -37px; }
  /* o rodape reservado embaixo e' a altura da raposa: ela mora ali e nao pode subir em
     cima dos botoes. Medido em 577px de largura, onde ela tem 253px de altura. */
  .hc-conteudo { padding-top: 11vh; padding-bottom: 235px; }
  .hero-cosmico .hc-slogan { max-width: 11ch; }
  #hcFai { width: 34vw; max-width: 210px; right: -3vw; }
  #hcPular { top: 70px; right: 12px; }

  /* NO CELULAR A ORBITA VIRA HORIZONTE, NAO CARROSSEL.
     Medido num aparelho de 375 por 812: com o anel na altura do meio, 10 cards ficavam
     por baixo dos botoes e do "ver como funciona", e a dobra virava uma bagunca. Na
     vertical de um celular nao cabem os dois, coluna de texto e faixa de cards.
     Empurrado pro pe da tela, so o arco de cima aparece, e ele passa a fazer o trabalho
     de dizer "tem mais coisa aqui embaixo" em vez de disputar com o botao de compra. */
  #hcAnel .hc-card img { opacity: .58; }

  .hc-selos { margin-left: -12px; padding: 11px 12px; }
}

/* quem pediu menos movimento no aparelho não leva animação nenhuma */
/* QUEM DECIDE E A CLASSE, NAO A CONSULTA DE MIDIA.
   O JavaScript ja perguntou ao aparelho e escreveu a resposta em html.sem-movimento.
   Perguntar de novo aqui criava duas fontes de verdade que discordavam: em 07/09 o CSS
   desligou a cena presa dos quatro passos enquanto o JavaScript continuava esticando o
   trilho para 2.700px, e sobraram 2.100px de vazio no meio da pagina.

   Escrito com o prefixo repetido em cada linha de proposito, e nao aninhado: aninhamento
   em CSS so funciona em navegador recente, e boa parte do publico dela compra de celular
   velho. */
html.sem-movimento #hcBrasa,
html.sem-movimento .hero-cosmico.tremendo { animation: none; }

/* O FOGUETE CONTINUA VISIVEL AQUI. Quem liga "reduzir movimento" no aparelho esta pedindo
   menos ANIMACAO, nao menos marca. O foguete deixou de ser um efeito que passa e virou a
   imagem do hero, entao esconder tirava conteudo. Ele aparece parado, no lugar final. */
/* REDUZIR MOVIMENTO E REDUZIR, NAO REMOVER.
   Antes o foguete simplesmente aparecia no lugar, sem chegada nenhuma. Quem liga esse
   ajuste no Windows quase sempre esta pedindo menos animacao pesada, nao "tire a marca da
   minha frente": no Windows e so desmarcar "mostrar animacoes", e muita gente faz isso por
   desempenho.

   A decolagem de 2 segundos com tranco de tela e rastro sai. Fica uma chegada curta e
   suave: meio segundo, subindo pouco, sem sacudir nada. E o padrao correto para este
   ajuste, e ainda assim o foguete CHEGA em vez de so estar la. */
html.sem-movimento #hcFoguete {
  animation: hcPousoSuave .55s ease-out forwards !important;
  bottom: 16vh; transform: rotate(14deg);
}
@keyframes hcPousoSuave {
  from { opacity: 0; transform: rotate(14deg) translateY(26px); }
  to   { opacity: 1; transform: rotate(14deg) translateY(0); }
}
html.sem-movimento #hcRastro { display: none; }
html.sem-movimento .hc-conteudo,
html.sem-movimento #hcFai,
html.sem-movimento #hcPlaneta { opacity: 1; transform: none; }
html.sem-movimento * { transition-duration: .01ms !important; }