/* Esfera da A.M.O.R.A.: o único elemento gráfico da marca.
   Hoje ela tem um estado só, "presente": pulso ambiente e uma luz quente interna
   deslocada, que nunca vira ponto focal tipo olho.

   Os estados "processando" e "falando" foram removidos: eram um teste que ficou, e
   não combinavam com ela. Quando existirem estados novos, eles entram aqui como
   classes no .esfera-wrap, sem mexer no resto.

   Markup esperado:
   <div class="esfera-wrap" style="--tamanho:56px">
     <div class="esfera"></div>
   </div>

   Tamanho vem por --tamanho. A classe .grande usa a curva de pulso mais contida
   (a partir de ~96px).

   Tom (cor) vai no .esfera-wrap: nenhuma classe extra = Violeta (padrão); "tom-lilas";
   "tom-amora"; "tom-ambar"; "tom-verde". Cada tom define --esfera-c1..c6; o resto do
   arquivo só consome essas variáveis, nunca hex fixo, então um tom novo entra só
   adicionando um bloco aqui. */

.esfera-wrap { --tamanho: 56px; --brilho: .45;
  --esfera-c1: #9080ee; --esfera-c1-rgb: 144,128,238;
  --esfera-c2: #66a8e8; --esfera-c2-rgb: 102,168,232;
  --esfera-c3: #b7a6ff; --esfera-c4: #ff9ecf; --esfera-c5: #d8d1ff; --esfera-c6: #3d4f9e;
  width: var(--tamanho); height: var(--tamanho); position: relative; isolation: isolate;
  /* Sem isto a esfera vira elipse: como item de flex ao lado de texto que quebra em
     várias linhas, o navegador encolhe a largura e mantém a altura. */
  flex-shrink: 0; }

/* ── tons alternativos ──────────────────────────────────────────────────────────────── */
.esfera-wrap.tom-ambar { --esfera-c1: #e8954a; --esfera-c1-rgb: 232,149,74;
  --esfera-c2: #e86b6b; --esfera-c2-rgb: 232,107,107;
  --esfera-c3: #ffcb8a; --esfera-c4: #ff6f9e; --esfera-c5: #ffe3be; --esfera-c6: #8a3a2e; }
.esfera-wrap.tom-verde { --esfera-c1: #43b98a; --esfera-c1-rgb: 67,185,138;
  --esfera-c2: #4fb8d0; --esfera-c2-rgb: 79,184,208;
  --esfera-c3: #a8e8c9; --esfera-c4: #ffd166; --esfera-c5: #dff7ea; --esfera-c6: #1f6b54; }
.esfera-wrap.tom-lilas { --esfera-c1: #8a7ebe; --esfera-c1-rgb: 138,126,190;
  --esfera-c2: #7c9bc9; --esfera-c2-rgb: 124,155,201;
  --esfera-c3: #c9bfe8; --esfera-c4: #e8a6c9; --esfera-c5: #e5dff5; --esfera-c6: #362c56; }
.esfera-wrap.tom-amora { --esfera-c1: #584e70; --esfera-c1-rgb: 88,78,112;
  --esfera-c2: #4a5a8a; --esfera-c2-rgb: 74,90,138;
  --esfera-c3: #9e93be; --esfera-c4: #c77fa0; --esfera-c5: #c9c0de; --esfera-c6: #2a2438; }

/* ── o círculo ──────────────────────────────────────────────────────────────────────── */
.esfera { position: absolute; inset: 0; border-radius: 50%; overflow: hidden;
  background: linear-gradient(135deg, var(--esfera-c1), var(--esfera-c2));
  box-shadow: 0 0 clamp(22px, calc(var(--tamanho) * 0.8), 110px) rgba(var(--esfera-c1-rgb), var(--brilho));
  animation: esfera-pulso 5.2s ease-in-out infinite; }
.esfera-wrap.grande .esfera { animation-name: esfera-pulso-grande; }

@keyframes esfera-pulso {
  0%, 100% { opacity: .72; transform: scale(1); filter: brightness(1); }
  50% { opacity: 1; transform: scale(1.18); filter: brightness(1.22); }
}
@keyframes esfera-pulso-grande {
  0%, 100% { opacity: .84; transform: scale(1); filter: brightness(1); }
  50% { opacity: 1; transform: scale(1.06); filter: brightness(1.14); }
}

/* luz quente interna deslocada (34% 30%). Nunca vira um ponto focal tipo olho, por isso
   a opacidade baixa. */
.esfera::before { content: ''; position: absolute; inset: 8%; border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, var(--esfera-c3) 0%, transparent 68%); opacity: .16; }

/* "pensando": o único estado além de "presente" (2026-09-17, para o Buscar Jurisfania
   do site). O pulso fica mais curto e mais rápido, e o brilho sobe um pouco. Nada de
   giro nem de spinner: continua sendo a mesma esfera, só trabalhando. */
.esfera-wrap.pensando .esfera { animation-name: esfera-pensando; animation-duration: 1.4s; }
@keyframes esfera-pensando {
  0%, 100% { opacity: .82; transform: scale(1); filter: brightness(1.05); }
  50% { opacity: 1; transform: scale(1.1); filter: brightness(1.35); }
}

@media (prefers-reduced-motion: reduce) {
  .esfera { animation: none !important; }
}