/* ================================================================
   HERO SOL.AI · isolado do app.css principal para não vazar
   efeitos nem overflow-hidden pras seções abaixo.
   Todos os seletores são específicos (.sol-hero*) e vivem
   apenas dentro do container .sol-hero — não cascatam.
   ================================================================ */

/* enquanto o hero SOL.AI está visível, o JS coloca .sem-ruido no
   body — desliga o grão global (body::after) que estava dando
   sensação de pixelação sobre a foto da terra. */
body.sem-ruido::after { opacity: 0 !important; }

/* seção com canto superior arredondado + sobreposição sobre #impacto
   (claro). Como o #sol-ai é .amb-a (navy), o canto arredondado
   revela o cinza claro da seção anterior. Uso clip-path pra
   arredondar sem quebrar o sticky interno da convergência. */
.sol-ai-arredondado {
  margin-top: calc(-1 * clamp(28px, 3vw, 44px)) !important;
  clip-path: inset(0 round clamp(28px, 3vw, 44px) clamp(28px, 3vw, 44px) 0 0);
}

.sol-hero {
  position: relative; isolation: isolate; overflow: hidden;
  /* rompe o wrap horizontalmente + puxa pra cima o padding do
     .respiro do #sol-ai para colar no topo */
  margin-inline: calc(50% - 50vw);
  margin-top: calc(-1 * clamp(84px, 12vw, 148px));
  min-height: min(94vh, 860px);
  display: grid; align-items: end;
  padding: clamp(60vh, 62vh, 500px) 0 clamp(80px, 12vh, 140px);
  /* border-radius do topo agora fica na section (#sol-ai) */
}

/* planeta ancorado no TOPO · sem parallax: com altura 100% qualquer
   deslocamento revelava vazio na base/topo, então o transform saiu.
   Fade-in de entrada mantido. */
.sol-hero-planeta {
  position: absolute; left: 0; right: 0; top: 0;
  width: 100%;
  object-fit: cover; object-position: 50% 30%;
  z-index: -2;
  transform: translate3d(0, var(--sol-y, 0px), 0);
  animation: sol-planeta-entra 1600ms cubic-bezier(.22,.61,.36,1) 200ms both;
  will-change: opacity, transform;
  image-rendering: -webkit-optimize-contrast;
}
@keyframes sol-planeta-entra {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes sol-planeta-entra {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* véu · aparece só no terço inferior, onde o texto vive.
   O topo/meio da imagem fica limpo, sem véu nenhum. */
.sol-hero::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  height: 45%; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg,
    transparent 0%,
    rgb(4 10 22 / .35) 45%,
    var(--color-navy) 100%);
}


/* conteúdo · HUD + título + descrição centralizados */
.sol-hero-conteudo {
  position: relative; z-index: 1; text-align: center;
}
.sol-hero-hud {
  display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 4px 12px; margin: 0 auto;
  padding: 0;
  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-size: 10.5px; letter-spacing: .24em; text-transform: uppercase;
  color: rgb(255 255 255 / .6);
  text-shadow: 0 1px 8px rgb(4 10 22 / .7);
  opacity: 0;
  animation: sol-hero-sobe 1000ms cubic-bezier(.22,.61,.36,1) 500ms both;
}
.sol-hero-hud-eyebrow {
  color: var(--color-azul-l); font-weight: 600; letter-spacing: .18em;
  text-shadow: 0 0 8px color-mix(in srgb, var(--color-azul-l) 55%, transparent);
}
.sol-hero-hud-sep {
  display: inline-block; width: 26px; height: 1px;
  background: rgb(255 255 255 / .3);
}
.sol-hero-hud i { font-style: normal; color: rgb(255 255 255 / .3); }

.sol-hero-titulo {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4.4vw, 3.4rem);
  letter-spacing: -.025em; line-height: 1.05;
  margin: 22px auto 0; max-width: 20em;
  text-shadow: 0 2px 24px rgb(4 10 22 / .7), 0 0 60px rgb(4 10 22 / .5);
}
.sol-hero-titulo .fina {
  display: block; font-weight: 200; color: rgb(255 255 255 / .82);
  opacity: 0;
  animation: sol-hero-sobe 1100ms cubic-bezier(.22,.61,.36,1) 800ms both;
}
.sol-hero-titulo .densa {
  display: block; font-weight: 700; color: #fff;
  opacity: 0;
  animation: sol-hero-sobe 1100ms cubic-bezier(.22,.61,.36,1) 1000ms both;
}
.sol-hero-desc {
  margin: 22px auto 0; max-width: 52ch;
  font-size: clamp(15px, 1.5vw, 17px);
  font-weight: 300; line-height: 1.6;
  color: rgb(255 255 255 / .82);
  text-shadow: 0 1px 12px rgb(4 10 22 / .6);
  opacity: 0;
  animation: sol-hero-sobe 1100ms cubic-bezier(.22,.61,.36,1) 1200ms both;
}
.sol-hero-desc b { font-weight: 500; color: #fff; }
@keyframes sol-hero-sobe {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0);    }
}

@media (prefers-reduced-motion: reduce) {
  .sol-hero-planeta,
  .sol-hero-hud, .sol-hero-titulo .fina, .sol-hero-titulo .densa, .sol-hero-desc {
    animation: none; opacity: 1; transform: none;
  }
}
@media (max-width: 640px) {
  .sol-hero { min-height: 56vh; padding: 14vh 0 60px; }
  .sol-hero-titulo { max-width: 14em; }
  .sol-hero-hud-sep { display: none; }
  /* parallax só faz sentido em telas grandes: no mobile a imagem
     fica estática pra evitar timing esquisito na entrada */
  .sol-hero-planeta { transform: none; }
}