/* ============================================================
   Hero "Linha pela Cidade" — canvas fixo + hero + flow de etapas
   Só a /inscricao carrega este arquivo (porte do group-tools, Fase 11.0).
   Tokens: <style id="hc-tokens"> no head da própria página.
   ============================================================ */

/* ---------- Canvas 3D ---------- */
#hero-city-canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  opacity: 0;
  transition: opacity 0.8s var(--ease-default);
}
#hero-city-canvas.is-ready { opacity: 1; }

/* Fallback sem WebGL: canvas some, fundo vira gradiente da marca. */
body.no-webgl #hero-city-canvas { display: none; }
body.no-webgl {
  background: linear-gradient(180deg, var(--hc-bg) 0%, var(--hc-bg) 55%, var(--color-bg) 100%) fixed;
}

/* ---------- Hero (fixo sobre a cena) ---------- */
.hero {
  position: fixed;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--header-h) var(--gutter) 0;
  pointer-events: none; /* só o conteúdo/CTA recebem cliques */
}
.hero.is-hidden { visibility: hidden; }

/* centralizado, como na referência */
.hero__content {
  pointer-events: auto;
  max-width: 54rem;
  margin-inline: auto;
  text-align: center;
}
.hero__title {
  /* MEDIDO no original: 96px / weight 500 (Roboto) / ls -6% / lh 0.9.
     Aspekta estática não tem 500 → 600 (a mais próxima). */
  font-size: clamp(2.75rem, 8.4vw, 6rem);
  font-weight: 600;
  letter-spacing: -0.06em;
  line-height: 0.9;
  text-wrap: balance;
}
.hero__subtitle {
  margin-top: 1.5rem;
  max-width: 34rem;
  margin-inline: auto;
  font-size: var(--text-md);
  line-height: 1.55;
  opacity: 0.8;
}
.hero__cta { margin-top: 2.25rem; pointer-events: auto; }

/* a saída 3D é scrubbed a cada frame */
.hero__title,
.hero__subtitle,
.hero__cta {
  will-change: transform, opacity;
}

.hero__scroll-btn {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 1.9rem;
  padding: 0.6rem 0.2rem; /* área de toque ≥44px sem mudar o visual */
  pointer-events: auto;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.7px;
  opacity: 0.85;
}
.hero__scroll-btn span {
  position: relative;
  display: inline-block;
  padding-bottom: 0.35em;
}
.hero__scroll-btn span::after {
  content: '';
  position: absolute;
  inset: auto 0 0;
  height: 1px;
  background: currentColor;
  transform-origin: left;
  transition: transform 0.5s var(--ease-default);
}
.hero__scroll-btn:hover span::after {
  animation: hc-underline 0.7s var(--ease-default);
}
@keyframes hc-underline {
  0% { transform: scaleX(1); transform-origin: right; }
  49% { transform: scaleX(0); transform-origin: right; }
  50% { transform: scaleX(0); transform-origin: left; }
  100% { transform: scaleX(1); transform-origin: left; }
}

.hero-spacer { height: 45vh; }

/* ---------- Flow (percurso + painel de etapas) ---------- */
.flow {
  position: relative;
  /* MEDIDO no vivo: 456svh (flow 4038px / viewport 885 ≈ 4.56; coreografia
     total 4.04 viewports). svh = viewport pequeno estável no mobile. */
  height: 456vh;
  height: 456svh;
  pointer-events: none;
}
.flow__wrapper {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  align-items: flex-end;
}

/* Painel PIXEL-MATCH com o original (medições runtime 2026-07-30):
   caixa padding 48px · badge FIXO 48×48 radius 12 font 14 · título 24px com
   truque de scale(.5833) (transição nítida, sem re-rasterizar) · descrição
   18px/1.4 #585765 máx 500px · trilho 2px #05041933 · ease (.16,1,.3,1). */
.flow__steps {
  margin: 0;
  padding: 3rem;
  list-style: none;
  width: min(41.5rem, 100%); /* 48 + 48+20+500 + 48 = 664px medidos */
  pointer-events: auto;
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.6s var(--ease-default), transform 0.6s var(--ease-default);
}
.flow__steps.is-on { opacity: 1; transform: translateY(0); }

.flow__step {
  display: grid;
  grid-template-columns: 3rem 1fr;
  grid-template-rows: auto auto;
  column-gap: 1.25rem;
  align-items: center;
  padding-block: 0.5rem;
  opacity: 0.38;
  transition: opacity 0.5s var(--ease-default);
}
.flow__step.is-active { opacity: 1; }

/* Número: badge 48×48 SEMPRE (original); só o fundo/sombra entram na ativa */
.flow__num {
  justify-self: start;
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border-radius: 12px;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: 0.7px;
  background: transparent;
  box-shadow: none;
  transition: background-color 0.5s var(--ease-default), box-shadow 0.5s var(--ease-default);
}
.flow__step.is-active .flow__num {
  background: var(--color-bg);
  box-shadow: 0 10px 28px rgba(5, 4, 25, 0.1), 0 1px 2px rgba(5, 4, 25, 0.06);
}

/* Título: tamanho ÚNICO 24px; o estado inativo encolhe por transform
   (24 × .5833 ≈ 14px), como o original — a transição fica nítida. */
.flow__title {
  font-size: var(--text-lg);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.3;
  transform: scale(0.5833);
  transform-origin: left center;
  transition: transform 0.5s var(--ease-default);
}
.flow__step.is-active .flow__title { transform: scale(1); }

/* Corpo: colapsa para 0fr fora da etapa ativa (truque grid-template-rows);
   trilho ocupa a coluna do badge (48px), barra de 2px centrada nela. */
.flow__body {
  grid-column: 1 / -1;
  grid-row: 2;
  display: grid;
  grid-template-columns: 3rem 1fr;
  grid-template-rows: 0fr;
  column-gap: 1.25rem;
  opacity: 0;
  transition: grid-template-rows 0.6s var(--ease-default), opacity 0.45s var(--ease-default);
}
.flow__step.is-active .flow__body { grid-template-rows: 1fr; opacity: 1; }
.flow__body > * { min-height: 0; overflow: hidden; }

/* Barra de progresso vertical da etapa ativa (preenchida via --p pelo JS) */
.flow__progress {
  position: relative;
  justify-self: center;
  width: 2px;
  border-radius: 2px;
  background: rgba(5, 4, 25, 0.2); /* #05041933 medido */
}
.flow__progress::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--color-primary);
  transform: scaleY(var(--p, 0));
  transform-origin: top;
}

.flow__description {
  font-size: var(--text-md);
  line-height: 1.4;
  color: #585765;
  opacity: 1;
  max-width: 500px;
  padding: 0.3rem 0 0.55rem;
}

/* Modo accordion (prefers-reduced-motion): etapas clicáveis */
.flow__steps.is-accordion .flow__step { cursor: pointer; }
.flow__steps.is-accordion .flow__step:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 4px;
  border-radius: 6px;
}
.flow__steps.is-accordion .flow__progress::before { transform: scaleY(1); }

/* A seção seguinte precisa preencher a viewport para "cobrir" o canvas. */
.section--manifesto {
  min-height: 100vh;
  display: grid;
  align-items: center;
}

/* ---------- HUD de debug (#debug) ---------- */
.hc-hud {
  position: fixed;
  top: calc(var(--header-h) + 0.5rem);
  right: 1rem;
  z-index: 99;
  padding: 0.7rem 0.9rem;
  border-radius: 0.6rem;
  background: rgba(252, 252, 252, 0.88);
  box-shadow: 0 8px 30px rgba(5, 4, 25, 0.14);
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.7;
  white-space: pre;
}
.hc-hud input[type='range'] { width: 100%; margin-top: 0.3rem; }

/* ---------- Responsivo ---------- */
@media (max-width: 820px) {
  .flow__steps { width: min(440px + 2 * var(--gutter), 100%); margin-bottom: 2rem; }
}
@media (max-width: 480px) {
  .hero { justify-content: flex-start; padding-top: calc(var(--header-h) + 9vh); }
  .hero__scroll-btn { bottom: 1rem; }
  .flow__steps { margin-bottom: 1.2rem; }
  .flow__step { padding-block: 0.4rem; }
  .flow__description { padding-bottom: 0.4rem; }
}
@media (max-width: 360px) {
  .flow__description { font-size: 0.8125rem; }
  .flow__step.is-active .flow__title { font-size: 1.125rem; }
}

/* Viewports baixos (phone landscape / janelas curtas): título limitado pela
   ALTURA e painel compacto para a cena continuar visível atrás. */
@media (max-height: 560px) {
  .hero { justify-content: center; padding-top: var(--header-h); }
  .hero__title { font-size: min(clamp(2.75rem, 8.4vw, 5.75rem), 13vh); }
  .hero__subtitle { margin-top: 0.8rem; font-size: var(--text-sm); }
  .hero__cta { margin-top: 1.1rem; }
  .hero__scroll-btn { bottom: 0.5rem; }
  .flow__steps { margin-bottom: 0.8rem; }
  .flow__step { padding-block: 0.25rem; }
  .flow__step.is-active .flow__num { height: 2.1rem; }
  .flow__description { font-size: 0.8125rem; line-height: 1.4; padding-bottom: 0.3rem; }
}

/* Sem preferência por movimento: nada de transições longas */
@media (prefers-reduced-motion: reduce) {
  #hero-city-canvas { transition: none; }
  .flow__steps { transition: none; transform: none; }
}