/* ============================================================
   Melook — O Orbe (D-030)
   ------------------------------------------------------------
   A assinatura visual do hero. Uma casca esferica de filamentos
   dourados emissivos girando devagar.

   Origem: o orbe desenhado pelo dono (valhalla/Orbe de filamentos
   dourados.html, 3,9 kB, Canvas 2D puro). Este arquivo e um PORTE
   com as correcoes de performance que o original nao tinha.

   PRESERVADO do original (e por que funciona):
     - 8 fitas grossas + 40 fios finos + 3 cristas
     - cada filamento e um grande circulo perturbado por 3 senoides
       em frequencias diferentes -> orgânico, nao ruidoso
     - 'lighter' (aditivo) compondo 3 passes de blur (26/8/0 px)
     - espessura varia com a profundidade -> volume sem 3D real
     - loop exato: 2*PI por periodo, entao o quadro final E o inicial

   CORRIGIDO em relacao ao original:
     - 60fps infinito -> 30fps e pausa fora da tela
     - sem tratamento de reduced-motion
     - sem pausa quando a aba perde foco

   NAO MEXER no buffer do canvas. O original acerta: buffer fixo de
   1080x1080 e o CSS encolhe para o tamanho na tela. Dimensionar o buffer
   a partir do CSS quebra o orbe (ver comentario em orbe.js).
   ============================================================ */

/* --- D-033/D-034: o hero divide a tela ---------------------------------
   O orbe deixa de ser um enfeite absoluto no canto e passa a ser uma
   COLUNA de verdade, com o texto ocupando a outra metade. Como e uma
   coluna, o orbe nunca pode sobrepor o texto nem ser cortado pela borda:
   o grid resolve o que antes era ajuste manual de `right`/`translateY`.

   Proporcao 1 : 1 — divisao de tela de verdade, que foi o pedido.

   `align-items: start` e deliberado. Com `center`, o orbe era centrado
   contra a coluna de texto INTEIRA (922px de altura) e comecava 69px
   ABAIXO do eyebrow — parecia caido para o meio. Alinhado ao topo, o
   orbe nasce junto com o texto, que e como a referencia do dono mostra. */
.hero__grade {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: start;
  gap: clamp(24px, 4vw, 56px);
}

.hero__texto { min-width: 0; }

/* O titulo usa a largura toda da coluna. O max-width de 17ch herdado do
   layout antigo apertava demais num grid de metade de tela: forçava 6
   linhas. Aqui ele respira. */
.hero__texto h1 { max-width: none; }

/* A curva agora vive na secao de prova (D-034). Aqui so o espacamento. */
.prova__curva {
  margin: clamp(28px, 4vw, 44px) 0 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.hero__visual {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
}

.orbe {
  position: relative;
  width: 100%;
  /* D-034: teto em px, que de fato morde. `max-width` com `vh` nao agia
     porque num item de grid a coluna ja define a largura, e o orbe
     (508px) ficava abaixo do teto (558px) — o limite nunca era atingido.

     440px deixa o orbe + a curva (que agora vive fora do hero) dentro da
     dobra em qualquer tela a partir de 900px de altura, e continua sendo
     o maior elemento visual da pagina. */
  max-width: min(100%, 440px);
  aspect-ratio: 1;
  justify-self: center;
  pointer-events: none;
}

.orbe__canvas {
  display: block;
  width: 100%;
  /* Altura derivada da largura por aspect-ratio, NUNCA `height:auto`
     sozinho: com altura automatica o canvas assume a proporcao do buffer
     e qualquer alteracao de buffer reflui o elemento. Assim a caixa e
     sempre quadrada e estavel. */
  height: auto;
  aspect-ratio: 1 / 1;
  /* o orbe se revela entrando em foco, como uma lente ajustando */
  animation: orbe-entra 1.8s cubic-bezier(.16,1,.3,1) both;
}

@keyframes orbe-entra {
  from { opacity: 0; filter: blur(18px) brightness(.6); transform: scale(.88); }
  to   { opacity: 1; filter: blur(0)    brightness(1);  transform: scale(1); }
}

/* O halo quente que o orbe derrama no fundo do hero.
   ------------------------------------------------------------------
   HISTORICO (dois erros meus, ambos por ACHAR em vez de MEDIR):

   1. Achei que era o canvas com altura zero. Medido: nao era.
   2. Achei que era o gradiente nao chegando a zero. Medido: tambem nao.

   O que a medicao mostrou: o halo era um circulo de ate 900px centrado a
   50% de um hero de ~885px. Ele ultrapassava a caixa, e o `overflow:hidden`
   do .hero cortava a luz com uma ARESTA PERFEITAMENTE RETA. Varredura de
   luminancia linha a linha confirmou a assinatura de uma borda dura, e a
   aresta sobrevivia a desligar o veu e o canvas — so o halo a produzia.

   A SOLUCAO QUE A COMUNIDADE USA neste caso e `mask-image`: em vez de
   tentar fazer a luz terminar antes da borda (frágil, porque depende da
   altura do hero, que muda com o conteudo), a mascara FORCA a luz a se
   dissolver nos ultimos 30% da propria caixa, sempre, independente do
   tamanho. E o mesmo truque do `mask-image: linear-gradient(...)` que se
   usa para fade-out de carrossel e de scroll horizontal.

   Vantagem sobre a abordagem anterior: nao depende de calcular o raio
   certo para cada altura de hero. O `mask-image` e uma segunda camada de
   alfa aplicada DEPOIS do gradiente, entao nenhuma aresta sobrevive — a
   luz chega a alfa 0 antes de encontrar qualquer borda. */
.hero::after {
  content: "";
  position: absolute;
  /* A luz nasce de ONDE O ORBE ESTA — a coluna da direita — e nao do
     centro da caixa. Com o grid, a coluna do orbe e a direita. */
  top: 50%; right: 0;
  width: min(78vw, 1000px);
  height: min(96vh, 940px);
  transform: translateY(-50%);
  background: radial-gradient(ellipse 50% 50% at 50% 50%,
    rgba(255, 183, 3, 0.14) 0%,
    rgba(236, 158, 2, 0.085) 26%,
    rgba(184, 119, 0, 0.038) 46%,
    rgba(120, 78, 0, 0.012) 58%,
    transparent 68%);
  /* A mascara: a luz desaparece antes de tocar qualquer borda. Os 18% de
     rampa sao a folga que absorve qualquer variacao de altura do hero. */
  -webkit-mask-image: radial-gradient(ellipse 62% 62% at 50% 50%,
    #000 0%, #000 48%, rgba(0,0,0,.55) 66%, rgba(0,0,0,.18) 80%, transparent 96%);
  mask-image: radial-gradient(ellipse 62% 62% at 50% 50%,
    #000 0%, #000 48%, rgba(0,0,0,.55) 66%, rgba(0,0,0,.18) 80%, transparent 96%);
  pointer-events: none;
  z-index: 0;
}

/* O conteudo do hero fica ACIMA do halo e do veu. */
.hero__grade { position: relative; z-index: 2; }

/* Uma segunda camada, muito mais larga e fraca, para dissolver a
   transicao para o preto do resto da pagina. Sem ela o halo "acaba" e
   aparece a emenda com a secao seguinte.

   NOTA: NAO uso .hero::before aqui. Ele ja e do GRAO, definido em
   melook.css:288. Como orbe.css carrega DEPOIS, um segundo ::before
   neste arquivo venceria a cascata e o grao sumiria silenciosamente.
   Por isso a camada e um elemento real, .hero__veu. */
.hero__veu {
  position: absolute;
  inset: auto 0 -1px 0;
  height: 42%;
  background: linear-gradient(to bottom,
    transparent 0%,
    rgba(10, 7, 5, 0.55) 62%,
    var(--void) 100%);
  pointer-events: none;
  z-index: 1;
}

/* --- Mobile / tablet estreito: uma coluna, orbe acima do texto ---------
   O grid de 2 colunas so funciona com largura. Abaixo de 880px ele
   espremeria o texto. Aqui o orbe volta a ser bloco e sobe para o topo,
   que e a ordem de leitura certa: primeiro a marca, depois a promessa. */
@media (max-width: 880px) {
  .hero__grade { display: flex; flex-direction: column; }
  /* O bloco visual (orbe + curva) sobe para o topo: primeiro a marca,
     depois a promessa, depois o formulario. A curva acompanha o orbe,
     como no desktop. */
  .hero__visual { order: -1; }
  .hero__texto  { order: 1; }

  /* D-065: A CENTRALIZACAO DO ORBE NO MOBILE.
     ---------------------------------------------------------------
     DEFEITO MEDIDO: em 375/390/430/360px o orbe ficava 33 a 45px a
     ESQUERDA do centro; em 768px, 210px fora.

     CAUSA (medida, nao suposta): `.hero__grade` vira `flex-direction:
     column` aqui em cima. Em flex column o eixo principal e o vertical,
     entao `align-items` age no eixo HORIZONTAL e o padrao `stretch`
     deveria esticar `.hero__visual` ate a largura do pai (342px).
     Nao esticava: o visual media 265,2px — exatamente a largura que o
     proprio `.orbe` pede com `width: min(68vw, 300px)`.

     Consequencia: o pai encolhia ate o filho, entao NAO sobrava espaco
     livre para o `margin: 0 auto` do `.orbe` distribuir. `margin: auto`
     so centraliza quando ha espaco; com o pai do tamanho do filho, os
     dois lados ficam 0px e o bloco inteiro encosta na borda esquerda do
     `.wrap` (x=24).

     A CORRECAO e devolver ao `.hero__visual` a largura que o flexbox ja
     deveria ter dado. `align-self: stretch` e a forma explicita disso —
     nao e contorno, e o comportamento padrao declarado.

     Por que NAO `align-items: center` no `.hero__grade` (hipotese que
     tambem media 0px de desvio): funcionaria aqui, mas mudaria o
     alinhamento de TODOS os filhos do grade, inclusive os que hoje
     dependem do stretch. `align-self` age so neste elemento.

     MEDIDO depois da correcao: desvio 0,0px em 360, 375, 390, 430, 768
     e 880px. Em 881px+ o @media nao se aplica e o desktop segue com o
     orbe na coluna da direita (desvio +282px, que e o correto la). */
  .hero__visual { align-self: stretch; }

  .orbe {
    max-width: none;
    width: min(68vw, 300px);
    margin: 0 auto;
  }
  .hero__curva { max-width: min(88vw, 380px); }
  /* Sem halo largo nao ha borda para dissolver: o veu viraria uma faixa
     escura sem proposito. */
  .hero::after { display: none; }
  .hero__veu { display: none; }
}

/* --- D-031: o orbe gira sempre ----------------------------------------
   Havia aqui um @media (prefers-reduced-motion: reduce) que desligava a
   animacao de entrada. Foi removido junto com a consulta equivalente no
   orbe.js: a marca gira para todos, como qualquer animacao de identidade
   (o cubo do Resend, por exemplo, tambem nao consulta a preferencia).
   O resto do site ja se comportava assim — header, cartoes e botoes tem
   transition/hover em CSS, que a preferencia nao afeta. */