/* 00 · topo (S1). Sequência guiada pela rolagem do v9 (abertura, balões que viram
   tarefas, logo no centro distribuindo para a equipe) que termina numa constelação
   viva: profundidade do v7.2, arrastar e pulso de "segure" do v7.3. Sem cursor
   customizado. Seletores com .js na frente só existem para não piscar sem JS. */

/* ---------- repouso (sem JS): texto em sequência, centrado ---------- */
#topo { padding: 0; }
#topo .tp-stage { position: relative; min-height: 100vh; min-height: 100svh; display: grid; place-items: center; padding: calc(var(--nav-h) + 56px) var(--gutter) 72px; text-align: center; }
#topo .tp-cv, #topo .tp-glow, #topo .tp-veil, #topo .tp-halo, #topo .tp-shade, #topo .tp-tip, #topo .tp-hint, #topo .tp-meter, #topo .tp-intro { display: none; }
#topo .tp-lines { display: grid; gap: 56px; width: 100%; max-width: 1040px; }

#topo h1 { font: 400 clamp(2.45rem, 6.6vw, 6rem)/.98 var(--sans); letter-spacing: -.055em; color: var(--ink); margin: 0 0 22px; }
#topo .tp-acc { color: var(--accent); }
/* marca .wm (Syne 800, da base) no h1 gigante: um pouco menor para casar com a Geist ao lado */
/* a marca segue a fonte do h1 (sem Syne) */
#topo .tp-rot { display: inline-block; white-space: nowrap; text-align: left; vertical-align: bottom; transition: width .5s var(--ease-out); }
/* celular: a palavra que troca fica na própria linha, para o h1 não mudar de altura a cada troca */
@media (max-width: 479px) { #topo .tp-rot { display: block; margin-inline: auto; } }
#topo .tp-word { display: inline-block; transition: opacity .3s, transform .3s var(--ease-out), filter .3s; }
#topo .tp-word.out { opacity: 0; transform: translateY(.18em); filter: blur(5px); }
#topo .tp-sub { font-size: clamp(1rem, 1.35vw, 1.19rem); color: var(--ink-2); max-width: 34em; margin: 0 auto 30px; }
#topo .tp-ctas { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
#topo .tp-ctas .btn-ghost { background: color-mix(in srgb, var(--page) 55%, transparent); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }

#topo .tp-big { font: 400 clamp(1.9rem, 4.6vw, 4.3rem)/1.05 var(--sans); letter-spacing: -.045em; color: var(--ink); text-wrap: balance; }
#topo .tp-w { white-space: nowrap; }
#topo .tp-ch { color: color-mix(in srgb, var(--ink) 20%, var(--page)); transition: color .25s; }
#topo .tp-ch.on { color: var(--ink); }
#topo .tp-ch.lead { color: var(--accent); }

/* ---------- sequência guiada pela rolagem (com movimento) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .js #topo { height: 540vh; }
  .js #topo .tp-stage { position: sticky; top: 0; height: 100vh; height: 100svh; min-height: 0; padding: 0; overflow: hidden; display: block; }
  .js #topo .tp-cv { display: block; position: absolute; inset: 0; width: 100%; height: 100%; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; }
  .js #topo .tp-glow { display: block; position: absolute; inset: 0; pointer-events: none; opacity: 0; will-change: opacity;
    background: radial-gradient(circle min(48vw, 58vh) at 50% calc(50% + var(--cy, 0px)), rgba(0, 200, 180, .11), rgba(0, 200, 180, 0)); }
  .js #topo .tp-veil { display: block; position: absolute; inset: 0; pointer-events: none; will-change: opacity;
    background: radial-gradient(ellipse min(58vw, 660px) min(44vh, 430px) at 50% 50%, color-mix(in srgb, var(--page) 74%, transparent), color-mix(in srgb, var(--page) 36%, transparent) 62%, color-mix(in srgb, var(--page) 0%, transparent)); }
  /* desfoque em degradê atrás do texto (h1, subtítulo e botões; depois, a frase visível): três camadas
     de backdrop-filter, cada uma mais forte e mais rente ao texto. Juntas, o desfoque é forte atrás das
     letras e some para fora em ~--m px, sem borda. A máscara de cada camada é a forma do texto alargada e
     esfumada, desenhada pelo JS (tamanho, --m e --o também vêm dele). A opacidade fica nas camadas, nunca
     no .tp-halo: opacidade < 1 no pai vira "backdrop root" e as camadas deixariam de ver os balões. */
  .js #topo .tp-halo { --m: 56px; --o: 0; display: block; position: absolute; left: 50%; top: 50%; width: 0; height: 0; transform: translate(-50%, -50%); pointer-events: none; }
  .js #topo .tp-halo i { position: absolute; inset: 0; opacity: var(--o);
    -webkit-backdrop-filter: blur(2.5px); backdrop-filter: blur(2.5px); /* sem tinta: no fundo liso não aparece, só desfoca o que passa */
    -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }
  .js #topo .tp-halo i:nth-child(2) { -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
  .js #topo .tp-halo i:nth-child(3) { -webkit-backdrop-filter: blur(11px); backdrop-filter: blur(11px); }
  .js #topo .tp-shade { display: block; position: absolute; left: 0; right: 0; top: 0; height: 240px; pointer-events: none; opacity: 0; will-change: opacity;
    background: linear-gradient(to bottom, color-mix(in srgb, var(--page) 92%, transparent) 0, color-mix(in srgb, var(--page) 70%, transparent) 62%, color-mix(in srgb, var(--page) 0%, transparent)); }
  .js #topo .tp-lines { position: absolute; inset: 0; display: block; max-width: none; pointer-events: none; }
  .js #topo .tp-line { position: absolute; left: 50%; top: 50%; width: min(1040px, calc(100% - 2 * var(--gutter))); transform: translate(-50%, -50%); transform-origin: 50% 50%; opacity: 0; visibility: hidden; }
  .js #topo .tp-line.s0 { opacity: 1; visibility: visible; pointer-events: auto; }

  .js #topo .tp-tip { display: block; position: absolute; left: 50%; bottom: max(24px, env(safe-area-inset-bottom, 0px)); width: max-content; max-width: calc(100% - 2 * var(--gutter)); margin: 0; transform: translate(-50%, 8px);
    font: 400 .8rem/1.45 var(--mono); letter-spacing: .02em; color: var(--ink-2); text-align: center; opacity: 0; pointer-events: none; transition: opacity .6s var(--ease-out), transform .6s var(--ease-out); }
  .js #topo .tp-tip.on { opacity: 1; transform: translate(-50%, 0); }
  .js #topo .tp-hint { display: block; position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%); font: 500 11px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-2); pointer-events: none; }
  .js #topo .tp-meter { display: flex; position: absolute; right: var(--gutter); bottom: 26px; gap: 10px; align-items: center; font: 500 11px/1 var(--mono); letter-spacing: .16em; color: var(--ink-2); pointer-events: none; }
  #topo .tp-meter i { display: block; width: 90px; height: 1px; background: var(--line); position: relative; overflow: hidden; }
  #topo .tp-meter i::after { content: ""; position: absolute; inset: 0; background: var(--teal); transform: scaleX(var(--p, 0)); transform-origin: left; }

  /* abertura do v9: linha que vira janela chanfrada e depois tela cheia (só CSS, não depende do JS) */
  .js #topo .tp-intro { display: block; position: fixed; inset: 0; z-index: 150; background: #f1f1ef; pointer-events: none; animation: topo-out .4s ease 2.25s forwards; }
  .js #topo .tp-intro-line { position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: #0b0d10; transform: scaleX(0); transform-origin: left; animation: topo-line .7s var(--ease-io) .05s forwards; }
  .js #topo .tp-intro-win { position: absolute; left: 0; right: 0; top: 50%; height: 0; transform: translateY(-50%); background: #07101a;
    clip-path: polygon(3% 0, 97% 0, 100% 30%, 100% 70%, 97% 100%, 3% 100%, 0 70%, 0 30%);
    animation: topo-open .6s var(--ease-out) .75s forwards, topo-full .8s var(--ease-io) 1.45s forwards; }
}
/* abriu com âncora para outra seção (#contato etc.): sem abertura, nem antes do JS */
.js:has(:target:not(#topo)) #topo .tp-intro { display: none; }
@media (prefers-reduced-motion: no-preference) and (max-width: 700px) {
  .js #topo { height: 460vh; }
  .js #topo .tp-meter { display: none; }
}
@keyframes topo-line { to { transform: scaleX(1); } }
@keyframes topo-open { to { height: 30vh; } }
@keyframes topo-full {
  from { height: 30vh; clip-path: polygon(3% 0, 97% 0, 100% 30%, 100% 70%, 97% 100%, 3% 100%, 0 70%, 0 30%); }
  to { height: 100vh; clip-path: polygon(0 0, 100% 0, 100% 0, 100% 100%, 100% 100%, 0 100%, 0 100%, 0 0); }
}
@keyframes topo-out { to { opacity: 0; visibility: hidden; } }

/* ---------- movimento reduzido: tudo legível e parado; a constelação vira figura ---------- */
@media (prefers-reduced-motion: reduce) {
  .js #topo .tp-stage { display: flex; flex-direction: column; align-items: center; }
  .js #topo .tp-lines { order: 1; }
  .js #topo .tp-cv { display: block; order: 2; width: 100%; height: min(66svh, 560px); margin-top: 32px; background: #07101a; border-radius: var(--r); }
}