/* ============================================================
   Spline Hero — cena 3D no lugar do Signal DNA (desktop)
   Montado por assets/js/spline-hero.js. O Signal DNA continua no
   HTML como versão do celular e reserva em caso de falha; quando a
   cena carrega, .signal-hero ganha .spline-on e o crossfade acontece.
   ============================================================ */

.spline-hero {
  position: absolute;
  /* sem moldura nenhuma (a pedido). O palco coincide com a coluna do
     herói, só respirando 24px acima/abaixo: com o canvas simétrico a
     câmera do Spline enquadra o robô no centro exato do espaço — o
     sangramento lateral que existiu aqui reenquadrava a cena e o robô
     aparecia torto/deslocado. */
  inset: -24px 0;
  /* empurra o robô para baixo e para a direita SEM mudar o tamanho do
     canvas: mexer nas bordas (inset) reenquadra a câmera do Spline e
     entorta a cena; o translate desloca o palco pronto, intacto. */
  /* o centro da coluna do herói cai abaixo da dobra numa tela de ~900px
     de altura; o palco sobe para o robô nascer centralizado na primeira
     visão do site (mantendo o empurrão para a direita). */
  transform: translate(110px, -150px);
  z-index: 4;                 /* acima das camadas do signal-stage */
  opacity: 0;
  transition: opacity .8s cubic-bezier(.215, .61, .355, 1);
  pointer-events: none;       /* enquanto invisível, o mouse ignora */
}

.signal-hero.spline-on .spline-hero { opacity: 1; pointer-events: auto; }

/* ---- fase de carga (.spline-boot): o Signal DNA fica invisível desde o
   primeiro quadro (nada de mostrar o herói antigo e trocar depois) e um
   brilho pulsante segura o espaço até o robô chegar ---- */
@media (min-width: 1024px) {
  .signal-hero.spline-boot .signal-stage {
    opacity: 0;
    visibility: hidden;
    transition: none;
  }
  .signal-hero.spline-boot::before {
    content: "";
    position: absolute;
    inset: 12% 10%;
    border-radius: 50%;
    background: radial-gradient(circle,
      rgba(143, 233, 60, .12),
      rgba(61, 220, 132, .05) 42%,
      transparent 70%);
    filter: blur(6px);
    animation: signal-breathe 2.6s ease-in-out infinite;
    pointer-events: none;
  }
  /* robô pronto: o brilho de carga apaga junto com o crossfade */
  .signal-hero.spline-on::before { display: none; }
}

/* notebooks com tela baixa: a dobra chega antes, o robô sobe mais um
   pouco para continuar centralizado na primeira visão */
@media (max-height: 820px) {
  .spline-hero { transform: translate(110px, -220px); }
}

/* o Signal DNA apaga embaixo e para de custar quadro; segue ocupando o
   espaço (min-height) para o layout do herói não pular */
.signal-hero.spline-on .signal-stage {
  opacity: 0;
  visibility: hidden;
  transition: opacity .5s ease, visibility 0s .5s;
}

.spline-hero-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  touch-action: none;
}

/* spotlight verde-lima que persegue o ponteiro (porte do Spotlight
   em framer-motion; o movimento vem do JS, aqui é só a pintura) */
.spline-spotlight {
  position: absolute;
  top: 0; left: 0;
  width: 480px; height: 480px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 2;
  opacity: 0;
  background: radial-gradient(circle,
    rgba(194, 247, 109, .16) 0%,
    rgba(143, 233, 60, .08) 34%,
    transparent 68%);
  filter: blur(6px);
  mix-blend-mode: screen;
  transition: opacity .45s ease;
  will-change: transform;
}
.spline-spotlight.is-on { opacity: 1; }

/* selo de interatividade, no mesmo vocabulário dos chips do site */
.spline-hero-hint {
  position: absolute;
  left: 50%; bottom: 14px;
  transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 8px;
  white-space: nowrap;
  padding: 8px 13px;
  border: 1px solid rgba(143, 233, 60, .24);
  border-radius: 999px;
  background: rgba(8, 12, 8, .72);
  color: var(--lime-2);
  font-family: var(--f-mono);
  font-size: 9px;
  letter-spacing: .13em;
  text-transform: uppercase;
  z-index: 3;
}
.spline-hero-hint i {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--lime);
  box-shadow: 0 0 10px var(--lime);
  animation: pulse-dot 2.2s infinite;
}

/* celular: o script nem monta a cena, mas se a janela encolher depois
   de montada, some com ela e o Signal DNA volta */
@media (max-width: 1023px) {
  .spline-hero { display: none; }
  .signal-hero.spline-on .signal-stage { opacity: 1; visibility: visible; }
}