/* Simon Reactor — living core (design: Astra, 2026-10)
   Layer stack: containment shadow → precision rings → canvas plasma →
   core disc. States: idle | thinking | speaking | approval | error.
   Voice amplitude drives --amp (0..1). */

.reactor {
  --size: var(--reactor-size, 184px);
  --amp: 0;
  position: relative;
  width: var(--size);
  height: var(--size);
  border-radius: 999px;
  isolation: isolate;
}
.reactor::before {
  content: "";
  position: absolute;
  inset: 13%;
  border-radius: inherit;
  background:
    radial-gradient(circle at 50% 54%,
      rgba(54,209,224,.12) 0%,
      rgba(54,209,224,.05) 36%,
      transparent 68%);
  box-shadow:
    0 24px 52px rgba(0,0,0,.36),
    inset 0 0 32px rgba(216,248,255,.035);
  z-index: 0;
}
.reactor__plasma {
  position: absolute;
  inset: 8%;
  width: 84%;
  height: 84%;
  border-radius: inherit;
  z-index: 2;
  opacity: .86;
  mix-blend-mode: screen;
}
.reactor__core {
  position: absolute;
  inset: 20%;
  border-radius: inherit;
  z-index: 3;
  background:
    radial-gradient(circle at 50% 46%,
      rgba(216,248,255,.22) 0%,
      rgba(54,209,224,.13) 18%,
      transparent 34%),
    radial-gradient(circle at 50% 56%,
      #36D1E0 0%, #12304d 38%, #0A1628 74%);
  box-shadow:
    inset 0 0 0 1px rgba(216,248,255,.08),
    inset 0 12px 28px rgba(216,248,255,.035),
    inset 0 -18px 34px rgba(0,0,0,.36),
    0 0 24px rgba(54,209,224,.11);
  transform: scale(calc(1 + var(--amp) * .045));
  transition: background-color .18s linear, box-shadow .18s linear;
}

/* precision rings */
.reactor__ring {
  position: absolute;
  border-radius: inherit;
  pointer-events: none;
}
.reactor__ring--inner {
  inset: 12%;
  border: 1px solid rgba(54,209,224,.28);
  border-top-color: rgba(54,209,224,.65);
  animation: reactor-spin 14s linear infinite;
}
.reactor__ring--outer {
  inset: 3%;
  border: 1px dashed rgba(54,209,224,.16);
  animation: reactor-spin 40s linear infinite reverse;
}
@keyframes reactor-spin { to { transform: rotate(360deg); } }

/* state variations */
.reactor[data-state="thinking"] .reactor__ring--inner {
  border-color: rgba(30,107,255,.34);
  border-top-color: rgba(30,107,255,.85);
  animation-duration: 4s;
}
.reactor[data-state="thinking"] .reactor__core {
  background:
    radial-gradient(circle at 50% 46%,
      rgba(216,248,255,.20) 0%, rgba(30,107,255,.14) 18%, transparent 34%),
    radial-gradient(circle at 50% 56%,
      #1E6BFF 0%, #122c52 38%, #0A1628 74%);
}
.reactor[data-state="speaking"] .reactor__ring--inner {
  animation-duration: calc(9s - var(--amp) * 5s);
  border-top-color: rgba(54,209,224,.9);
}
.reactor[data-state="approval"] .reactor__ring--inner {
  border-color: rgba(245,165,36,.4);
  border-top-color: rgba(245,165,36,.9);
  animation-duration: 6s;
}
.reactor[data-state="approval"] .reactor__core {
  background:
    radial-gradient(circle at 50% 46%,
      rgba(216,248,255,.18) 0%, rgba(245,165,36,.12) 18%, transparent 34%),
    radial-gradient(circle at 50% 56%,
      #F5A524 0%, #4d3510 38%, #0A1628 74%);
}
.reactor[data-state="error"] .reactor__ring--inner {
  border-color: rgba(229,72,77,.4);
  border-top-color: rgba(229,72,77,.9);
  animation: reactor-error-pulse 1.6s ease-in-out infinite;
}
.reactor[data-state="error"] .reactor__core {
  background:
    radial-gradient(circle at 50% 46%,
      rgba(216,248,255,.16) 0%, rgba(229,72,77,.12) 18%, transparent 34%),
    radial-gradient(circle at 50% 56%,
      #E5484D 0%, #4d1010 38%, #0A1628 74%);
}
@keyframes reactor-error-pulse {
  0%,100% { opacity: 1; }
  50% { opacity: .35; }
}

/* idle breathing on the core */
.reactor[data-state="idle"] .reactor__core {
  animation: reactor-breathe 4.5s ease-in-out infinite;
}
@keyframes reactor-breathe {
  0%,100% { filter: brightness(1); }
  50% { filter: brightness(1.14); }
}

@media (prefers-reduced-motion: reduce) {
  .reactor__ring, .reactor[data-state="idle"] .reactor__core {
    animation: none !important;
  }
}