/* ============================================================
   Queryable — órbita de mensagens (LPs do WhatsApp)
   Os balões de conversa vivem DENTRO do palco (#demo), agrupados em
   volta do centro que os atrai — não mais espalhados pela página.
   Quando a rolagem chega no palco eles aparecem, flutuam por 1,5s e
   são "sugados" pelo centro; no lugar deles, um resumo do grupo é
   digitado, simulando o produto.

   Tudo montado pelo assets/wa-orbit.js. Sem JS: nenhum balão é
   criado e o resumo do palco já está completo no HTML.
   ============================================================ */

/* ---------- Hero sem o vídeo: coluna única, centrada ---------- */
.hero-solo .uc-hero-grid {
  grid-template-columns: minmax(0, 1fr);
  text-align: center;
  padding-block: clamp(4rem, 9vw, 7rem);
}
.hero-solo h1 { max-width: 17ch; margin-inline: auto; }
.hero-solo .uc-hero-lead { margin-inline: auto; }
.hero-solo .uc-hero-note { margin-inline: auto; }
.hero-solo .uc-hero-ctas { justify-content: center; }

/* ---------- Camada dos balões (dentro do palco) ---------- */
.wa-orbit-layer {
  position: absolute;
  top: 0; bottom: 0; left: -1rem; right: -1rem;
  z-index: 0;
  pointer-events: none;
  /* Recorta quem passar da borda em telas estreitas, sem criar
     rolagem horizontal no documento. */
  overflow: hidden;
  /* Só entram em cena quando o palco chega. */
  opacity: 0;
  transition: opacity 600ms ease;
}
.wa-orbit-layer.in { opacity: 0.92; }
:root[data-theme="light"] .wa-orbit-layer.in { opacity: 0.95; }
.wa-orbit-layer.gone { opacity: 0; }

/* Cada balão é posicionado pelo seu centro: o JS escreve
   translate(-50%,-50%) + o deslocamento em px a partir do núcleo. */
.wa-float {
  position: absolute;
  left: 50%; top: 50%;
  will-change: transform;
}
.wa-float-inner {
  animation: waBob var(--bob-t, 7s) ease-in-out var(--bob-d, 0s) infinite alternate;
}
@keyframes waBob {
  from { transform: translateY(-6px) rotate(var(--tilt, -1deg)); }
  to   { transform: translateY(6px) rotate(calc(var(--tilt, -1deg) * -1)); }
}

/* O balão em si: mesma família visual dos mocks da página. */
.wa-float .bbl {
  max-width: 200px;
  padding: 7px 10px;
  border-radius: 12px;
  border: 1px solid var(--border, #2a2a2a);
  background: var(--bg-tertiary, #1c1c1c);
  font-size: 11.5px; line-height: 1.45;
  color: var(--fg-secondary, #a8a29e);
  box-shadow: 0 6px 24px -12px rgba(0, 0, 0, 0.4);
}
.wa-float .who {
  display: block;
  font-weight: 600; font-size: 10px;
  color: color-mix(in oklab, var(--accent, #3f46ff) 70%, var(--fg-primary, #f5f5f4));
  margin-bottom: 1px;
}
.wa-float .t {
  margin-left: 0.5em;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 8.5px; color: var(--fg-tertiary, #78716c);
  white-space: nowrap;
}
/* Balão de áudio: play + forma de onda. */
.wa-float .au { display: inline-flex; align-items: center; gap: 6px; vertical-align: middle; }
.wa-float .au svg { flex: none; color: var(--fg-tertiary, #78716c); }
.wa-float .au i {
  display: inline-block; width: 3px; border-radius: 2px;
  background: color-mix(in oklab, var(--accent, #3f46ff) 70%, var(--fg-tertiary, #78716c));
  height: calc(var(--h) * 0.16px);
}
.wa-float .au i + i { margin-left: 2px; }

/* No celular, só os balões marcados (menos poluição, menos custo).
   Eles usam coordenadas próprias (mx/my no JS) pra caberem no palco
   mais estreito, sempre em volta do núcleo. */
@media (max-width: 47.99em) {
  .wa-float { display: none; }
  .wa-float.keep-sm { display: block; }
  .wa-float .bbl { max-width: 160px; font-size: 10.5px; }
}

/* ---------- O palco da sucção ---------- */
.orbit-stage {
  position: relative;
  min-height: clamp(460px, 76vh, 680px);
  display: grid; place-items: center;
  align-content: center;
  gap: 1.25rem;
}
.orbit-eyebrow {
  transition: opacity 650ms ease 200ms;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--fg-tertiary, #78716c);
  text-align: center;
}

/* O centro que atrai: um ponto com brilho, pulsando. */
.orbit-core {
  position: absolute; left: 50%; top: 50%; z-index: 2;
  width: 10px; height: 10px; margin: -5px 0 0 -5px;
  border-radius: 50%;
  background: var(--accent, #3f46ff);
  box-shadow:
    0 0 0 6px color-mix(in oklab, var(--accent, #3f46ff) 18%, transparent),
    0 0 40px 8px color-mix(in oklab, var(--accent, #3f46ff) 45%, transparent);
  animation: corePulse 2.4s ease-in-out infinite;
  transition: opacity 400ms ease, transform 400ms ease;
}
@keyframes corePulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.35); }
}
.orbit-core.hungry { animation-duration: 0.7s; }
.orbit-core.done {
  opacity: 0; transform: scale(2.6);
  animation: none;
  transition: opacity 700ms ease, transform 700ms ease;
}

/* O resumo que nasce do centro. */
.orbit-summary {
  position: relative; z-index: 1;
  width: min(92vw, 30rem);
  margin: 0;
  box-shadow:
    0 1px 0 color-mix(in oklab, var(--fg-primary, #f5f5f4) 8%, transparent),
    0 40px 90px -40px color-mix(in oklab, var(--accent, #3f46ff) 50%, transparent);
}
/* Estados só quando o JS anima (a página sem JS mostra tudo pronto). */
.orbit-summary.pre {
  opacity: 0; transform: translateY(14px) scale(0.92);
  filter: blur(10px);
}
.orbit-summary.grow {
  opacity: 1; transform: none; filter: none;
  transition:
    opacity 900ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 900ms cubic-bezier(0.16, 1, 0.3, 1),
    filter 900ms cubic-bezier(0.16, 1, 0.3, 1);
}
.orbit-summary .orbit-meta { opacity: 1; transition: opacity 400ms ease; }
.orbit-summary .orbit-meta.wait { opacity: 0; }

/* Cursor da digitação. */
.orbit-caret {
  display: inline-block; width: 7px; height: 1em;
  margin-left: 2px; vertical-align: text-bottom;
  background: var(--accent, #3f46ff);
  animation: caretBlink 0.9s steps(1) infinite;
}
@keyframes caretBlink { 50% { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .wa-float-inner, .orbit-core { animation: none !important; }
}