/* Cronos: entidade orgânica, abstrata e escura, com reflexos em roxo, violeta, ciano e azul frio.
   Não é uma bola: contorno irregular que flui devagar, membrana translúcida em volta e luz interna difusa,
   sem brilho especular. Sem rosto, olhos, tentáculos ou traços de robô.
   Três estados (repouso, processando, resposta), controlados por JavaScript pelo atributo data-estado;
   o movimento é feito em CSS. Sem partículas, flashes nem efeitos estroboscópicos. */

.esfera-palco { position: relative; display: grid; place-items: center; }
.esfera {
  --tam: 180px;
  position: relative; width: var(--tam); height: calc(var(--tam) * .94);
  border-radius: 62% 38% 55% 45% / 46% 58% 42% 54%;
  background:
    radial-gradient(60% 50% at 30% 34%, rgba(150, 110, 255, .38) 0%, rgba(150, 110, 255, 0) 70%),
    radial-gradient(50% 45% at 74% 70%, rgba(90, 200, 240, .30) 0%, rgba(90, 200, 240, 0) 72%),
    radial-gradient(70% 70% at 55% 45%, #2b1f5c 0%, #140f2c 50%, #07050d 85%);
  box-shadow:
    inset -16px -20px 36px rgba(0, 0, 0, .7),
    inset 10px 12px 28px rgba(142, 108, 240, .22),
    0 0 50px rgba(110, 80, 230, .20),
    0 0 110px rgba(70, 150, 220, .10);
  animation: cronos-respira 7s ease-in-out infinite, cronos-forma 16s ease-in-out infinite, cronos-deriva 40s linear infinite;
  will-change: transform, border-radius;
}
.esfera::before { /* membrana translúcida, com contorno próprio */
  content: ""; position: absolute; inset: -9% -7% -6% -10%;
  border-radius: 45% 55% 40% 60% / 58% 42% 60% 40%;
  border: 1px solid rgba(160, 130, 255, .22);
  background: radial-gradient(closest-side, rgba(0, 0, 0, 0) 78%, rgba(120, 90, 240, .16) 92%, rgba(90, 190, 240, .08) 100%);
  filter: blur(1.5px);
  animation: cronos-membrana 11s ease-in-out infinite reverse;
}
.esfera::after { /* luz interna difusa, que circula devagar */
  content: ""; position: absolute; inset: 14% 18% 22% 12%;
  border-radius: 50% 40% 55% 45%;
  background: conic-gradient(from 200deg, rgba(185, 163, 255, 0), rgba(185, 163, 255, .28), rgba(100, 210, 245, .20), rgba(185, 163, 255, 0) 65%);
  filter: blur(12px); opacity: .75;
  animation: cronos-gira 24s linear infinite;
}

.esfera[data-estado="processando"] {
  animation: cronos-pulsa 1.8s ease-in-out infinite, cronos-forma 4.5s ease-in-out infinite, cronos-deriva 40s linear infinite;
  box-shadow:
    inset -16px -20px 36px rgba(0, 0, 0, .62),
    inset 10px 12px 32px rgba(142, 108, 240, .34),
    0 0 75px rgba(130, 95, 245, .30),
    0 0 140px rgba(80, 150, 220, .16);
}
.esfera[data-estado="processando"]::before { animation-duration: 3.5s; border-color: rgba(170, 140, 255, .38); }
.esfera[data-estado="processando"]::after { animation-duration: 7s; opacity: .95; }
.esfera[data-estado="resposta"] { animation: cronos-reage .9s ease-out 1, cronos-forma 16s ease-in-out infinite, cronos-deriva 40s linear infinite; }

@keyframes cronos-respira { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.035); } }
@keyframes cronos-pulsa { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.07); } }
@keyframes cronos-reage { 0% { transform: scale(1.06); } 40% { transform: scale(.97); } 100% { transform: scale(1); } }
@keyframes cronos-gira { to { rotate: 360deg; } }
@keyframes cronos-deriva { to { rotate: 360deg; } }
@keyframes cronos-forma {
  0%, 100% { border-radius: 62% 38% 55% 45% / 46% 58% 42% 54%; }
  25% { border-radius: 44% 56% 38% 62% / 60% 40% 58% 42%; }
  50% { border-radius: 56% 44% 64% 36% / 40% 62% 38% 60%; }
  75% { border-radius: 38% 62% 47% 53% / 55% 45% 61% 39%; }
}
@keyframes cronos-membrana {
  0%, 100% { border-radius: 45% 55% 40% 60% / 58% 42% 60% 40%; }
  33% { border-radius: 60% 40% 57% 43% / 41% 61% 39% 59%; }
  66% { border-radius: 40% 60% 45% 55% / 62% 38% 55% 45%; }
}

@media (prefers-reduced-motion: reduce) {
  .esfera, .esfera::before, .esfera::after, .esfera[data-estado] { animation: none !important; }
  .esfera[data-estado="processando"] { filter: brightness(1.15); }
}