/* Nexus — cena, texto vivo, gradiente viajante e estados.
   As variáveis --g* são escritas pelo JS a partir do progresso local de cada cena.
   Revelações e ênfases acompanham continuamente o scroll via opacity/transform. */

html { scroll-behavior: smooth; }
body { overflow-x: clip; }

/* ───────── Camadas: ambiente < canvas narrativo < conteúdo < header ───────── */
.nx-ambient {
  position: fixed; inset: -32px; z-index: 0; pointer-events: none;
  background:
    radial-gradient(ellipse at 73% 45%, rgba(32, 214, 231, .065), transparent 43%),
    radial-gradient(ellipse at 89% 67%, rgba(139, 92, 246, .065), transparent 38%),
    radial-gradient(ellipse at 26% 13%, rgba(47, 123, 255, .035), transparent 55%);
}

/* Altura estável (lvh): a barra de endereço do celular não redimensiona nem realoca o canvas durante a rolagem.
   Quadros são preparados num buffer no mobile e apresentados em uma única cópia. */
#narrative-canvas {
  position: fixed; left: 0; top: 0; z-index: 1; width: 100%;
  height: 100vh; height: 100lvh;
  pointer-events: none;
}

main { position: relative; z-index: 2; }

.nx-shell { width: min(calc(100% - 40px), var(--page-max)); margin-inline: auto; }

/* ───────── Cenas ───────── */
.nx-section {
  --scene-p: 0;
  position: relative;
  min-height: 100vh; min-height: 100svh;
  display: grid; align-items: center;
  padding-block: var(--section-y);
}
.nx-section--tall    { min-height: 104vh; min-height: 104svh; }

.nx-scene-content { position: relative; z-index: 3; }

/* Palcos sticky: só quando ajudam a transformar a MESMA composição. */
.nx-live .nx-stage { padding-block: 0; align-items: start; }
.nx-live .nx-stage--hero    { min-height: 135vh; min-height: 135svh; }
.nx-live .nx-stage--contact { min-height: 116vh; min-height: 116svh; }
.nx-live .nx-stage--process { min-height: 240vh; min-height: 240svh; }
.nx-live .nx-stage > .nx-sticky {
  position: sticky; top: 0;
  min-height: 100vh; min-height: 100svh;
  display: grid; align-content: center;
  padding-top: 64px;
}

/* ───────── Tipografia ───────── */
.nx-eyebrow {
  display: flex; align-items: center; gap: 14px;
  margin-bottom: clamp(22px, 3vw, 36px);
  font-size: var(--text-caption); font-weight: 600; line-height: 1.5;
  letter-spacing: .12em; text-transform: uppercase;
  color: color-mix(in srgb, var(--nx-cyan) 78%, white);
}
/* Traço-sinal: também é o que mantém a página intencional com o canvas desligado. */
.nx-eyebrow::before {
  content: ""; flex: none; width: 36px; height: 1px;
  background: var(--nx-gradient-signal); opacity: .85;
  transform-origin: left;
}
.nx-live .nx-eyebrow.nx-r:not(.is-in)::before { transform: scaleX(0); }
.nx-live .nx-eyebrow.nx-r::before { transition: transform 1.1s var(--ease-out) .1s; }

.nx-display, .nx-h2 {
  font-weight: 400; letter-spacing: -.045em;
  color: var(--nx-text);
}
.nx-display { font-size: var(--text-display); line-height: 1.02; }
.nx-h2      { font-size: var(--text-h2);      line-height: 1.06; }

.nx-line { display: block; width: fit-content; max-width: 100%; padding-block: .12em; margin-block: -.12em; }

.nx-lead {
  margin-top: clamp(28px, 3.4vw, 44px);
  font-size: var(--text-lead); font-weight: 400; line-height: 1.15; letter-spacing: -.03em;
  color: var(--nx-text);
}
.nx-statement {
  margin-top: clamp(14px, 1.6vw, 22px);
  font-size: clamp(30px, 4.6vw, 64px); font-weight: 400; line-height: 1.04; letter-spacing: -.04em;
  max-width: 15ch;
}
.nx-body {
  max-width: 560px; margin-top: clamp(22px, 2.6vw, 34px);
  color: var(--nx-muted); font-size: var(--text-body); font-weight: 400; line-height: 1.6;
}
.nx-body + .nx-body { margin-top: 18px; }
.nx-lead + .nx-body { margin-top: 14px; }

/* Scroll reveal: state is controlled by the viewport, no timer or blur veil. */
.nx-w { display: inline-block; }
.nx-live .nx-r { opacity: .16; }
.nx-live .nx-r .nx-w { opacity: 1; filter: none; transform: none; }
.nx-live .nx-eyebrow.nx-r::before { transition: none; }

/* The headline is visible immediately; supporting content settles briefly. */
@keyframes nx-intro-opacity { from { opacity: .7; } to { opacity: 1; } }
.js .nx-intro-item { animation: nx-intro-opacity 420ms var(--ease-out) both; }

/* ───────── Gradiente em duas camadas ─────────
   A base branca permanece legível; a camada cromática é uma FAIXA que nasce, atravessa e sai. */
.nx-gradient-stack {
  position: relative; display: inline-block;
  padding-block: .14em; margin-block: -.14em;
  --gx: 50%; --gb: -30%; --gf: -10%; --ga: 0;
  transition: --gh var(--dur-base) var(--ease-out), --hx var(--dur-base) var(--ease-out);
}
.nx-gradient-base { color: var(--nx-text); }

.nx-gradient-stack[data-preset="pulse"]   { --g-img: var(--nx-g-pulse); }
.nx-gradient-stack[data-preset="capture"] { --g-img: var(--nx-g-capture); }
.nx-gradient-stack[data-preset="link"]    { --g-img: var(--nx-g-link); }
.nx-gradient-stack[data-preset="build"]   { --g-img: var(--nx-g-build); }

/* Hover / toque em texto-chave: o gradiente acende e um sinal sublinha a palavra. */
.nx-gradient-stack::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: .02em; height: 2px; border-radius: 2px;
  background: var(--nx-gradient-signal);
  transform-origin: left; transform: scaleX(var(--gh, 0)); opacity: .9;
  pointer-events: none;
}
.nx-gradient-stack.is-touched { --gh: 1; --hx: 26%; }
@media (hover: hover) and (pointer: fine) {
  .nx-gradient-stack:hover { --gh: 1; --hx: 26%; }
}


/* ───────── CTA ───────── */
.nx-cta {
  --tx: 0px; --ty: 0px; --cta-x: 0%; --cta-glow: 0; --cta-near: 0;
  position: relative;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 16px 24px; margin-top: clamp(28px, 3.4vw, 44px);
  border: 0; border-radius: var(--radius-pill);
  color: var(--nx-void); text-decoration: none;
  font-size: 14px; font-weight: 600; letter-spacing: .025em; line-height: 1.2; white-space: nowrap;
  background: var(--nx-gradient-signal);
  background-size: 190% 100%;
  background-position: var(--cta-x) 50%;
  transform: translate3d(var(--tx), var(--ty), 0);
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, .06),
    0 10px 34px rgba(47, 123, 255, calc(.10 + var(--cta-glow) * .08 + var(--cta-near, 0) * .08));
}
.nx-cta svg { flex: none; transition: transform var(--dur-fast) var(--ease-out); }
.nx-cta:hover, .nx-cta:focus-visible {
  box-shadow: 0 0 0 1px rgba(125, 211, 252, .22), 0 12px 38px rgba(47, 123, 255, .20);
}
.nx-cta:hover svg, .nx-cta:focus-visible svg { transform: translateX(3px); }
.nx-cta:focus-visible { outline: 3px solid rgba(32, 214, 231, .7); outline-offset: 4px; border-radius: var(--radius-pill); }

/* No header o CTA é secundário (contorno): só existe UM CTA preenchido por viewport. */
.nx-cta--ghost {
  margin: 0; padding: 10px 18px; min-height: 44px; justify-content: center; color: var(--nx-text);
  background: transparent; box-shadow: inset 0 0 0 1px rgba(168, 179, 199, .30);
}
.nx-cta--ghost:hover, .nx-cta--ghost:focus-visible {
  background: rgba(32, 214, 231, .07);
  box-shadow: inset 0 0 0 1px rgba(125, 211, 252, .62);
}

/* ───────── Processo: quatro verbos, um palco ───────── */
.nx-word { display: block; width: fit-content; }
.nx-live .nx-word { opacity: .48; }
.nx-word + .nx-word { margin-top: .045em; }

/* Native anchor at the open edge of the hero, connected to the signal line. */
.nx-continue {
  position: absolute; inset: auto 0 26px;
  display: flex; align-items: center; gap: 16px;
  min-height: 44px; width: fit-content;
  color: var(--nx-muted); font-size: 12px; letter-spacing: .04em;
  text-decoration: none;
}
.nx-continue::before {
  content: ''; width: clamp(40px, 7vw, 100px); height: 1px;
  background: linear-gradient(90deg, var(--nx-cyan), rgba(47,123,255,.2));
  transform-origin: left;
  transition: transform var(--dur-base) var(--ease-out);
}
.nx-continue svg { transition: transform var(--dur-fast) var(--ease-out); }
.nx-continue:hover, .nx-continue:focus-visible { color: var(--nx-text); }
.nx-continue:hover svg { transform: translateY(3px); }
.nx-reading-progress {
  position: fixed; inset: 0 0 auto; height: 2px; z-index: 60;
  pointer-events: none; opacity: .65;
}
.nx-reading-progress span {
  display: block; height: 100%; transform: scaleX(0); transform-origin: left;
  background: var(--nx-gradient-signal);
}
html:not(.nx-live) .nx-reading-progress { display: none; }
html:not(.nx-live) .nx-continue { position: relative; inset: auto; margin-top: 32px; }

/* ───────── Responsivo ───────── */
@media (max-width: 899px) {
  /* Telas estreitas: texto no terço superior; a metade inferior pertence ao campo narrativo. */
  .nx-live .nx-stage > .nx-sticky { align-content: start; padding-top: calc(64px + 9vh); padding-top: calc(64px + 9svh); }
}

@media (max-width: 760px) {
  :root {
    --text-display: clamp(34px, 10.4vw, 76px);
    --text-h2: clamp(30px, 9vw, 60px);
    --text-lead: clamp(22px, 6.4vw, 30px);
  }
  .nx-shell { width: min(calc(100% - 32px), var(--page-max)); }
  .nx-section { padding-block: 84px; }
  .nx-live .nx-stage--hero { min-height: 124svh; }
  .nx-live .nx-stage--process { min-height: 215svh; }
  .nx-live .nx-stage--contact { min-height: 112svh; }
  .nx-continue { bottom: 20px; }
  .nx-section--tall { min-height: 104vh; min-height: 104svh; }
  .nx-statement { font-size: clamp(30px, 9vw, 46px); max-width: 12ch; }
  .nx-cta { padding: 15px 20px; }
}

@media (max-width: 380px) {
  .nx-cta { padding: 15px 16px; gap: 8px; font-size: 13px; letter-spacing: .02em; }
}

/* ───────── Reduced motion: tudo estático, legível e funcional ───────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .nx-ambient { background: radial-gradient(1100px circle at 88% 6%, rgba(47, 123, 255, .06), transparent 62%), var(--nx-void); }
  #narrative-canvas { display: none; }

  .nx-section, .nx-section--tall,
  .nx-live .nx-stage--hero, .nx-live .nx-stage--process, .nx-live .nx-stage--contact { min-height: auto; align-items: center; padding-block: 96px; }
  .nx-live .nx-stage > .nx-sticky { position: static; min-height: auto; padding-top: 0; }

  .nx-live .nx-r .nx-w, .nx-w { opacity: 1; filter: none; transform: none; animation: none; }
  .nx-intro-item { animation: none; }
  .nx-r { opacity: 1 !important; transform: none !important; }
  .nx-reading-progress { display: none; }
  .nx-live .nx-word, .nx-word { opacity: 1; filter: none; transform: none; }


}

@media (max-height: 620px) and (min-width: 761px) {
  :root { --text-display: clamp(42px, 6vw, 76px); --text-h2: clamp(36px, 5vw, 64px); }
  .nx-live .nx-stage > .nx-sticky { padding-top: 90px; padding-bottom: 70px; }
  .nx-eyebrow { margin-bottom: 20px; }
  .nx-body { margin-top: 22px; }
}
@media (max-width: 760px) and (max-height: 600px) {
  .nx-live .nx-stage > .nx-sticky { min-height: 620px; padding-top: 110px; }
  .nx-live .nx-stage--hero { min-height: 760px; }
  .nx-live .nx-stage--contact { min-height: 700px; }
}

/* October refinement: content advances in native document flow. */
.nx-section { min-height: auto; padding-block: clamp(72px, 8vw, 120px); }
.nx-hero { min-height: 92svh; padding-top: clamp(128px, 14vh, 170px); padding-bottom: 62px; }
.nx-hero .nx-display { font-size: clamp(42px, 6.9vw, 108px); line-height: 1.01; max-width: 18ch; }
.nx-hero .nx-body { max-width: 39ch; }
.nx-hero .nx-continue, html:not(.nx-live) .nx-hero .nx-continue {
  position: relative; inset: auto; margin-top: 30px; font-size: 14px;
}
.nx-chapter { max-width: 860px; }
.nx-chapter + .nx-chapter { margin-top: clamp(54px, 6vw, 90px); }
.nx-chapter--opening .nx-h2 { font-size: clamp(36px, 5.2vw, 74px); line-height: 1.1; max-width: 19ch; }
.nx-narrative .nx-body { max-width: 47ch; }
.nx-narrative .nx-lead { max-width: 26ch; line-height: 1.22; }
.nx-narrative .nx-statement { max-width: 24ch; margin: 0; font-size: clamp(30px, 4vw, 56px); line-height: 1.13; }
.nx-narrative .nx-r { opacity: 1; }
.nx-gradient-stack { max-width: 100%; }

.nx-flow-track {
  list-style: none; margin: 38px 0 0; padding: 0;
  display: flex; flex-wrap: wrap; column-gap: 24px; row-gap: 24px;
  max-width: 820px;
}
.nx-flow-track li {
  --step-active: 0; position: relative; flex: 1 1 108px;
  font-size: 14px; line-height: 1.4; color: var(--nx-muted);
  border-top: 1px solid rgba(168,179,199,.25); padding-top: 18px;
}
.nx-flow-track li::before {
  content: ''; position: absolute; top: -3px; left: 0; width: 5px; height: 5px;
  border-radius: 50%; background: var(--nx-cyan); opacity: calc(.35 + .65 * var(--step-active));
}
.nx-flow-track li::after {
  content: ''; position: absolute; top: -1px; left: 0; right: 0; height: 1px;
  background: var(--nx-gradient-signal); transform-origin: left; transform: scaleX(var(--step-active));
}
.nx-conclusion { margin: 48px 0 0; max-width: 25ch; font-size: clamp(27px, 3.4vw, 48px); letter-spacing: -.035em; line-height: 1.17; }
.nx-operation-words { display: flex; flex-wrap: wrap; gap: 12px 28px; margin-top: 30px; }
.nx-operation-words .nx-word { display: inline-block; margin: 0; font-size: clamp(18px, 1.8vw, 25px); letter-spacing: -.02em; }
.nx-signature { margin: 32px 0 0; font-weight: 400; font-size: clamp(36px, 5.4vw, 74px); letter-spacing: -.04em; line-height: 1.12; }
.nx-origin { margin-top: 28px; color: var(--nx-muted); font-size: 14px; display: flex; gap: 12px; flex-wrap: wrap; }
.nx-origin span { color: var(--nx-dim); }
.nx-discovery .nx-statement { max-width: 24ch; }
.nx-discovery .nx-statement + .nx-statement { margin-top: 24px; }
.nx-founders { display: flex; flex-wrap: wrap; gap: 28px 64px; margin: 40px 0 0; }
.nx-founders dt { font-size: 22px; letter-spacing: -.025em; margin-bottom: 8px; }
.nx-founders dd { margin: 0; font-size: 16px; line-height: 1.5; color: var(--nx-muted); }
.nx-about-close { max-width: 28ch; margin-top: 40px; color: var(--nx-text); font-size: clamp(22px, 2.6vw, 36px); line-height: 1.25; letter-spacing: -.025em; }
.nx-contact { min-height: 76svh; }
.nx-contact .nx-h2 { font-size: clamp(36px, 4.5vw, 64px); line-height: 1.13; max-width: 23ch; }
.nx-anchor { position: absolute; top: 0; left: 0; scroll-margin-top: 88px; }
.nx-menu { overflow-y: auto; overscroll-behavior: contain; }
.nx-nav a { white-space: nowrap; }
.nx-cta { min-height: 48px; }
.nx-cta--ghost { min-height: 44px; }
@media (max-width: 760px) {
  .nx-section { padding-block: 64px; }
  .nx-hero { min-height: 94svh; padding-top: 118px; padding-bottom: 48px; }
  .nx-hero .nx-display { font-size: clamp(32px, 10vw, 60px); line-height: 1.04; }
  .nx-chapter--opening .nx-h2 { font-size: clamp(32px, 9vw, 52px); max-width: 19ch; }
  .nx-chapter + .nx-chapter { margin-top: 48px; }
  .nx-statement, .nx-narrative .nx-statement { max-width: 100%; font-size: clamp(29px, 8vw, 42px); }
  .nx-narrative .nx-body { max-width: 34ch; }
  .nx-flow-track { gap: 22px 16px; margin-top: 30px; }
  .nx-flow-track li { flex-basis: calc(50% - 16px); }
  .nx-flow-track li:last-child { flex-grow: 0; }
  .nx-conclusion { margin-top: 36px; }
  .nx-operation-words { column-gap: 18px; row-gap: 18px; }
  .nx-operation-words .nx-word { font-size: 18px; flex-basis: calc(50% - 18px); }
  .nx-contact { min-height: 70svh; }
  .nx-contact .nx-h2 { font-size: clamp(30px, 8.5vw, 48px); }
  .nx-founders { column-gap: 30px; }
  .nx-menu a { font-size: 30px; }
}
@media (prefers-reduced-motion: reduce) {
  .nx-section { min-height: auto; padding-block: 72px; }
  .nx-hero { padding-top: 128px; }
  .nx-flow-track li { --step-active: 1 !important; }
  .nx-operation-words .nx-word { opacity: 1 !important; }
}

/* A single glyph layout prevents gradient ghosts on wrapped smartphone text. */
.nx-gradient-stack { --ga: 0; --gb: -30%; --gf: -10%; --gx: 50%; color: var(--nx-text); }
.nx-gradient-base { color: inherit; }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .nx-gradient-stack {
    background-image:
      linear-gradient(90deg,
        var(--nx-text) calc(var(--gb) - 14%),
        rgba(248,250,252,calc(1 - var(--ga))) var(--gb),
        rgba(248,250,252,calc(1 - var(--ga))) var(--gf),
        var(--nx-text) calc(var(--gf) + 14%)),
      var(--g-img, var(--nx-gradient-message));
    background-size: 100% 100%, 150% 100%;
    background-position: 0 0, calc(var(--gx) + var(--hx)) 50%;
    background-repeat: no-repeat;
    -webkit-background-clip: text; background-clip: text;
    color: transparent; -webkit-text-fill-color: transparent;
  }
  .nx-gradient-base { color: inherit; -webkit-text-fill-color: inherit; }
  @media (hover: hover) and (pointer: fine) {
    .nx-gradient-stack:hover { --gb: -20% !important; --gf: 120% !important; --ga: .9 !important; }
  }
  .nx-gradient-stack.is-touched { --gb: -20% !important; --gf: 120% !important; --ga: .9 !important; }
}
:root {
  --nx-page-left: max(20px, env(safe-area-inset-left, 0px));
  --nx-page-right: max(20px, env(safe-area-inset-right, 0px));
}
.nx-shell {
  width: min(calc(100% - var(--nx-page-left) - var(--nx-page-right)),var(--page-max));
  margin-left: max(var(--nx-page-left),calc((100% - var(--page-max)) / 2));
  margin-right: auto;
}
.nx-header { padding-top: env(safe-area-inset-top,0px); min-height: calc(76px + env(safe-area-inset-top,0px)); }
.nx-header-veil { height: calc(108px + env(safe-area-inset-top,0px)); }
.nx-menu { padding-top: calc(96px + env(safe-area-inset-top,0px)); padding-bottom: calc(28px + env(safe-area-inset-bottom,0px)); }
h1,h2,h3,p,.nx-gradient-stack,dt,dd { overflow-wrap: break-word; }
.nx-scene-content,.nx-chapter,.nx-word,.nx-flow-track li { min-width: 0; }
.nx-cta { max-width: 100%; }
.nx-cta:not(.nx-cta--ghost) { white-space: normal; justify-content: center; }
.nx-footer { padding-bottom: calc(36px + env(safe-area-inset-bottom,0px)); }
@media (max-width: 860px) {
  .nx-header { min-height: calc(68px + env(safe-area-inset-top,0px)); }
}
@media (max-width: 760px) {
  :root { --nx-page-left: max(16px,env(safe-area-inset-left,0px)); --nx-page-right: max(16px,env(safe-area-inset-right,0px)); }
  .nx-hero { padding-top: calc(112px + env(safe-area-inset-top,0px)); }
  .nx-hero .nx-display { font-size: clamp(30px,9.4vw,54px); line-height: 1.08; letter-spacing: -.038em; }
  .nx-line { width: auto; }
  .nx-chapter--opening .nx-h2 { font-size: clamp(30px,8.7vw,48px); line-height: 1.13; }
  .nx-signature { font-size: clamp(30px,8.8vw,46px); }
  .nx-contact .nx-h2 { line-height: 1.16; }
  .nx-flow-track { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 24px 18px; }
  .nx-operation-words { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px; }
  .nx-operation-words .nx-word { width: auto; font-size: clamp(16px,4.4vw,18px); }
  .nx-founders { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 28px; }
  .nx-founders > div { min-width: 0; }
  .nx-founders dt { font-size: 21px; }
}
@media (max-width: 340px) {
  .nx-header { gap: 8px; }
  .nx-header-actions { gap: 8px; }
  .nx-logo { font-size: 14px; gap: 8px; letter-spacing: .11em; }
  .nx-cta--ghost { padding-inline: 14px; }
  .nx-founders { grid-template-columns: minmax(0,1fr); }
}
@media (orientation: landscape) and (max-height: 540px) and (pointer: coarse) {
  .nx-nav { display: none; }
  .js .nx-menu-btn { display: inline-flex; }
  .nx-menu { display: flex !important; }
  .nx-hero { min-height: 100svh; padding-top: calc(96px + env(safe-area-inset-top,0px)); padding-bottom: 40px; }
  .nx-hero .nx-display { font-size: clamp(32px,4.9vw,52px); }
  .nx-section:not(.nx-hero) { padding-block: 52px; }
  .nx-menu a { font-size: 24px; padding-block: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .nx-gradient-stack { --ga: .72 !important; --gb: -20% !important; --gf: 120% !important; --gx: 50% !important; }
}