/* ============================================================
   scene.css — fundo da cena 3D + fluxo animado do hero
   ============================================================ */

/* ---------- Fundo ---------- */
#canvas-container {
  position: fixed;
  inset: 0;
  z-index: -1;
  background: radial-gradient(circle at top, #0f2f45, #000000 70%);
  width: 100%;
  height: 100vh;

  /* Opacidade do gradiente. A cena 3D entra por cima e sobe para
     .cena-pronta quando termina de carregar (js/cena-3d.js). */
  opacity: 0.5;
  transition: opacity 0.8s ease;
}

#canvas-container.cena-pronta {
  opacity: 0.62;
}

/* A cena 3D nasce centralizada e encostava nas caixas do fluxo.
   Descer e reduzir tira a sobreposicao sem sumir com ela.
   O canvas e transparente: encolher afeta so os cubos, o gradiente
   fica no #canvas-container e continua cobrindo a tela toda. */
#canvas-container canvas {
  transform: translateY(30%) scale(0.58);
  transform-origin: center;
}

#container-triang {
  position: absolute;
  left: 0;
  right: 0;
}

/* ---------- Hero em duas colunas ----------
   Antes o .hero-content era position:absolute com left:370px chumbado,
   o que nao deixava espaco para nada ao lado. Agora as duas colunas
   dividem a largura e o valor fixo sai de cena. */
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.18fr);
  align-items: center;
  gap: 40px;
  padding: 64px 0 88px;
}

.hero-grid .hero-content {
  position: static;
  top: auto;
  left: auto;
  width: auto;
  max-width: 640px;
}

/* ---------- Fluxo animado ---------- */
.hero-flow svg {
  display: block;
  width: 100%;
  height: auto;
  max-width: 700px;
  margin-left: auto;
  font-family: 'Inter', system-ui, sans-serif;
}

.flow-links path {
  fill: none;
  stroke: rgba(255, 255, 255, 0.22);
  stroke-width: 1.5;
}

.flow-node rect {
  fill: rgba(255, 255, 255, 0.055);
  stroke: rgba(255, 255, 255, 0.18);
  stroke-width: 1;
}

.flow-node text {
  fill: rgba(255, 255, 255, 0.88);
  font-size: 12px;
  text-anchor: start;
}

/* A saida e o resultado: fica no tom da marca para destacar do que entra. */
.flow-out rect {
  fill: rgba(127, 231, 214, 0.07);
  stroke: rgba(127, 231, 214, 0.35);
}

.flow-out text {
  fill: rgba(232, 255, 250, 0.95);
}

/* A venda e o desfecho da sequencia. Fica no lugar cronologico correto,
   mas com peso visual maior para o olho encontrar sem precisar ler tudo. */
.flow-out rect.flow-destaque {
  fill: rgba(127, 231, 214, 0.16);
  stroke: rgba(127, 231, 214, 0.75);
  stroke-width: 1.6;
}

.flow-out .flow-texto-destaque {
  fill: #ffffff;
  font-weight: 600;
}

.flow-out .flow-ico-destaque {
  color: var(--primary);
  stroke-width: 2.4;
}

.flow-core rect {
  fill: var(--primary);
  fill-opacity: 0.1;
  stroke: var(--primary);
  stroke-width: 1.2;
  animation: flow-pulso 2.8s ease-in-out infinite;
}

.flow-core text {
  fill: var(--primary);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-anchor: middle;
}


.flow-dots circle {
  fill: var(--primary);
}

/* Os icones sao traçados, nao preenchidos, e herdam a cor de cada grupo. */
.flow-ico {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.flow-node .flow-ico { color: rgba(255, 255, 255, 0.6); }
.flow-out .flow-ico  { color: var(--primary); }

.flow-chip {
  color: var(--primary);
  animation: flow-pulso-chip 2.8s ease-in-out infinite;
}

.flow-etapa text {
  fill: rgba(255, 255, 255, 0.45);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  text-anchor: middle;
}

.flow-seta path {
  fill: rgba(255, 255, 255, 0.35);
}

@keyframes flow-pulso-chip {
  0%, 100% { opacity: 0.7; }
  50%      { opacity: 1; }
}

/* Os pontos percorrem so o trecho reto do meio (148->205 e 295->352),
   entao basta transladar no eixo X. */
.flow-dots .d1 { animation: flow-entra 2.4s linear infinite; }
.flow-dots .d2 { animation: flow-entra 2.4s linear infinite 1.2s; }
.flow-dots .d3 { animation: flow-sai 2.4s linear infinite 0.6s; }
.flow-dots .d4 { animation: flow-sai 2.4s linear infinite 1.8s; }

@keyframes flow-entra {
  0%   { transform: translateX(-4px); opacity: 0; }
  20%  { opacity: 1; }
  80%  { opacity: 1; }
  100% { transform: translateX(53px); opacity: 0; }
}

@keyframes flow-sai {
  0%   { transform: translateX(-4px); opacity: 0; }
  20%  { opacity: 1; }
  80%  { opacity: 1; }
  100% { transform: translateX(53px); opacity: 0; }
}

@keyframes flow-pulso {
  0%, 100% { fill-opacity: 0.08; }
  50%      { fill-opacity: 0.2; }
}

/* ---------- Indicador de scroll ----------
   Os cubos do fundo passam justamente pela faixa central de baixo, onde o
   indicador ficava, e as linhas do wireframe cruzavam o icone. Encostar na
   direita resolve. So a partir de 769px, que e onde a cena 3D carrega
   (abaixo disso ela nem baixa, e o indicador fica centralizado). */
@media (min-width: 769px) {
  .scroll-indicator {
    left: auto;
    right: 48px;
    transform: none;
  }
}

/* ---------- Uma coluna ---------- */
@media (max-width: 900px) {
  .hero-grid {
    grid-template-columns: 1fr;
    gap: 0px;
    padding: 80px 0 56px;
  }

  .hero-grid .hero-content {
    max-width: none;
  }

  .hero-flow svg {
    margin: 0 auto;
    max-width: 520px;
  }

  /* Em uma coluna o texto e o diagrama ocupam o topo inteiro, entao os cubos
     precisam descer mais para nao passar por tras do conteudo. */
  #canvas-container canvas {
    transform: translateY(58%) scale(0.46);
  }
}

/* ---------- Acessibilidade ---------- */
@media (prefers-reduced-motion: reduce) {
  .flow-dots circle,
  .flow-core rect,
  .flow-chip {
    animation: none;
  }

  .flow-dots circle {
    opacity: 0.85;
  }
}