/* =========================================================
   HERO SCROLL - a obra sobe conforme a rolagem.
   O currentTime do video e movido exclusivamente pelo scroll.

   A pista de rolagem e o pin so existem quando o js/hero.js
   adiciona .hero-motion no <html>, depois de validar GSAP,
   ScrollTrigger, a metadata do video e o prefers-reduced-motion.
   Sem JS, a secao e uma dobra normal de uma tela.
   ========================================================= */

/* ---- reset do smooth nativo -----------------------------
   O <html> carrega a utility .scroll-smooth do Tailwind.
   O Lenis escreve documentElement.scrollTop a cada frame e,
   com scroll-behavior: smooth, cada escrita viraria uma
   animacao nativa que a seguinte cancela. Especificidade
   (0,1,1) vence a utility (0,1,0) sem depender da ordem em
   que o Play CDN injeta o <style>.
   O lenis.css oficial nao foi baixado, entao o minimo dele
   vai aqui.                                                */
html.scroll-smooth {
  scroll-behavior: auto;
}

html.lenis,
html.lenis body {
  height: auto;
}

html.lenis.lenis-stopped {
  overflow: hidden;
}

html.lenis.lenis-smooth [data-lenis-prevent] {
  overscroll-behavior: contain;
}

/* ---- anula o layout que styles.css impoe a section ------
   .apple-home #ecossistema traz min-height: 100svh,
   display: flex e align-items: center (styles.css:106).
   overflow: visible importa: um ancestral com overflow
   nao-visivel quebraria o position: sticky.                */
.apple-home #ecossistema.hero-scroll {
  display: block;
  align-items: normal;
  min-height: 0;
  padding: 0;
  overflow: visible;
  background: #ffffff;
}

.hero-scroll {
  position: relative;
  background: #ffffff;
}

/* a pista de rolagem so existe no modo animado */
.hero-motion .hero-scroll {
  height: calc(100svh + 250vh);
}

/* ---- palco ---------------------------------------------
   O estado default e o estatico. padding-top abre espaco
   para o nav fixed de 64px (80px a partir de md).          */
.hero-sticky {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 100vh;
  min-height: 100svh;
  padding-top: 4rem;
  padding-bottom: 2.5rem;
  overflow: hidden;
  background: #ffffff;
}

.hero-motion .hero-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  min-height: 0;
}

@media (min-width: 768px) {
  .hero-sticky {
    padding-top: 5rem;
  }
}





/* ---- grade: texto a esquerda, grafico a direita ----------
   O grafico e uma peca de informacao: precisa de area propria,
   nunca texto por cima.                                     */
.hero-content {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  gap: clamp(1.25rem, 3vw, 3rem);
  width: 100%;
  max-width: 1440px;
  margin-inline: auto;
  padding-inline: var(--page-gutter);
}

.hero-copy {
  min-width: 0;
}

/* no mobile o grafico fica em cima e o texto embaixo */
.hero-media {
  order: -1;
  min-width: 0;
  width: 100%;
  max-width: min(100%, 74svh);
  margin: 0 auto;
}

@media (min-width: 1024px) {
  .hero-content {
    grid-template-columns: minmax(0, 0.84fr) minmax(0, 1.16fr);
  }

  .hero-media {
    order: 0;
    max-width: none;
  }
}

/* ---- o grafico de fluxo de caixa ------------------------- */
.hero-chart {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.hero-chart__grid {
  stroke: rgba(2, 36, 72, 0.07);
  stroke-width: 1;
}

.hero-chart__axis {
  stroke: rgba(2, 36, 72, 0.2);
  stroke-width: 1.5;
}

/* as barras crescem a partir do eixo: so transform, sem reflow.
   O estado inicial escondido so existe quando o JS assume
   (.cash-motion), entao sem JS o grafico aparece completo. */
.hero-chart__in,
.hero-chart__out {
  transform-box: fill-box;
}

.cash-motion .hero-chart__in,
.cash-motion .hero-chart__out {
  transform: scaleY(0);
}

.hero-chart__in {
  fill: #1960a3;
  transform-origin: center bottom;
}

.hero-chart__out {
  fill: #c9d3e0;
  transform-origin: center top;
}

.hero-chart__line {
  fill: none;
  stroke: #022448;
  stroke-width: 3.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.hero-chart__dot {
  fill: #febb2f;
  stroke: #ffffff;
  stroke-width: 3;
}

.cash-motion .hero-chart__dot {
  opacity: 0;
}

.hero-chart__months text {
  fill: #646b7a;
  font-family: "Inter", system-ui, sans-serif;
  font-size: 15px;
}

.cash-motion .hero-chart__months text {
  opacity: 0;
}

/* O SVG escala junto com a coluna: em telas estreitas as unidades
   do viewBox encolhem, entao traco e texto precisam ser maiores
   para continuarem legiveis. */
@media (max-width: 1023px) {
  .hero-chart__line {
    stroke-width: 6;
  }

  .hero-chart__dot {
    r: 11;
    stroke-width: 5;
  }

  .hero-chart__months text {
    font-size: 26px;
  }

  .hero-chart__axis {
    stroke-width: 2.5;
  }
}

/* ---- leitura do saldo ------------------------------------ */
.hero-media {
  position: relative;
}

.hero-chart__readout {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  padding: 0.6rem 0.9rem;
  border: 1px solid rgba(2, 36, 72, 0.1);
  border-radius: 0.6rem;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 8px 24px rgba(2, 36, 72, 0.08);
  pointer-events: none;
}

.hero-chart__readout-label {
  font-family: "Inter", system-ui, sans-serif;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #646b7a;
}

.hero-chart__readout-value {
  font-family: "Plus Jakarta Sans", system-ui, sans-serif;
  font-size: clamp(1.05rem, 1.9vw, 1.5rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #022448;
  font-variant-numeric: tabular-nums;
}

.hero-chart__legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 1.1rem;
  margin: 0.4rem 0 0;
  padding: 0;
  list-style: none;
  font-family: "Inter", system-ui, sans-serif;
  font-size: 0.68rem;
  font-weight: 600;
  color: #646b7a;
}

.hero-chart__legend li {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.hero-chart__legend li::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 2px;
}

.hero-chart__legend .is-in::before { background: #1960a3; }
.hero-chart__legend .is-out::before { background: #c9d3e0; }
.hero-chart__legend .is-line::before {
  width: 14px;
  height: 3px;
  border-radius: 999px;
  background: #022448;
}


/* ---- texto ---------------------------------------------
   Nenhum destes elementos carrega utility do Tailwind:
   classes simples empatam em (0,1,0) com as utilities e o
   <style> do Play CDN entra depois deste arquivo.
   O ponto do badge e desenhado em CSS para nao depender da
   fonte Material Symbols, que renderiza o nome do glifo
   como texto literal enquanto nao carrega.                 */
.hero-kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0;
  padding: 0.4rem 0.85rem 0.4rem 0.7rem;
  border: 1px solid rgba(2, 36, 72, 0.1);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.78);
  box-shadow: 0 1px 2px rgba(2, 36, 72, 0.05);
  color: #1960a3;
  font-family: "Inter", system-ui, sans-serif;
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.hero-kicker::before {
  content: "";
  flex: 0 0 auto;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: #febb2f;
}

.hero-title {
  margin: 1rem 0 0;
  font-family: "Plus Jakarta Sans", system-ui, sans-serif;
  font-size: clamp(1.65rem, 4.6vw, 4rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.06;
  color: #022448;
}

.hero-lead {
  margin: 0.9rem 0 0;
  max-width: 32rem;
  font-family: "DM Sans", "Inter", system-ui, sans-serif;
  font-size: clamp(0.86rem, 1.05vw, 1.1rem);
  line-height: 1.6;
  color: #43474e;
}

.hero-lead strong {
  font-weight: 700;
  color: #022448;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  margin-top: 1.4rem;
}

/* ---- trilha dos modulos do ecossistema ------------------ */
.hero-stages {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  /* 9 modulos: gap justo para caberem em poucas linhas */
  gap: 0.35rem 0.55rem;
  margin: 1.6rem 0 0;
  padding: 0;
  list-style: none;
}

.hero-stage {
  display: flex;
  align-items: center;
  gap: 0.32rem;
  font-family: "Inter", system-ui, sans-serif;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  /* #9aa2b1 dava 2.57 de contraste sobre branco, abaixo do minimo
     4.5 do WCAG AA. #646b7a da 5.35. */
  color: #646b7a;
  transition: color 300ms cubic-bezier(0.16, 1, 0.3, 1);
}

.hero-stage::before {
  content: "";
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: #d4daea;
  transition:
    background 300ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 300ms cubic-bezier(0.16, 1, 0.3, 1);
}

.hero-stage.is-done {
  color: #1960a3;
}

.hero-stage.is-done::before {
  background: #1960a3;
}

.hero-stage.is-active {
  color: #022448;
}

.hero-stage.is-active::before {
  background: #febb2f;
  transform: scale(1.5);
}

/* ---- convite para rolar ---------------------------------
   So aparece no modo animado e some assim que a obra comeca. */
.hero-hint {
  display: none;
  position: absolute;
  left: 50%;
  bottom: 1.6rem;
  z-index: 3;
  align-items: center;
  gap: 0.45rem;
  margin: 0;
  transform: translateX(-50%);
  /* #74777f dava 4.48, logo abaixo do minimo 4.5 do WCAG AA */
  color: #646b7a;
  font-family: "Inter", system-ui, sans-serif;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  white-space: nowrap;
  opacity: 1;
  transition: opacity 400ms ease;
  pointer-events: none;
}

.hero-motion .hero-hint {
  display: inline-flex;
}

.hero-hint.is-gone {
  opacity: 0;
}

.hero-hint svg {
  animation: hero-nudge 2s ease-in-out infinite;
}

@keyframes hero-nudge {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(4px);
  }
}

/* ---- barra de progresso da obra -------------------------
   scaleX e nao width: width forcaria reflow a cada frame.  */
.hero-progress {
  display: none;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
  height: 3px;
  background: rgba(2, 36, 72, 0.06);
  overflow: hidden;
}

.hero-motion .hero-progress {
  display: block;
}

.hero-progress__bar {
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, #1960a3, #febb2f);
  transform: scaleX(0);
  transform-origin: 0 50%;
  will-change: transform;
}

/* ---- ate 1023px: grafico em cima, texto embaixo --------- */
@media (max-width: 1023px) {
  .hero-sticky {
    align-items: center;
    padding-bottom: 3rem;
  }

  .hero-copy,
  .hero-lead {
    max-width: none;
  }
}

/* ---- compactacao no mobile ------------------------------
   Tudo precisa caber em 100svh menos o nav e a faixa do
   video. .hero-actions > a tem especificidade (0,1,1) e
   vence a utility .px-8.                                   */
@media (max-width: 639px) {
  .hero-actions {
    gap: 0.55rem;
    margin-top: 1.1rem;
  }

  .hero-actions > a {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0.8rem 1rem;
    font-size: 0.85rem;
  }

  .hero-title {
    margin-top: 0.8rem;
  }

  .hero-lead {
    margin-top: 0.7rem;
    font-size: 0.85rem;
    line-height: 1.5;
  }

  .hero-stages {
    gap: 0.3rem 0.7rem;
    margin-top: 1.1rem;
  }

  .hero-stage {
    font-size: 0.62rem;
    letter-spacing: 0.06em;
  }

  .hero-hint {
    bottom: 1.1rem;
  }
}

/* ---- menos movimento para quem pediu -------------------- */
@media (prefers-reduced-motion: reduce) {
  .hero-progress,
  .hero-hint {
    display: none;
  }

  .hero-hint svg {
    animation: none;
  }

  .hero-stage,
  .hero-stage::before {
    transition: none;
  }
}


/* =========================================================
   O ecossistema em orbita na hero: a recriacao nativa do
   diagrama circular (9 modulos ao redor do nucleo Abite).
   O anel se desenha com o scroll e cada modulo "pluga" na
   orbita. O estado default do CSS e o diagrama completo;
   o estado inicial escondido so existe sob .orb-motion,
   que o js/hero.js adiciona depois de validar tudo.
   ========================================================= */
.hero-media--orbit {
  max-width: 100%;
}

/* o cartao de leitura: no mobile entra no fluxo acima do
   diagrama; no desktop flutua no canto superior esquerdo do
   quadrado (regiao vazia fora do circulo), liberando toda a
   altura da dobra para o diagrama */
@media (max-width: 1023px) {
  .hero-media--orbit .hero-chart__readout {
    position: static;
    display: inline-flex;
    flex-direction: column;
    width: fit-content;
    max-width: 100%;
    margin-bottom: 0.9rem;
  }
}

@media (min-width: 1024px) {
  .hero-media--orbit .hero-chart__readout {
    z-index: 2;
  }
}

.hero-chart__readout-sub {
  font-family: "Inter", system-ui, sans-serif;
  font-size: 0.68rem;
  font-weight: 600;
  color: #646b7a;
}

.hero-chart__readout-count {
  color: #1960a3;
  font-variant-numeric: tabular-nums;
}

/* o SVG e quase quadrado: limita a altura para caber na dobra
   junto com a leitura, sem estourar o palco pinado */
.orb {
  display: block;
  width: 100%;
  height: auto;
  max-height: calc(100svh - 17rem);
  overflow: visible;
}

/* em tela larga o circulo cresce e sobe: o cartao de leitura
   ocupa so o canto esquerdo, entao o SVG recupera essa faixa
   subindo por cima da linha dele (o topo-esquerdo do quadrado
   e vazio) e encosta mais na borda direita */
@media (min-width: 1024px) {
  .hero-media--orbit .orb {
    max-height: calc(100svh - 8.5rem);
  }

  .hero-media--orbit {
    margin-right: calc(var(--page-gutter) * -0.75);
  }
}

/* ---- anel ---- */
.orb__track {
  fill: none;
  stroke: #c9d5e6;
  stroke-width: 2.5;
  stroke-dasharray: 3 9;
  stroke-linecap: round;
}

.orb__arc {
  fill: none;
  stroke: url(#orb-grad);
  stroke-width: 7;
  stroke-linecap: round;
}

.orb__arrow {
  fill: #1960a3;
}

/* ---- nucleo ---- */
.orb__hub {
  filter: drop-shadow(0 10px 28px rgba(2, 36, 72, 0.1));
}

.orb__hub-bg {
  fill: #ffffff;
  stroke: rgba(2, 36, 72, 0.08);
  stroke-width: 1.5;
  transition: stroke 600ms ease;
}

.orb.is-complete .orb__hub-bg {
  stroke: rgba(254, 187, 47, 0.6);
  stroke-width: 2.5;
}

.orb__hub-line {
  fill: #022448;
  font-family: "Plus Jakarta Sans", system-ui, sans-serif;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.02em;
  text-anchor: middle;
}

.orb__hub-line--accent {
  fill: #1960a3;
}

/* ---- modulos ---- */
.orb__node {
  filter: drop-shadow(0 6px 16px rgba(2, 36, 72, 0.12));
  transform-box: fill-box;
  transform-origin: center;
  transition: transform 250ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.orb__node-bg {
  fill: #ffffff;
  stroke: #1960a3;
  stroke-width: 2.5;
}

.orb__icon {
  fill: none;
  stroke: #1960a3;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.orb__badge {
  fill: #febb2f;
  stroke: #ffffff;
  stroke-width: 2;
}

.orb__label {
  fill: #022448;
  font-family: "Inter", system-ui, sans-serif;
  font-size: 17px;
  font-weight: 700;
  text-anchor: middle;
  dominant-baseline: middle;
}

/* rotulos das laterais ancoram para fora do circulo, para o
   texto nunca invadir a bolinha do modulo */
.orb__label--start {
  text-anchor: start;
}

.orb__label--end {
  text-anchor: end;
}

/* ---- pulsos de dados: so aparecem com o anel completo ---- */
.orb__pulse {
  fill: #febb2f;
  stroke: #ffffff;
  stroke-width: 2;
  opacity: 0;
  transition: opacity 600ms ease;
}

.orb__pulses {
  transform-origin: 320px 300px;
}

.orb.is-complete .orb__pulse {
  opacity: 1;
}

.orb.is-complete .orb__pulses {
  animation: orb-spin 7s linear infinite;
}

@keyframes orb-spin {
  to {
    transform: rotate(360deg);
  }
}

/* ---- estado inicial, so quando o JS assume ----
   transform de CSS puro (o GSAP nunca toca nos nodes),
   entao nao ha conflito de transform como no .net.
   Os modulos ficam como fantasmas, nunca invisiveis: quem
   nao rola ainda ve o ecossistema inteiro esbocado. */
.orb-motion .orb__node {
  opacity: 0.25;
  transform: scale(0.86);
  transform-box: fill-box;
  transform-origin: center;
  transition:
    opacity 450ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 450ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.orb-motion .orb__node.is-on {
  opacity: 1;
  transform: scale(1);
}

.orb-motion .orb__badge {
  transform: scale(0);
  transform-box: fill-box;
  transform-origin: center;
  transition: transform 350ms cubic-bezier(0.34, 1.56, 0.64, 1) 120ms;
}

.orb-motion .orb__node.is-on .orb__badge {
  transform: scale(1);
}

.orb-motion .orb__arrow {
  opacity: 0;
  transition: opacity 300ms ease;
}

.orb-motion .orb__arrow.is-on {
  opacity: 1;
}

/* ---- hover: o modulo cresce e o tooltip conta o que ele faz.
   Depois do bloco de motion de proposito: no empate de
   especificidade com .orb-motion .orb__node.is-on, a ordem
   decide e o hover vence ---- */
.orb .orb__node:hover {
  transform: scale(1.08);
}

.orb-tip {
  position: absolute;
  z-index: 3;
  width: max-content;
  max-width: 250px;
  padding: 0.65rem 0.85rem;
  border: 1px solid rgba(2, 36, 72, 0.1);
  border-radius: 0.6rem;
  background: rgba(255, 255, 255, 0.97);
  box-shadow: 0 12px 32px rgba(2, 36, 72, 0.16);
  transform: translate(-50%, -100%);
  opacity: 0;
  visibility: hidden;
  transition: opacity 160ms ease, visibility 160ms ease;
  pointer-events: none;
}

.orb-tip.is-below {
  transform: translate(-50%, 0);
}

.orb-tip.is-visible {
  opacity: 1;
  visibility: visible;
}

.orb-tip strong {
  display: block;
  font-family: "Plus Jakarta Sans", system-ui, sans-serif;
  font-size: 0.9rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: #022448;
}

.orb-tip span {
  display: block;
  margin-top: 0.15rem;
  font-family: "Inter", system-ui, sans-serif;
  font-size: 0.74rem;
  line-height: 1.45;
  color: #646b7a;
}

/* ---- telas estreitas: o viewBox encolhe, os textos crescem
   em unidades para manterem tamanho real ---- */
@media (max-width: 1023px) {
  /* o diagrama e quase quadrado: mais estreito aqui para
     caber na dobra com o texto embaixo */
  .hero-media--orbit {
    max-width: min(100%, 52svh);
  }

  .orb {
    max-height: none;
  }

  .orb__node-bg { stroke-width: 3.5; }
  .orb__icon { stroke-width: 2.2; }
}

@media (min-width: 480px) and (max-width: 767px) {
  .orb__label { font-size: 22px; }
  .orb__hub-line { font-size: 26px; }
}

@media (max-width: 479px) {
  .orb__label { font-size: 24px; }
  .orb__hub-line { font-size: 28px; }
}

@media (max-width: 639px) {
  /* ancora pelo topo: se faltar altura, o corte acontece
     embaixo (no hint decorativo), nunca na leitura sob o nav */
  .hero-sticky {
    align-items: flex-start;
    padding-top: 4.25rem;
  }

  .hero-media--orbit {
    max-width: min(100%, 36svh);
  }

  /* em tela pequena a leitura fica so com nome e contador */
  .hero-chart__readout [data-hero-desc] {
    display: none;
  }

  /* a trilha duplica os rotulos do diagrama: em telas muito
     baixas ela sai para tudo caber nos 100svh do pin */
  .hero-stages {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .orb.is-complete .orb__pulses {
    animation: none;
  }

  .orb__pulse {
    opacity: 0 !important;
  }
}

/* 9 modulos na trilha: em telas largas, aperta para caber em duas linhas */
@media (min-width: 1024px) {
  .hero-stage {
    font-size: 0.64rem;
    letter-spacing: 0.06em;
  }
}
