/* ===== topo com o astronauta em vídeo, controlado pela rolagem =====
   A seção fica "presa" na tela enquanto a rolagem avança a animação; no fim, radar e selos aparecem. */
.hv{display:block;min-height:0;padding:0;overflow:clip}
.hv::before,.hv::after{display:none}
.hv .scroll-cue{display:none}
.hv-pin{position:relative}
.hv-stage{position:sticky;top:0;height:100svh;overflow:hidden}
.hv-scene{position:absolute;inset:0;z-index:0;overflow:hidden}
.hv-poster,.hv-poster img,.hv-cv{position:absolute;inset:0;width:100%;height:100%;display:block}
.hv-poster img{object-fit:cover;object-position:62% 50%}
.hv-cv{z-index:1}
/* bordas escurecidas: o planeta se funde com o fundo da página, e o texto ganha contraste à esquerda */
.hv-shade{position:absolute;inset:0;z-index:2;pointer-events:none;background:
  radial-gradient(58% 78% at 22% 52%,rgba(5,5,6,.86),rgba(5,5,6,.5) 55%,transparent 78%),
  linear-gradient(180deg,rgba(5,5,6,.65),transparent 22%,transparent 72%,var(--bg) 100%),
  linear-gradient(90deg,var(--bg) 0,transparent 7%,transparent 93%,var(--bg) 100%)}
.hv .hero-grid{position:relative;z-index:3;height:100%;display:flex;align-items:center;padding-top:96px;padding-bottom:40px}
.hv .hero-copy{max-width:600px}

/* radar e cards: sempre visíveis desde o carregamento, parados no lugar (posicionados pelo script); só o astronauta se move */
.hv .hero-visual.hv-visual{position:absolute;inset:0;z-index:auto;display:block;pointer-events:none;transform:none!important;opacity:1!important;animation:none!important}
.hv-box{position:absolute;z-index:3;left:0;top:0;width:0;aspect-ratio:1;mix-blend-mode:screen;opacity:0;transform:scale(.86);transition:opacity .7s var(--ease),transform .9s var(--ease)}
.hv-box .radar{width:100%}
.hv .chip{right:auto!important;bottom:auto!important;opacity:0;transform:translateY(10px);transition:opacity .6s var(--ease),transform .6s var(--ease);padding:9px 14px 10px;border-radius:12px;white-space:nowrap}
.hv .chip small{font-size:10.5px}
.hv .chip strong{font-size:14px}
.hv .chip .dot{top:10px;right:10px;width:7px;height:7px}
.hv .chip.c1{padding-right:26px}
.hv.hv-chips .hv-box{opacity:1;transform:none}
/* radar e 3 cards aparecem assim que a página abre (o script posiciona e libera), sem depender da rolagem */
.hv.hv-chips .chip{opacity:1;transform:none;pointer-events:auto}
.hv.hv-chips .chip.c2{transition-delay:.15s}
.hv.hv-chips .chip.c3{transition-delay:.3s}

/* celular: texto em cima, cena logo abaixo; a seção prende quando a cena chega ao pé da tela */
@media(max-width:899px){
  .hv-stage{height:auto;display:flex;flex-direction:column}
  .hv .hero-grid{order:1;height:auto;display:block;padding-top:110px;padding-bottom:0}
  .hv .hero-copy{max-width:none}
  .hv-scene{order:2;position:relative;inset:auto;width:100%;height:min(100vw,520px);margin-top:-6px}
  .hv-poster img{object-position:55% 50%}
  .hv-shade{background:
    linear-gradient(180deg,var(--bg) 0,transparent 18%,transparent 80%,var(--bg) 100%),
    linear-gradient(90deg,var(--bg) 0,transparent 8%,transparent 92%,var(--bg) 100%)}
  .hv .chip{padding:7px 11px 8px;border-radius:10px}
  .hv .chip small{font-size:9px}
  .hv .chip strong{font-size:12px}
  .hv .chip.c1{padding-right:22px}
}
@media(prefers-reduced-motion:reduce){.hv-box,.hv .chip{transition:none}}

/* computador: o texto nunca encosta no menu fixo; a cena cresce se o texto for alto e o título encolhe um pouco em telas baixas */
@media(min-width:900px){
  .hv-stage{height:auto;min-height:100svh}
  .hv .hero-grid{height:auto;min-height:100svh;box-sizing:border-box;align-items:stretch;padding-top:116px;padding-bottom:28px}
  .hv .hero-copy{margin-block:auto}
  .hv .hero-copy h1{font-size:clamp(34px,min(5.4vw,6.6vh),68px);margin-bottom:20px}
}