/* Backlab Growth Intro — sequência tipográfica entre o Hero e a futura Growth Journey.
   Sem JS ou com reduced motion a seção é um fluxo estático; o estado composto (pin + scrub)
   só existe quando o JS marca data-bl-growth-intro-enhanced. Nada começa oculto no CSS. */
.bl-growth-intro {
  --bl-gi-ink: var(--bl-text-primary, #f5f8f7);
  --bl-gi-muted: var(--bl-text-secondary, #a8b4b1);
  --bl-gi-brand: var(--bl-color-brand, #3dbfb0);
  --bl-gi-trajectory-x: 50%;
  --bl-gi-trajectory-stroke: rgba(61, 191, 176, .55);
  position: relative;
  z-index: 0;
  color: var(--bl-gi-ink);
  background: var(--bl-bg-deep, #050707);
  isolation: isolate;
}

.bl-growth-intro,
.bl-growth-intro *,
.bl-growth-intro *::before,
.bl-growth-intro *::after {
  box-sizing: border-box;
}

.bl-growth-intro__stage {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-block: clamp(6rem, 16svh, 11rem) 0;
  overflow: hidden;
}

.bl-growth-intro__sequence {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(2.5rem, 7svh, 4.5rem);
  text-align: center;
}

.bl-growth-intro__statement {
  margin: 0;
  color: var(--bl-gi-ink);
  font: 600 clamp(2.4rem, 1.2rem + 4.6vw, 5.6rem)/1.02 var(--bl-font-display, system-ui, sans-serif);
  letter-spacing: -.05em;
  text-wrap: balance;
  max-inline-size: 16ch;
  overflow-wrap: anywhere;
}

.bl-growth-intro__statement--two {
  max-inline-size: none;
  font-size: clamp(2.7rem, 1.3rem + 5.3vw, 6.4rem);
  letter-spacing: -.055em;
}

/* Padding mantém descendentes (ç, p) dentro do recorte; a margem negativa devolve o ritmo. */
.bl-growth-intro__mask {
  display: block;
  overflow: hidden;
  padding-block: .16em;
  margin-block: -.12em;
  transform-origin: 50% 100%;
}

.bl-growth-intro__line {
  display: block;
  will-change: transform, opacity;
}

.bl-growth-intro__group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(1.25rem, 3.4svh, 2rem);
}

.bl-growth-intro__support {
  margin: 0;
  max-inline-size: 34ch;
  color: var(--bl-gi-muted);
  font: 400 clamp(1.05rem, .95rem + .45vw, 1.4rem)/1.5 var(--bl-font-ui, system-ui, sans-serif);
  text-wrap: balance;
}

.bl-growth-intro__bridge {
  margin: 0;
  max-inline-size: 30ch;
  color: var(--bl-gi-ink);
  font: 500 clamp(1.15rem, 1rem + .7vw, 1.75rem)/1.35 var(--bl-font-ui, system-ui, sans-serif);
  letter-spacing: -.01em;
  text-wrap: balance;
}

/* Trajetória: ponto de origem, linha, marca de coordenada e ponto de continuidade.
   A futura Growth Journey continua a linha a partir de [data-bl-trajectory-end], no eixo
   --bl-gi-trajectory-x, com o mesmo traço. */
.bl-growth-intro__trajectory {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  inline-size: 3rem;
  margin-block-start: clamp(2rem, 5svh, 3rem);
  pointer-events: none;
}

.bl-growth-intro__origin {
  display: block;
  inline-size: 3rem;
  block-size: 3rem;
  color: var(--bl-gi-brand);
  overflow: visible;
}

.bl-growth-intro__crosshair {
  fill: none;
  stroke: rgba(245, 248, 247, .22);
  stroke-width: 1;
  stroke-dasharray: 1 3;
  vector-effect: non-scaling-stroke;
}

.bl-growth-intro__ring {
  fill: none;
  stroke: currentColor;
  stroke-width: 1;
  opacity: .38;
  vector-effect: non-scaling-stroke;
}

.bl-growth-intro__node {
  fill: currentColor;
  filter: drop-shadow(0 0 6px rgba(61, 191, 176, .55));
}

.bl-growth-intro__path {
  display: block;
  inline-size: 1px;
  block-size: clamp(7rem, 18svh, 12rem);
  margin-block-start: -1.5rem;
  background: linear-gradient(180deg, var(--bl-gi-brand), var(--bl-gi-trajectory-stroke));
  transform-origin: 50% 0;
  will-change: transform;
}

.bl-growth-intro__tick {
  position: absolute;
  inset-block-start: calc(1.5rem + 56% - .84rem);
  inset-inline-start: 50%;
  inline-size: .75rem;
  block-size: 1px;
  background: rgba(245, 248, 247, .3);
  transform: translateX(-50%);
}

.bl-growth-intro__terminal {
  position: absolute;
  inset-block-end: .75rem;
  inset-inline-start: 50%;
  inline-size: 5px;
  block-size: 5px;
  border-radius: 50%;
  background: var(--bl-gi-brand);
  box-shadow: 0 0 8px rgba(61, 191, 176, .55);
  transform: translateX(-50%);
}

/* ---- Estado composto (JS + motion) --------------------------------------------------- */
/* Fase 04.1: a seção avança sobre a pista de saída do Hero (--bl-gi-overlap, definida pelo JS
   = altura do Hero − altura do palco) e o topo é um degradê, para a primeira frase nascer
   enquanto o Hero termina de sair, sem faixa preta. Sem Hero antes, o overlap é zero. */
.bl-growth-intro[data-bl-growth-intro-enhanced] {
  min-block-size: 200svh;
  margin-block-start: calc(-1 * var(--bl-gi-overlap, 0px));
  background: linear-gradient(180deg, rgba(5, 7, 7, 0), var(--bl-bg-deep, #050707) var(--bl-gi-overlap, 0px));
}

.bl-growth-intro[data-bl-growth-intro-enhanced] .bl-growth-intro__stage {
  position: sticky;
  inset-block-start: 0;
  display: grid;
  place-items: center;
  min-block-size: 100svh;
  padding-block: 0;
}

.bl-growth-intro[data-bl-growth-intro-enhanced] .bl-growth-intro__sequence {
  display: grid;
  place-items: center;
  gap: 0;
  grid-area: 1 / 1;
  padding-block: var(--bl-header-compact-height, 4.5rem);
}

.bl-growth-intro[data-bl-growth-intro-enhanced] .bl-growth-intro__sequence > * {
  grid-area: 1 / 1;
}

/* A primeira frase fica um pouco acima do centro (a segunda ocupa o centro) e assim entra na
   viewport mais cedo; a margem desloca o centro sem transform (GSAP anima transform). */
.bl-growth-intro[data-bl-growth-intro-enhanced] .bl-growth-intro__statement--one {
  margin-block-end: 20svh;
}

/* A ponte fica acima da origem: padding empurra o texto para cima do centro. */
.bl-growth-intro[data-bl-growth-intro-enhanced] .bl-growth-intro__bridge {
  padding-block-end: clamp(7rem, 18svh, 10rem);
}

.bl-growth-intro[data-bl-growth-intro-enhanced] .bl-growth-intro__trajectory {
  position: absolute;
  inset-block: 50% 0;
  inset-inline-start: var(--bl-gi-trajectory-x);
  margin: 0;
  transform: translateX(-50%);
}

.bl-growth-intro[data-bl-growth-intro-enhanced] .bl-growth-intro__origin {
  transform-origin: 50% 50%;
  will-change: transform, opacity;
}

.bl-growth-intro[data-bl-growth-intro-enhanced] .bl-growth-intro__path {
  position: absolute;
  inset-block: 1.5rem 0;
  inset-inline-start: 50%;
  block-size: auto;
  margin: 0;
  transform: translateX(-50%);
}

.bl-growth-intro[data-bl-growth-intro-enhanced] .bl-growth-intro__tick {
  inset-block-start: calc(1.5rem + (100% - 1.5rem) * .56);
}

@media (max-width: 1023px) {
  .bl-growth-intro__statement { max-inline-size: 14ch; }
}

@media (max-width: 767px) {
  /* Duas linhas por frase a partir de 320px; medido com a stack de sistema (canvas). */
  .bl-growth-intro__statement {
    max-inline-size: none;
    font-size: clamp(2.1rem, 10.8vw, 3.1rem);
    line-height: 1.04;
    letter-spacing: -.045em;
  }

  .bl-growth-intro__statement--two {
    font-size: clamp(2.5rem, 12.6vw, 3.7rem);
  }

  .bl-growth-intro__support {
    max-inline-size: 28ch;
    font-size: 1.02rem;
  }

  .bl-growth-intro__bridge {
    max-inline-size: 24ch;
    font-size: 1.15rem;
  }

  /* A trajetória é uma transição conectora viva para a Growth Journey.
     Aumentamos a presença física e luminosa do laser no mobile (linha 2px, brilho turquesa)
     sem cair em efeito neon, mantendo o rigor e a precisão da Backlab. */
  .bl-growth-intro__trajectory {
    margin-block-start: clamp(1.5rem, 4svh, 2.25rem);
  }

  .bl-growth-intro__path {
    inline-size: 2px;
    block-size: clamp(6rem, 16svh, 9rem);
    background: linear-gradient(180deg, var(--bl-gi-brand), rgba(61, 191, 176, 0.45));
    box-shadow: 0 0 8px rgba(61, 191, 176, 0.4);
  }

  .bl-growth-intro__origin {
    inline-size: 3.25rem;
    block-size: 3.25rem;
  }

  .bl-growth-intro__node {
    filter: drop-shadow(0 0 8px rgba(61, 191, 176, 0.8));
  }

  .bl-growth-intro__terminal {
    inline-size: 7px;
    block-size: 7px;
    box-shadow: 0 0 10px rgba(61, 191, 176, 0.8);
  }

  .bl-growth-intro[data-bl-growth-intro-enhanced] {
    min-block-size: 200svh;
  }

  .bl-growth-intro[data-bl-growth-intro-enhanced] .bl-growth-intro__sequence {
    padding-block: var(--bl-header-mobile-height, 4.5rem);
  }

  .bl-growth-intro[data-bl-growth-intro-enhanced] .bl-growth-intro__statement--one {
    margin-block-end: 0;
  }

  .bl-growth-intro[data-bl-growth-intro-enhanced] .bl-growth-intro__bridge {
    padding-block-end: clamp(4rem, 12svh, 6rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  .bl-growth-intro *,
  .bl-growth-intro *::before,
  .bl-growth-intro *::after {
    animation: none;
    transition-duration: 0ms;
  }
}

@media (forced-colors: active) {
  .bl-growth-intro__path,
  .bl-growth-intro__tick,
  .bl-growth-intro__terminal { background: CanvasText; }
  .bl-growth-intro__node { fill: CanvasText; filter: none; }
}