/* =============================================================================
   TAKA DESIGN — HERO
   -----------------------------------------------------------------------------
   Consome os componentes do Design System (.blob, .mesh-dots, .scanline,
   .t-*, .split-line, .rise, .btn/.btn-neon, .nav-pill, .pulse-dot,
   .text-glow). Este arquivo trata apenas de composição, camadas e responsivo.

   Camadas (z-index dentro de .hero):
     0  atmosfera — .blob-1 + .blob-2 (o próprio fundo de página do DS)
     1  canvas    — Kinetic Grid (pointer-events: none)
     2  textura   — .mesh-dots, .scanline e a vinheta de leitura
     3  guias     — divisões verticais editoriais
     4  conteúdo  — navbar, headline, copy e CTA
   ============================================================================= */

:root {
  --header-h: clamp(5rem, 9vh, 7.5rem);

  /* Parâmetros da malha cinética, lidos pelo kinetic-grid.js.
     A densidade de pontos deriva de .mesh-dots (rgba(255,255,255,.09)). */
  --hero-mesh-color: #ffffff;
  --hero-mesh-cell: 100px;
  --hero-mesh-line-alpha: .09;      /* referência: .mesh-dots do DS usa .09 */
  --hero-mesh-node-alpha: .22;
}

/* -----------------------------------------------------------------------------
   Header — fixo sobre a Hero para ler como parte da composição
   -------------------------------------------------------------------------- */
.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 40;
  padding-block: clamp(1.25rem, 2.4vh, 1.75rem);
}

.site-header__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

/* Logo e toggle acima do painel de navegação (mesmo contexto de empilhamento
   do header), para continuarem visíveis com o menu mobile aberto. */
.brand {
  position: relative;
  z-index: 60;
  display: block;
  border-radius: 4px;
  transition: filter .5s var(--ds-ease), opacity .35s var(--ds-ease);
}
.brand:hover {
  opacity: .92;
  filter: drop-shadow(0 0 22px rgba(168, 85, 247, .55));
}

/* A largura acompanha a proporção original do arquivo (1293 × 372). */
.brand__img {
  height: clamp(2.375rem, 1.15rem + 2.3vw, 3.75rem);
  width: auto;
}

/* --- Navegação em pill (padrão do header do Design System) -----------------
   .spotlight é o holofote que o DS usa nos cards — um brilho radial que segue
   o cursor via --mx/--my, já wireado em design-system.js (não precisa de JS
   novo aqui). Aplicado no grupo inteiro em vez de pill a pill, cria um brilho
   ambiente contínuo acompanhando o cursor pela navbar, sem somar um segundo
   efeito por link (o hover de cada .nav-pill continua exatamente o do DS).
   `position: relative` é necessário porque .site-header é position: fixed —
   sem isso o ::before absolute do spotlight escaparia para o header inteiro
   em vez de ficar contido no grupo de pills. */
.nav__list {
  position: relative;
  display: flex;
  align-items: center;
  gap: .25rem;
  padding: .375rem;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: var(--ds-r-pill);
  background: rgba(255, 255, 255, .05);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, .4);
}

/* .nav-pill do DS é desenhado para <button>; aqui os destinos são links. */
.nav__list .nav-pill {
  display: block;
  text-decoration: none;
}

/* --- Alternância mobile ---------------------------------------------------- */
.nav-toggle {
  position: relative;
  z-index: 60;
  display: none;
  gap: .5rem;
}
/* Dois efeitos de brilho do DS disparam neste botão ao abrir o menu, e em
   touch os dois leem como "flick" — medido por captura de frames compostos:
   o brilho do botão saltava +45% (48 → 69) e voltava, em ~40ms.

   1. .btn.is-pressed (design-system.js, em qualquer pointerdown de .btn):
      filter brightness(1.55)→1, que SALTA direto pro pico sem rampa de
      entrada (só a decadência é animada).
   2. .btn:hover::before { animation: sheen } — um facho branco a 45% de
      opacidade varrendo o botão em .85s. Responde por 86% do overshoot.
      Em ponteiro fino o sheen é o efeito bonito que o DS quer; em touch o
      :hover "gruda" no toque e o facho dispara junto com a abertura.

   Só o toggle é afetado; os outros .btn mantêm ambos os efeitos do DS. */
.nav-toggle.is-pressed { animation: none; filter: none; }

@media (hover: none) {
  .nav-toggle:hover::before { animation: none; }
}
.nav-toggle__icon { width: 1.125rem; height: 1.125rem; overflow: visible; }
.nav-toggle__line {
  transform-box: view-box;
  transform-origin: center;
}

/* Fallback funcional se o CDN do GSAP não responder, e estado instantâneo
   para quem pediu movimento reduzido. Com GSAP presente, hero.js remove esta
   classe e interpola as mesmas posições. */
.nav-toggle--static[aria-expanded="true"] .nav-toggle__line--top {
  transform: translateY(5px) rotate(45deg);
}
.nav-toggle--static[aria-expanded="true"] .nav-toggle__line--middle {
  opacity: 0;
  transform: scaleX(0);
}
.nav-toggle--static[aria-expanded="true"] .nav-toggle__line--bottom {
  transform: translateY(-5px) rotate(-45deg);
}

/* -----------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 100vh;
  min-height: 100svh;
  background: var(--ds-void);
}

/* Camada 0 — atmosfera ------------------------------------------------------ */
.hero__atmosphere {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
/* .blob-1 (índigo) e .blob-2 (rosa) são exatamente o componente de fundo que
   o próprio Design System usa no nível de página — a seção "decorative-blobs"
   no topo de design_system.html. Cor, tamanho, posição, blur e a animação
   `drift` não são tocados aqui, só a opacidade (o padrão do componente, .6,
   é calibrado para viver atrás do glass-panel opaco do DS, não sobre um
   lettering display a céu aberto). Cada blob fica ancorado a um canto —
   índigo no canto de cima (ecoa o acento da marca), rosa no de baixo (ecoa o
   fim do gradiente do CTA neon) — deixando o centro, onde a headline mora,
   naturalmente mais limpo. */
.hero__atmosphere .blob { opacity: .22; }

/* Camada 1 — Kinetic Grid --------------------------------------------------- */
.hero__canvas {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  pointer-events: none;              /* a captura acontece na própria .hero */
  animation: hero-canvas-in 1.5s var(--ds-ease) both;
}

@keyframes hero-canvas-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Camada 2 — textura + vinheta de leitura ----------------------------------- */
.hero__texture {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

/* Escurece o miolo o suficiente para a headline se destacar dos blobs, sem
   apagar a malha nas bordas. */
.hero__veil {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(58% 42% at 50% 47%, rgba(2, 2, 5, .5) 0%, rgba(2, 2, 5, 0) 100%),
    radial-gradient(125% 95% at 50% 50%, rgba(2, 2, 5, 0) 42%, rgba(2, 2, 5, .55) 100%);
}

/* Camada 3 — guias verticais editoriais ------------------------------------- */
.hero__guides {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 14%, #000 86%, transparent);
          mask-image: linear-gradient(to bottom, transparent, #000 14%, #000 86%, transparent);
}
.hero__guides-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  height: 100%;
}
.hero__guides-grid > span { border-left: 1px solid rgba(255, 255, 255, .05); }
.hero__guides-grid > span:last-child { border-right: 1px solid rgba(255, 255, 255, .05); }

/* Camada 4 — conteúdo ------------------------------------------------------- */
.hero__inner {
  position: relative;
  z-index: 4;
  container-type: inline-size;
  display: grid;
  grid-template-rows: 1fr auto;
  align-items: center;
  min-height: 100vh;
  min-height: 100svh;
  padding-block: var(--header-h) clamp(1.75rem, 4vh, 3rem);
}

/* --- Bloco central: eyebrow + headline ------------------------------------ */
.hero__lead { display: grid; gap: clamp(.75rem, 1.8vh, 1.25rem); }

.hero__eyebrow { color: rgba(255, 255, 255, .5); }

/* Herda família, peso 600 e tracking -0.045em de .t-display; só a escala muda:
   dimensionada pela largura útil do container (cqw), não pelo viewport, para
   respeitar o max-width de 1700px sem estourar. */
/* A headline da primeira dobra do DS usa drop-shadow de profundidade, não o
   halo branco de .text-glow — este último é calibrado para títulos de 48–72px
   e vira neon numa escala display. O glow espectral entra seletivamente em uma
   palavra via .text-glow-neon, como o DS faz em "Luz refratada". */
.hero__headline {
  filter: drop-shadow(0 25px 25px rgba(0, 0, 0, .35));
  text-align: center;
  white-space: nowrap;
  font-size: clamp(2.75rem, 17vw, 19rem);      /* fallback sem container query */
  font-size: clamp(2.75rem, 18.5cqw, 19rem);
}

/* .split-line é block no DS; aqui as duas palavras dividem a mesma linha.
   O padding compensa as descendentes que o overflow: hidden cortaria — e
   também abre espaço pro halo de .text-glow-neon (text-shadow com blur fixo
   em px, 24/60px, que NÃO escala com a fonte). Em telas grandes esse halo é
   pequeno perto da letra e o corte do overflow:hidden praticamente não se
   nota; em mobile a letra encolhe mas o blur continua os mesmos 60px, então
   o corte vira uma borda reta e artificial em vez do brilho esvaindo aos
   poucos. 80px de padding (fixo, não em em — a folga tem que crescer junto
   com o blur, não com a fonte) dá espaço pro halo cair a zero antes da borda
   de recorte. margin negativa cancela o padding do fluxo, então as duas
   palavras continuam com o mesmo espaçamento entre si e a mesma base via
   vertical-align: bottom (aplicado às duas para manter o alinhamento). */
.hero__headline .split-line {
  display: inline-block;
  vertical-align: bottom;
  padding: 80px 80px calc(.24em + 80px);
  margin: -80px -80px calc(-.24em - 80px);
}

/* --- Rodapé da hero: copy + CTA ------------------------------------------- */
.hero__footer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: clamp(1.5rem, 4vw, 3rem);
  padding-top: clamp(1.25rem, 3vh, 2rem);
  border-top: 1px solid rgba(255, 255, 255, .05);
}

/* .t-body-lg + a barra lateral do parágrafo de abertura do Design System. */
.hero__copy {
  max-width: 38ch;
  padding-left: 1.5rem;
  border-left: 1px solid rgba(255, 255, 255, .1);
  color: rgba(255, 255, 255, .6);
  text-wrap: pretty;
}

.hero__actions {
  display: grid;
  justify-items: end;
  gap: 1rem;
}

.hero__status {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  color: var(--ds-emerald);          /* .pulse-dot herda de currentColor */
}

/* .btn-neon (glow do espectro do DS) + .btn-ghost (o próprio componente
   "silencioso" do DS, sem glow) lado a lado — cor/gradiente/animação de
   nenhum dos dois é tocado aqui. */
.hero__cta-group {
  display: flex;
  align-items: center;
  gap: .75rem;
}
.hero__status-text { color: rgba(52, 211, 153, .8); }

/* -----------------------------------------------------------------------------
   Responsivo
   -------------------------------------------------------------------------- */
@media (min-width: 900px) {
  .hero__guides-grid { grid-template-columns: repeat(4, 1fr); }
}

@media (max-width: 899px) {
  .nav-toggle { display: inline-flex; }

  .nav {
    position: fixed;
    inset: 0;
    z-index: 50;
    display: grid;
    place-items: center;
    padding: var(--app-gutter);
    background: rgba(2, 2, 5, .88);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    opacity: 0;
    visibility: hidden;
    /* Ao abrir, `visibility` vira `visible` imediatamente para que os links
       sejam focáveis já no primeiro frame; ao fechar, espera o fade terminar
       — o atraso (.5s) cobre o tempo que .nav__list e os links (abaixo)
       levam para terminar a própria saída, senão ficariam invisíveis
       (visibility: hidden) antes de completar a animação. */
    transition:
      opacity    .4s var(--ds-ease),
      visibility 0s var(--ds-ease) .5s;
  }
  .nav.is-open {
    opacity: 1;
    visibility: visible;
    transition:
      opacity    .4s var(--ds-ease),
      visibility 0s var(--ds-ease) 0s;
  }

  /* O overlay (.nav, o "scrim") é a ÚNICA camada que faz fade de opacidade.
     .nav__list e cada <li> entram só por transform (spring + translateY) —
     de propósito, sem opacity própria. opacity de pai e filho NÃO se somam,
     multiplicam na composição: com as três camadas (.nav, .nav__list, <li>)
     animando 0→1 ao mesmo tempo, o resultado efetivo era nav.op × list.op ×
     li.op — aos 67ms cada camada isolada já mostrava ~20%, mas o produto das
     três dava ~0.9% (quase invisível). O conteúdo ficava apagado por boa
     parte da transição e "estourava" visível de repente perto do fim: o
     flick. transform não tem esse problema de composição — por isso a
     entrada em cascata do painel e dos links agora é só movimento, e a
     fade de visibilidade fica inteira a cargo do .nav. */
  .nav__list {
    flex-direction: column;
    gap: .5rem;
    width: min(100%, 26rem);
    padding: 1rem;
    border-radius: var(--ds-r-lg);
    animation: none;             /* ver nota sobre .rise mais abaixo */
    transform: translateY(22px) scale(.95);
    transition: transform .5s var(--ds-ease-spring);
  }
  .nav.is-open .nav__list {
    transform: none;
  }

  /* .nav__list também carrega a classe `.rise` (usada no desktop para a
     entrada da pill list junto com o resto da hero no load). `.rise` é uma
     `animation` com `fill-mode: both`, que trava `transform` no valor final
     (none) pra sempre depois de terminar — travamento que tem precedência
     sobre o `transform` estático acima. No mobile o .rise roda escondido
     (.nav fica visibility:hidden durante o load inteiro) e só sobra esse
     travamento como resíduo, impedindo a transição de abrir. `animation:
     none` devolve o controle do transform pra regra acima. */

  /* Cada link entra com um pequeno atraso em cascata sobre o movimento do
     painel — o mesmo princípio de .rise com --d escalonado que já abre a
     hero, só que disparado por .is-open em vez de uma única vez no load. */
  .nav__list > li {
    width: 100%;
    transform: translateY(12px);
    transition: transform .32s var(--ds-ease);
  }
  .nav.is-open .nav__list > li {
    transform: none;
  }
  .nav__list > li:nth-child(1) { transition-delay: 0s; }
  .nav__list > li:nth-child(2) { transition-delay: .06s; }
  .nav__list > li:nth-child(3) { transition-delay: .12s; }
  .nav__list > li:nth-child(4) { transition-delay: .18s; }
  .nav__list > li:nth-child(5) { transition-delay: .24s; }
  .nav__list > li:nth-child(6) { transition-delay: .30s; }

  .nav__list .nav-pill {
    padding: 1rem 1.5rem;
    border-radius: var(--ds-r-md);
    font-size: 1.0625rem;
    text-align: center;
  }
}

@media (max-width: 767px) {
  .hero__footer {
    grid-template-columns: 1fr;
    align-items: start;
    gap: 1.75rem;
  }
  .hero__actions { justify-items: stretch; justify-self: stretch; }
  /* Só o CTA primário ocupa a largura toda. O secundário fica do tamanho do
     próprio texto (align-items: center o mantém centrado na coluna) — em
     largura cheia ele virava uma caixa larga e vazia em volta de um rótulo
     pequeno, que é o que pesava na leitura. */
  .hero__cta-group { flex-direction: column; align-items: center; }
  .hero__cta-group .btn-neon { width: 100%; }
  .hero__copy {
    max-width: none;
    padding-left: 1rem;
    font-size: 1rem;
  }
  .hero__headline { text-shadow: none; }
}

/* -----------------------------------------------------------------------------
   Movimento reduzido
   design-system.css já zera durações e desliga .blob/.aurora/.beam/.scanline.
   Aqui garantimos que nada dependa de animação para ficar visível.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .hero__canvas,
  .rise,
  .rise-blur,
  .split-line > span {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }

  /* O spring do painel mobile e o escalonamento dos links (acima) usam
     transition, não animation — o reset de cima não os cobre. O menu
     continua abrindo/fechando (via opacity + visibility em .nav), só sem o
     movimento de entrada. */
  .nav,
  .nav__list,
  .nav__list > li {
    transition: none !important;
  }

  .nav-toggle[aria-expanded="true"] .nav-toggle__line--top {
    transform: translateY(5px) rotate(45deg);
  }
  .nav-toggle[aria-expanded="true"] .nav-toggle__line--middle {
    opacity: 0;
    transform: scaleX(0);
  }
  .nav-toggle[aria-expanded="true"] .nav-toggle__line--bottom {
    transform: translateY(-5px) rotate(-45deg);
  }
}