/*
  Abertura (Figma 123:2 › "ABERTURA (fechado)" 123:3), 1440 × 900 no desktop.
  Camadas, de baixo para cima:
    mármore (imagem, cover);
    véu do centro: elipse 1000 × 560 na cor fundo, blur 140;
    véus do topo e da base: faixas de 220px na cor fundo, blur 70
      (topo de −110 a 110; base de 790 a 1010);
    grão: branco a 2% + ruído branco a 18%.
  Os véus são gradientes com curva gaussiana. O blur do Figma equivale a um
  desvio de 0,4 × o raio (140 → 56px, 70 → 28px): medido contra o render do
  Figma, com erro médio de 1,5 em 255 fora da área de texto.
  Texto: bloco centralizado com 24px de gap; título 1112px de largura máxima,
  apoio 547px; indicador de rolagem a 85px da base.
*/
/* A partir de 1024px, a dica de rolagem tem regras em assets/css/encaixe.css */

.secao-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  min-height: 100svh;
  /* Espaço do header fixo em cima e do indicador de rolagem embaixo.
     Igual nos dois lados, para o texto ficar no centro, como no Figma. */
  padding-block: 140px;
  padding-inline: var(--margem-lateral);
  background-color: var(--fundo);
}

/* ------------------------------------------------------------------
   Fundo
   ------------------------------------------------------------------ */
.hero-fundo {
  position: absolute;
  inset: 0;
  z-index: -1;
}

.hero-marmore {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Cada tema mostra o seu mármore. O claro tem loading="lazy":
   escondido, ele não é baixado no tema escuro. */
.hero-marmore-claro,
[data-tema="claro"] .hero-marmore-escuro {
  display: none;
}

[data-tema="claro"] .hero-marmore-claro {
  display: block;
}

/* Shader Warp: por cima das imagens, por baixo dos véus e do grão.
   O ShaderMount coloca o <canvas> aqui dentro, com posição absoluta. */
.hero-shader {
  position: absolute;
  inset: 0;
}

/* Com o primeiro quadro do shader desenhado, a imagem de reserva some */
.secao-hero[data-shader="ativo"] .hero-marmore {
  visibility: hidden;
}

/* Véus: elipse no centro + faixas no topo e na base, na cor do fundo do tema.
   A elipse acompanha a largura da tela: 1000 × 560 em 1440px (semieixos de
   34,72vw × 19,44vw), com altura mínima de 200px.
   Abaixo de 768px o semieixo horizontal sobe para 50vw: com 34,72vw o apoio
   caía sobre o mármore e o contraste ficava em 3,5:1 (medido em 320 e 414px).
   Com 50vw, o menor contraste do apoio é 5,19:1, e o mármore continua
   visível acima, abaixo e nos cantos. */
.hero-veus {
  --veu-rx: clamp(130px, 34.72vw, 500px);
  --veu-ry: clamp(200px, 19.44vw, 280px);
  position: absolute;
  inset: 0;
  background:
    radial-gradient(var(--veu-rx) var(--veu-ry) at 50% 50%,
      color-mix(in srgb, var(--fundo) 100%, transparent) 0%,
      color-mix(in srgb, var(--fundo) 98.7%, transparent) 60%,
      color-mix(in srgb, var(--fundo) 95.2%, transparent) 70%,
      color-mix(in srgb, var(--fundo) 86.7%, transparent) 80%,
      color-mix(in srgb, var(--fundo) 78.2%, transparent) 86%,
      color-mix(in srgb, var(--fundo) 67.2%, transparent) 92%,
      color-mix(in srgb, var(--fundo) 58.8%, transparent) 96%,
      color-mix(in srgb, var(--fundo) 50%, transparent) 100%,
      color-mix(in srgb, var(--fundo) 41.2%, transparent) 104%,
      color-mix(in srgb, var(--fundo) 32.8%, transparent) 108%,
      color-mix(in srgb, var(--fundo) 21.8%, transparent) 114%,
      color-mix(in srgb, var(--fundo) 13.3%, transparent) 120%,
      color-mix(in srgb, var(--fundo) 4.8%, transparent) 130%,
      color-mix(in srgb, var(--fundo) 1.3%, transparent) 140%,
      transparent 154%),
    linear-gradient(to bottom,
      color-mix(in srgb, var(--fundo) 100%, transparent) 0px,
      color-mix(in srgb, var(--fundo) 98.4%, transparent) 50px,
      color-mix(in srgb, var(--fundo) 92.3%, transparent) 70px,
      color-mix(in srgb, var(--fundo) 80.4%, transparent) 86px,
      color-mix(in srgb, var(--fundo) 66.6%, transparent) 98px,
      color-mix(in srgb, var(--fundo) 50%, transparent) 110px,
      color-mix(in srgb, var(--fundo) 33.4%, transparent) 122px,
      color-mix(in srgb, var(--fundo) 19.6%, transparent) 134px,
      color-mix(in srgb, var(--fundo) 7.7%, transparent) 150px,
      color-mix(in srgb, var(--fundo) 2.3%, transparent) 166px,
      transparent 194px),
    linear-gradient(to top,
      color-mix(in srgb, var(--fundo) 100%, transparent) 0px,
      color-mix(in srgb, var(--fundo) 98.4%, transparent) 50px,
      color-mix(in srgb, var(--fundo) 92.3%, transparent) 70px,
      color-mix(in srgb, var(--fundo) 80.4%, transparent) 86px,
      color-mix(in srgb, var(--fundo) 66.6%, transparent) 98px,
      color-mix(in srgb, var(--fundo) 50%, transparent) 110px,
      color-mix(in srgb, var(--fundo) 33.4%, transparent) 122px,
      color-mix(in srgb, var(--fundo) 19.6%, transparent) 134px,
      color-mix(in srgb, var(--fundo) 7.7%, transparent) 150px,
      color-mix(in srgb, var(--fundo) 2.3%, transparent) 166px,
      transparent 194px);
}

@media (max-width: 767.98px) {
  .hero-veus {
    --veu-rx: 50vw;
  }
}

/* Abaixo de 400px, 55vw: com o shader em movimento, o apoio no tema escuro
   em 320px chegava a 4,62:1 com 50vw (exige 4,5:1). */
@media (max-width: 399.98px) {
  .hero-veus {
    --veu-rx: 55vw;
  }
}

/* Grão (Figma: preenchimento branco a 2% com efeito de ruído monocromático,
   branco a 18%, densidade 0,55). O ruído do Figma age sobre esse
   preenchimento de 2%, então quase não aparece: no render do Figma a faixa
   da base fica +4,8 acima da cor do fundo, com variação de 0,5.
   Aqui: branco a 1% + pontos brancos a 2% em cerca de metade dos pixels
   (filtro SVG feTurbulence embutido, não é arquivo de imagem). A média
   fica igual à do Figma (+5) e sobra uma textura leve.
   O Figma usa branco fixo, então no tema claro o grão quase não aparece.
   Na base, o grão some nos mesmos 194px do véu: com ele até a borda, o
   hero terminava num corte reto, 6 níveis mais claro que a busca (tema
   escuro). A máscara é estática. */
.hero-grao {
  position: absolute;
  inset: 0;
  -webkit-mask-image: linear-gradient(to top, transparent, #000 194px);
  mask-image: linear-gradient(to top, transparent, #000 194px);
  background-color: rgb(255 255 255 / 0.01);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='discrete' tableValues='0 0 0 0 0 0 0 0 0 0.02 0.02 0.02 0.02 0.02 0.02 0.02 0.02 0.02 0.02 0.02'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  background-size: 200px 200px;
}

/* ------------------------------------------------------------------
   Texto
   ------------------------------------------------------------------ */
.hero-conteudo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  max-width: 1112px;
  text-align: center;
}

/* Tamanhos: os do Figma a partir de 1440px; abaixo disso, proporcionais à
   largura, com mínimo provisório até o mobile do Figma. */
.hero-titulo {
  color: var(--texto);
  font-size: clamp(2.25rem, 5vw, var(--titulo-hero));
  font-weight: var(--peso-medio);
  line-height: var(--titulo-hero-altura);
  letter-spacing: var(--titulo-hero-letra);
}

.hero-titulo em {
  color: var(--destaque);
  font-family: var(--fonte-serif);
  font-size: clamp(2.625rem, 5.834vw, var(--titulo-hero-serif));
  font-style: italic;
  font-weight: var(--peso-regular);
  letter-spacing: var(--titulo-hero-serif-letra);
}

.hero-apoio {
  max-width: 547px;
  color: var(--texto-apoio);
  font-size: var(--apoio-grande);
  line-height: var(--apoio-grande-altura);
  text-wrap: balance;
}

/* Indicador de rolagem: texto de 15px a 85px da base; o link tem 44px de
   altura centrado no mesmo ponto. */
.hero-rolagem {
  position: absolute;
  bottom: 70px;
  left: 50%;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-inline: 12px;
  color: var(--texto-rolagem);
  font-family: var(--fonte-mono);
  font-size: var(--rotulo-rolagem);
  letter-spacing: var(--rotulo-rolagem-letra);
  line-height: normal;
  text-decoration: none;
  white-space: nowrap;
  transform: translateX(-50%);
}

/* Frase do desktop só a partir de 1024px (encaixe.css) */
.hero-rolagem-desktop {
  display: none;
}