/* ---- track de scrollytelling ---- */
.hero-track{
  position: relative;
  height: 450vh;
}

.hero-viewport{
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
}

.hero-header{
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 104px 24px 6px; /* +16px: eyebrow nao pode ficar sob a nav */
  flex: 0 0 auto;
  /* véu de legibilidade sobre o vídeo full-bleed */
  background: linear-gradient(180deg,
    rgba(var(--scrim-rgb), .95) 0%,
    rgba(var(--scrim-rgb), .78) 55%,
    rgba(var(--scrim-rgb), 0) 100%);
}

/* RHEUNION integração: escopado ".hero-header .eyebrow" (era ".eyebrow" solto
   no protótipo do hero) — o funil também usa uma classe genérica ".eyebrow"
   em vários blocos; sem esse escopo, a folha do funil (carregada depois)
   venceria a cascata e vazaria o estilo do funil para o eyebrow do hero. */
#hero .hero-plate{
  /* placa com sombra (decisão 2026-07-14: estado 4/5 do antigo teste da
     tecla H, promovido a definitivo em desktop e mobile) */
  display: inline-block;
  padding: 22px 44px;
  background: rgba(255,255,255,.5);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 20px;
  box-shadow: 0 18px 50px rgba(15,23,42,.14), 0 2px 8px rgba(15,23,42,.06);
  max-width: 820px;
}

#hero h1{
  font-family: 'Manrope', sans-serif;
  font-weight: 800;
  font-size: clamp(28px, 4vw, 50px);
  line-height: 1.12;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 0;
}

h1 .num{
  font-family: 'JetBrains Mono', monospace;
  font-weight: 700;
  color: var(--blue);
}

/* pesos contrastados (rev 2026-07-13): a linha da Andy sussurra (400),
   a linha do "você" afirma (herda o 800 do h1) */
#hero h1 .h1-leve{ font-weight: 400; }

/* palavras-chave nas cores da logo: azul e rosa (par de marca do DS) */
#hero h1 .kw-azul{ color: var(--blue); }
#hero h1 .kw-rosa{ color: var(--brand-violet); }

/* (as molduras alternativas do teste da tecla H foram removidas em
   2026-07-14 — a placa venceu e vive no #hero h1 acima) */

/* ---- vídeo: FULL-BLEED atrás de tudo (revisão 2026-07-09) ---- */
.hero-stage{
  position: absolute;
  inset: 0;
  z-index: 0;
  padding: 0;
}

.hero-stage video{
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
  /* mata o overlay de controles/PiP que o browser mostra no hover */
  pointer-events: none;
  /* overscan sutil: esconde fiapos de borda do encode */
  transform: scale(1.005);
  /* grade de cor + unsharp agora vêm EMBUTIDOS no encode (ffmpeg) —
     não aplicar filter aqui, senão dobra o efeito */
}

/* ---- overlay sobre o vídeo: véu integral + lavagem de marca + vinheta + grain ---- */
.fx-overlay{
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    /* véu integral: cobre o quadro TODO — unifica e esconde artefatos */
    linear-gradient(rgba(var(--scrim-rgb), var(--veil)), rgba(var(--scrim-rgb), var(--veil))),
    /* vinheta nas bordas */
    radial-gradient(ellipse at center,
      rgba(var(--scrim-rgb), 0) 58%,
      rgba(var(--scrim-rgb), .22) 100%);
}

/* lavagem de marca sutil (azul→violeta, soft-light): dá direção de arte
   ao vídeo e quebra a leitura de "footage crua" */
.fx-overlay::before{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg,
    rgba(78,168,238,.55) 0%,
    rgba(255,255,255,0) 45%,
    rgba(139,92,246,.45) 100%);
  opacity: .10;
  mix-blend-mode: soft-light;
}
/* grain ANIMADO full-frame: grain vivo mascara a suavidade do render
   muito melhor que estático (o olho lê como textura de filme).
   inset negativo dá folga pro jitter sem mostrar borda. */
.fx-overlay::after{
  content: "";
  position: absolute;
  inset: -12%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: .045;
  mix-blend-mode: overlay;
  animation: grainShift .85s steps(8) infinite;
}
:root[data-theme="dark"] .fx-overlay::after{ opacity: .07; }

@keyframes grainShift{
  0%   { transform: translate(0, 0); }
  12.5%{ transform: translate(-2.2%, 1.4%); }
  25%  { transform: translate(1.6%, -2.1%); }
  37.5%{ transform: translate(-1.2%, 2.3%); }
  50%  { transform: translate(2.4%, 1.1%); }
  62.5%{ transform: translate(-2.0%, -1.6%); }
  75%  { transform: translate(1.3%, 2.0%); }
  87.5%{ transform: translate(2.1%, -1.9%); }
  100% { transform: translate(0, 0); }
}

@media (prefers-reduced-motion: reduce){
  .fx-overlay::after{ animation: none; }
}

/* ---- hint ---- */
.hero-hint{
  position: relative;
  z-index: 2;
  flex: 0 0 auto;
  text-align: center;
  padding: 14px 24px 26px;
  transition: opacity .6s ease;
}

.hero-hint .hint-pill{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'Manrope', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: #334155;
  background: rgba(var(--scrim-rgb), .62);
  border: 1px solid rgba(255,255,255,.55);
  border-radius: 999px;
  padding: 9px 18px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 4px 18px rgba(15,23,42,.06);
}

.hero-hint .arrow{
  display: inline-block;
  margin-left: 6px;
  animation: bob 1.6s ease-in-out infinite;
}

.hero-hint.hidden{
  opacity: 0;
  pointer-events: none;
}

@keyframes bob{
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(5px); }
}

/* ---- debug readout ---- */
.hero-debug{
  position: fixed;
  right: 14px;
  bottom: 14px;
  z-index: 20;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  line-height: 1.6;
  color: #0f172a;
  background: rgba(255,255,255,.85);
  border: 1px solid rgba(15,23,42,.12);
  border-radius: 8px;
  padding: 8px 10px;
  display: none;
  white-space: pre;
  backdrop-filter: blur(6px);
}

.hero-debug.on{ display: block; }

/* ---- reduced motion: sem scrub, tudo estático no frame 0 ---- */
@media (prefers-reduced-motion: reduce){
  .hero-track{
    height: auto;
  }
  .hero-viewport{
    position: relative;
    height: auto;
    min-height: 100vh;
  }
  .hero-hint{
    display: none;
  }
}

/* ---- mobile/tablet (<1024px — decisão D5): hero estático, uma tela.
   Sem track de 450vh, sem scrub, sem lente. A imagem entra por
   background-image DENTRO da media query de propósito: media query que
   não casa não baixa o asset — desktop não paga os ~124KB, mobile não
   paga os ~16MB do vídeo (o hero.js nem liga o src). A imagem atual é
   PLACEHOLDER (frame 0 do vídeo) até a arte final chegar. ---- */
@media (max-width: 1023px){
  .hero-track{ height: auto; }
  /* headline em QUATRO linhas no máximo ("A Andy faz o / processo completo /
     Você faz a / contratação"): antes o padding da placa (44px/lado) somava
     com o do h1 (20px/lado) e, com 6.2vw, a frase da Andy quebrava em três
     em telas ≤360px (5 linhas no total). O padding vive só na placa e a
     fonte caiu para 5.2vw (piso 16px), medido até 320px de viewport. */
  #hero .hero-plate{ padding: 16px 18px; }
  #hero h1{ font-size: clamp(16px, 5.2vw, 26px); padding: 0; }
  .hero-viewport{
    position: relative;
    height: 100vh;
    height: 100svh;
    min-height: 560px;
  }
  .hero-stage video{ display: none; }
  .hero-hint{ display: none; }
  /* grain parado: a animação full-frame custa bateria e não se paga no celular */
  .fx-overlay::after{ animation: none; }
  /* headline no TOPO (decisão 2026-07-14; a variante na base foi testada
     com toggle local e descartada) */

  /* ---- PARALAXE em 3 camadas (tempero do hero estático) ----
     fundo desfocado (longe, mexe pouco) · glow de marca (meio) · Andy
     recortada (perto, mexe mais). O hero.js escreve --px-*/--py-*/--gx via
     giroscópio (Android direto; iOS após 1º toque) com fallback de scroll.
     Assets finais (2026-07-14): hero-mobile-bg.jpg vem de escritorio1.jpg
     (blur assado via ffmpeg) e hero-mobile-andy.webp de andy-alpha.png. */
  .hp-bg{
    position: absolute; inset: 0;
    will-change: transform;
    transform: translate3d(var(--px-bg, 0px), var(--py-bg, 0px), 0) scale(1.12);
  }
  .hp-bg-img{
    position: absolute; inset: 0;
    background: url("../assets/img/hero-mobile-bg.jpg") center / cover no-repeat;
    /* Ken Burns: vida constante, independe de sensor */
    animation: heroKenBurns 26s ease-in-out infinite alternate;
  }
  @keyframes heroKenBurns{
    from{ transform: scale(1); }
    to  { transform: scale(1.06); }
  }
  .hp-glow{
    position: absolute; inset: 0;
    background: radial-gradient(62% 52% at calc(50% + var(--gx, 0px)) 40%,
      rgba(78,168,238,.30), rgba(139,92,246,.16) 46%, rgba(255,255,255,0) 74%);
    mix-blend-mode: screen;
    transform: translate3d(calc(var(--px-an, 0px) * .5), calc(var(--py-an, 0px) * .5), 0);
  }
  .hp-andy{
    position: absolute; inset: 0;
    /* sprite com alfa: dimensiona pela ALTURA (não cover — o canvas dela é
       quase quadrado e cover a ampliava demais no retrato) e ancora ALÉM da
       borda de baixo — os 18px de sobra escondem a fresta quando o paralaxe
       move a camada para cima */
    background: url("../assets/img/hero-mobile-andy.webp") center calc(100% + 18px) / min(225%, 1250px) auto no-repeat;
    will-change: transform;
    transform: translate3d(var(--px-an, 0px), var(--py-an, 0px), 0);
  }
}
/* as camadas do paralaxe só existem no mobile */
@media (min-width: 1024px){ .hp-bg, .hp-glow, .hp-andy{ display: none; } }
@media (prefers-reduced-motion: reduce){
  .hp-bg-img{ animation: none; }
}

/* Costura hero → seção 2 (2026-07-10): o vídeo full-bleed se dissolve no
   fundo da página em vez de terminar numa aresta seca. */
.hero-track::after{
  content:"";
  position:absolute; left:0; right:0; bottom:0; height:140px;
  background:linear-gradient(180deg, rgba(var(--scrim-rgb), 0) 0%, rgb(var(--scrim-rgb)) 100%);
  pointer-events:none;
  z-index:40;
}