/* Hero full-bleed com pin — os frames do vídeo avançam com o scroll.
   O JS escreve apenas --hero-progress (0 → 1) na seção; as fases abaixo
   derivam tudo dessa variável, sem estilo animado por JavaScript. */

.hero-scroll{
  --hero-progress: 0;
  --p: var(--hero-progress);

  /* Copy inicial: cheio até 30%, dissolvido em 48%. */
  --copy-in: clamp(0, calc((0.48 - var(--p)) / 0.18), 1);
  /* Desfecho da marca: entra a partir de 82%. */
  --outro-in: clamp(0, calc((var(--p) - 0.82) / 0.12), 1);
  /* Convite de scroll: some quase imediatamente. */
  --cue-in: clamp(0, calc((0.06 - var(--p)) / 0.06), 1);

  position: relative;
  height: 320vh;
  background: var(--bg-primary);

  /* O header ocupa 92px do fluxo antes desta seção. Sem puxar a seção
     para debaixo dele, em scroll 0 o bloco `sticky` ainda não grudou:
     começa 92px abaixo do topo e o rodapé do conteúdo sai da tela. */
  margin-top: -92px;
}

.hero-sticky{
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  isolation: isolate;
  background: var(--bg-primary);
}

/* ---------- imagem ---------- */

/* O quadro começa abaixo do header. Além de não esconder o rótulo
   "Localização em tempo real" (que fica no topo do vídeo), sobra uma
   caixa de proporção quase 16:9 — o recorte "cover" fica perto de zero
   e o HUD inteiro cabe na tela. */
.hero-stage{
  position: absolute;
  inset: 92px 0 0 0;
  z-index: 0;
  display: flex;
  align-items: center;
  background: #02141b;
}

.hero-canvas{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover; /* vale para o <img> do modo reduced-motion */
}

/* Véu lateral que sustenta a leitura do texto; dissolve junto com ele. */
.hero-scrim{
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: var(--copy-in);
  background:
    /* base inferior: sustenta os indicadores sobre o asfalto molhado */
    linear-gradient(0deg, rgba(2,14,19,.78) 0%, rgba(2,14,19,0) 34%),
    linear-gradient(100deg,
      rgba(2,14,19,.94) 0%,
      rgba(2,14,19,.80) 30%,
      rgba(2,14,19,.34) 56%,
      rgba(2,14,19,0) 78%);
}

/* Sempre presente: assenta o header e fecha as bordas do quadro. */
.hero-vignette{
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(2,14,19,.72) 0%, rgba(2,14,19,0) 18%),
    radial-gradient(130% 95% at 50% 48%, rgba(2,14,19,0) 42%, rgba(2,14,19,.62) 100%);
}

/* ---------- copy de abertura ---------- */

.hero-copy{
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  padding-top: 92px; /* altura do header sticky */
  opacity: var(--copy-in);
  transform: translateY(calc((1 - var(--copy-in)) * -28px));
  filter: blur(calc((1 - var(--copy-in)) * 6px));
  will-change: opacity, transform, filter;
}

.hero-title{
  font-family: var(--font-display);
  font-size: var(--fs-display);
  font-weight: var(--fw-display);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  text-transform: uppercase;
  color: #fff;
  margin: 20px 0 24px;
  /* Largo o bastante para o <br/> do markup decidir a quebra: sem isso
     o título vira quatro linhas e empurra os indicadores para fora. */
  max-width: 980px;
  overflow-wrap: break-word;
  text-shadow: 0 2px 30px rgba(2,14,19,.85);
}

.hero-title-accent{
  background: var(--gradient-main);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.hero-lead{
  font-size: 1.2rem;
  color: var(--text-secondary);
  line-height: var(--lh-relaxed);
  margin: 0 0 40px;
  max-width: 52ch;
  text-shadow: 0 1px 20px rgba(2,14,19,.9);
}

.hero-actions{
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

/* No desfecho os botões ficam centralizados: sem largura definida o
   flex assume max-content e a dupla vaza a lateral em telas estreitas
   em vez de quebrar a linha. */
.hero-outro .hero-actions{
  width: 100%;
  justify-content: center;
}

.hero-stat-value{
  font-family: var(--font-mono);
  font-size: 1.85rem;
  font-weight: var(--fw-bold);
  background: var(--gradient-main);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* A barra do "24/7" desce bem abaixo da linha dos algarismos na JetBrains
   Mono: onde o 2, o 4 e o 7 param, ela ainda continua. Com 4px de margem
   sobravam 7px entre a ponta da barra e o rótulo, contra 16px dos outros três
   números, e o "24/7" parecia encostado no texto de baixo. A folga maior
   acomoda o glifo mais baixo da régua, e não só o mais comum. */
.hero-stat-label{
  font-size: .8rem;
  color: var(--text-muted);
  margin-top: 14px;
  text-transform: uppercase;
  letter-spacing: var(--ls-label);
}

/* ---------- desfecho da marca ---------- */

.hero-outro{
  position: absolute;
  left: 0;
  right: 0;
  bottom: 11vh;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 20px;
  padding: 0 24px;
  opacity: var(--outro-in);
  transform: translateY(calc((1 - var(--outro-in)) * 28px));
  will-change: opacity, transform;
}

/* Base escura só sob o desfecho, para os CTAs não flutuarem no asfalto. */
.hero-outro::before{
  content: "";
  position: absolute;
  left: 50%;
  bottom: -11vh;
  transform: translateX(-50%);
  width: 100vw;
  height: calc(100% + 22vh);
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(2,14,19,0) 0%, rgba(2,14,19,.82) 42%, rgba(2,14,19,.94) 100%);
}

.hero-outro-eyebrow{
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--green-400);
  margin: 0;
}

.hero-outro-title{
  font-family: var(--font-display);
  font-size: var(--fs-section-title);
  font-weight: var(--fw-extrabold);
  line-height: .98;
  letter-spacing: var(--ls-display);
  text-transform: uppercase;
  color: #fff;
  margin: 0;
  max-width: 18ch;
  text-shadow: 0 2px 30px rgba(2,14,19,.85);
}

/* No desktop os rótulos do HUD dentro do vídeo já são legíveis. */
.hero-outro-pillars{ display: none; }

/* ---------- convite de scroll ---------- */

.hero-cue{
  position: absolute;
  left: 50%;
  bottom: 32px;
  z-index: 3;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: var(--fs-label-sm);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--text-muted);
  pointer-events: none;
  opacity: var(--cue-in);
}

.hero-cue i{
  color: var(--green-400);
  animation: hero-cue-bob 1.8s var(--ease-out) infinite;
}

@keyframes hero-cue-bob{
  0%, 100% { transform: translateY(0); opacity: .55; }
  50%      { transform: translateY(6px); opacity: 1; }
}

/* ---------- barra de carregamento dos frames ---------- */

.hero-loader{
  position: absolute;
  top: 92px;
  left: 0;
  right: 0;
  z-index: 3;
  height: 2px;
  background: rgba(255,255,255,.06);
  transition: opacity var(--dur-slower) var(--ease-out);
}

.hero-loader.is-done{ opacity: 0; }

.hero-loader span{
  display: block;
  height: 100%;
  transform-origin: left center;
  background: var(--gradient-main);
  transition: transform var(--dur-slow) var(--ease-out);
}

/* ---------- tablet e celular ---------- */

/* Em retrato o vídeo é igualmente full-bleed: o set `portrait` já vem
   recortado em 1:2 com o deslocamento de enquadramento embutido, então
   não há faixa nem letterbox — a experiência é a mesma do desktop, só
   com o texto ancorado embaixo, que é onde ele cabe numa tela em pé. */
@media (max-width: 1023px){
  .hero-scroll{ height: 300vh; }

  /* Em retrato o texto fica embaixo, então o véu vem de baixo para cima
     em vez de vir da esquerda. Contido de propósito: o carro está no
     meio-baixo do enquadramento vertical e um véu forte o apagaria —
     a legibilidade do texto vem da sombra em `.hero-title`/`.hero-lead`,
     não de afogar a imagem. */
  .hero-scrim{
    background: linear-gradient(180deg,
      rgba(2,14,19,.30) 0%,
      rgba(2,14,19,0) 20%,
      rgba(2,14,19,.05) 44%,
      rgba(2,14,19,.45) 70%,
      rgba(2,14,19,.72) 100%);
  }

  /* A carroceria preta do carro fica bem atrás do título, e ele é
     branco e pesado: o halo de 30px do desktop só apagava a imagem.
     Aqui a sombra é curta, só para descolar da luz de freio. */
  .hero-title{ text-shadow: 0 2px 10px rgba(2,14,19,.95); }

  .hero-vignette{
    background: linear-gradient(180deg, rgba(2,14,19,.72) 0%, rgba(2,14,19,0) 20%);
  }

  .hero-copy{
    align-items: flex-end;
    padding-bottom: 7vh;
  }

  .hero-outro{ gap: 16px; }

  /* No desfecho o véu principal já está em zero e o HUD do vídeo fica
     em brilho pleno bem atrás do texto. Esta base sobe mais alto e mais
     opaca que a do desktop para separar as duas camadas. */
  .hero-outro::before{
    top: -34vh;
    bottom: -11vh;
    height: auto;
    background: linear-gradient(180deg,
      rgba(2,14,19,0) 0%,
      rgba(2,14,19,.62) 34%,
      rgba(2,14,19,.90) 58%,
      rgba(2,14,19,.97) 100%);
  }

  .hero-outro-pillars{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .hero-outro-pillars li{
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 13px;
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    background: rgba(4,20,27,.55);
    font-size: .78rem;
    color: var(--text-secondary);
    white-space: nowrap;
  }

  .hero-outro-pillars i{ color: var(--green-400); font-size: .8rem; }

  .hero-title{ max-width: none; }
  .hero-lead{ margin-bottom: 32px; }

  /* A faixa de vídeo come metade da altura útil e os quatro números não
     cabem no que sobra. Eles reaparecem inteiros na seção "Números". */
  .hero-stats{ display: none; }
  .hero-cue{ display: none; }
}

@media (max-width: 768px){
  .hero-lead{ font-size: 1.05rem; margin-bottom: 24px; }
}

/* Telas curtas (piso: os 320×568 do iPhone SE de primeira geração). */
@media (max-width: 768px) and (max-height: 700px){
  .hero-copy{ padding-bottom: 4vh; }
  .hero-title{ font-size: 2.2rem; margin: 14px 0 16px; }
  .hero-lead{ font-size: .95rem; line-height: 1.5; margin-bottom: 20px; }
  .hero-outro-title{ font-size: 2rem; }
}

/* ---------- estado estático ---------- */

/* Aplicado pelo JS (`is-static`) quando o visitante pediu movimento
   reduzido ou quando o navegador não abre AVIF: sem pin e sem scrub,
   um único frame com todo o texto visível de uma vez. Os 96 frames nem
   chegam a ser baixados. */
.hero-scroll.is-static{ height: auto; }
.hero-scroll.is-static .hero-sticky{ position: relative; height: auto; min-height: 100svh; }
.hero-scroll.is-static .hero-scrim{ opacity: 1; }

.hero-scroll.is-static .hero-copy{
  position: relative;
  inset: auto;
  opacity: 1;
  transform: none;
  filter: none;
  min-height: 100svh;
}

.hero-scroll.is-static .hero-outro,
.hero-scroll.is-static .hero-cue,
.hero-scroll.is-static .hero-loader{ display: none; }

@media (prefers-reduced-motion: reduce){
  .hero-cue i{ animation: none; }
}