:root {
  --auracle-gold: #c9a84c;
  --auracle-amber: #ffb347;
  --auracle-teal: #4ff0e0;
  --auracle-red: #ff665f;
  --auracle-ink: #08090d;
}

.auracle-pointer-rig {
  transform-style: preserve-3d;
  will-change: transform;
  transition: transform 420ms cubic-bezier(.2,.8,.2,1);
}

.auracle-mascot-actor {
  position: relative;
  display: grid;
  place-items: center;
  isolation: isolate;
}

.auracle-mascot-actor::before {
  content: '';
  position: absolute;
  z-index: -1;
  width: 74%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(201,168,76,.18), transparent 67%);
  filter: blur(18px);
  animation: auracleAura 5s ease-in-out infinite;
}

.auracle-mascot-actor img {
  display: block;
  max-width: 100%;
  height: auto;
  filter: drop-shadow(0 24px 36px rgba(0,0,0,.5));
  animation: auracleMascotSettle 7s ease-in-out infinite;
  transform-origin: 50% 84%;
}

.auracle-mascot-signal {
  position: absolute;
  left: 26%;
  top: 37%;
  width: 22px;
  aspect-ratio: 1;
  border: 1px solid rgba(255,179,71,.78);
  border-radius: 50%;
  opacity: 0;
  animation: auracleSignal 2.8s ease-out infinite;
}

.auracle-mascot-signal:nth-of-type(2) { animation-delay: .7s; }
.auracle-mascot-signal:nth-of-type(3) { animation-delay: 1.4s; }

@keyframes auracleMascotSettle {
  0%, 100% { transform: translateY(0) rotate(-.35deg) scale(1); }
  46% { transform: translateY(-7px) rotate(.45deg) scale(1.008); }
  52% { transform: translateY(-7px) rotate(.15deg) scale(1.008); }
}

@keyframes auracleAura {
  0%,100% { opacity: .5; transform: scale(.92); }
  50% { opacity: .92; transform: scale(1.05); }
}

@keyframes auracleSignal {
  0%, 38% { opacity: 0; transform: scale(.45); }
  42% { opacity: .72; }
  76%, 100% { opacity: 0; transform: scale(3.2); }
}

.auracle-state-actor {
  --auracle-state: var(--auracle-gold);
  position: relative;
  display: grid;
  place-items: center;
  min-height: 230px;
  overflow: hidden;
  border-radius: 20px;
  background: radial-gradient(circle at 50% 42%, color-mix(in srgb, var(--auracle-state) 8%, transparent), transparent 58%), #0a0b0f;
  isolation: isolate;
}

.auracle-state-actor img {
  width: min(100%, 210px);
  height: auto;
  display: block;
  mix-blend-mode: screen;
  filter: drop-shadow(0 18px 24px rgba(0,0,0,.45));
  transform-origin: 50% 78%;
}

.auracle-state-actor::after {
  content: '';
  position: absolute;
  inset: 13%;
  z-index: -1;
  border: 1px solid color-mix(in srgb, var(--auracle-state) 38%, transparent);
  border-radius: 50%;
  opacity: 0;
}

.auracle-state-actor[data-state="watching"] { --auracle-state: var(--auracle-teal); }
.auracle-state-actor[data-state="watching"] img { animation: auracleObserve 6.4s steps(6,end) infinite; }
.auracle-state-actor[data-state="watching"]::before {
  content: '';
  position: absolute;
  z-index: 2;
  left: 20%;
  right: 20%;
  top: 35%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(79,240,224,.72), transparent);
  box-shadow: 0 0 9px rgba(79,240,224,.5);
  animation: auracleScan 3.2s ease-in-out infinite;
}

.auracle-state-actor[data-state="info"] { --auracle-state: var(--auracle-teal); }
.auracle-state-actor[data-state="info"] img { animation: auracleInfo 4.8s cubic-bezier(.2,.8,.2,1) infinite; }
.auracle-state-actor[data-state="info"]::after { animation: auracleSoftRing 2.8s ease-out infinite; }

.auracle-state-actor[data-state="warning"] { --auracle-state: var(--auracle-amber); }
.auracle-state-actor[data-state="warning"] img { animation: auracleWarning 4s cubic-bezier(.2,.8,.2,1) infinite; }
.auracle-state-actor[data-state="warning"]::after { animation: auracleWarningRing 4s ease-out infinite; }

.auracle-state-actor[data-state="critical"] { --auracle-state: var(--auracle-red); }
.auracle-state-actor[data-state="critical"] img { animation: auracleCritical 3.8s steps(1,end) infinite; }
.auracle-state-actor[data-state="critical"]::after { animation: auracleCriticalRing 1.25s ease-out infinite; }

.auracle-state-actor[data-state="busy"] { --auracle-state: var(--auracle-teal); }
.auracle-state-actor[data-state="busy"] img { animation: auracleBusy 1.9s steps(4,end) infinite; }
.auracle-state-actor[data-state="busy"]::before {
  content: '•••';
  position: absolute;
  z-index: 3;
  left: 16%;
  top: 42%;
  color: var(--auracle-teal);
  font: 700 14px/1 ui-monospace, monospace;
  letter-spacing: 4px;
  text-shadow: 0 0 9px rgba(79,240,224,.75);
  animation: auracleDots 1.2s steps(3,end) infinite;
}

.auracle-state-actor[data-state="ready"] { --auracle-state: var(--auracle-gold); }
.auracle-state-actor[data-state="ready"] img { animation: auracleReady 7s ease-in-out infinite; }
.auracle-state-actor[data-state="ready"]::after { opacity: .28; animation: auracleSeal 7s ease-in-out infinite; }

.auracle-state-card.is-paused .auracle-state-actor *,
.auracle-state-card.is-paused .auracle-state-actor::before,
.auracle-state-card.is-paused .auracle-state-actor::after {
  animation-play-state: paused !important;
}

.auracle-state-actor.ae-chip {
  width: var(--ae-size, 48px);
  height: var(--ae-size, 48px);
  min-height: 0;
  border-radius: 50%;
  flex: none;
}
.auracle-state-actor.ae-chip img {
  width: 92%;
  max-width: none;
}
.auracle-state-actor.ae-chip[data-state="busy"]::before {
  font-size: 7px;
  letter-spacing: 2px;
  left: 18%;
  top: 38%;
}
.auracle-state-actor.ae-chip[data-state="watching"]::before {
  left: 18%;
  right: 18%;
  top: 38%;
}

@keyframes auracleObserve {
  0%, 18%, 100% { transform: translateX(0) rotate(0); }
  24%, 42% { transform: translateX(-3px) rotate(-.5deg); }
  48%, 66% { transform: translateX(3px) rotate(.5deg); }
  72% { transform: translateX(0); }
}

@keyframes auracleScan {
  0%, 15% { opacity: 0; transform: translateY(-28px); }
  25% { opacity: 1; }
  68% { opacity: .7; transform: translateY(54px); }
  76%, 100% { opacity: 0; transform: translateY(62px); }
}

@keyframes auracleInfo {
  0%,100% { transform: translateY(0) rotate(0); filter: brightness(.95); }
  42% { transform: translateY(-5px) rotate(-1.1deg); filter: brightness(1.08); }
  54% { transform: translateY(-4px) rotate(.35deg); filter: brightness(1.08); }
}

@keyframes auracleSoftRing {
  0% { opacity: .55; transform: scale(.8); }
  75%,100% { opacity: 0; transform: scale(1.14); }
}

@keyframes auracleWarning {
  0%,18%,100% { transform: scale(1); filter: brightness(1); }
  22% { transform: scale(1.045) translateY(-3px); filter: brightness(1.18); }
  27% { transform: scale(.995); }
  33% { transform: scale(1.025); }
  41% { transform: scale(1); }
}

@keyframes auracleWarningRing {
  0%,18% { opacity: 0; transform: scale(.8); }
  23% { opacity: .8; }
  54%,100% { opacity: 0; transform: scale(1.18); }
}

@keyframes auracleCritical {
  0%,17%,100% { transform: translateX(0); filter: brightness(1); }
  19% { transform: translateX(-5px); filter: brightness(1.24); }
  21% { transform: translateX(5px); }
  23% { transform: translateX(-3px); }
  25% { transform: translateX(3px); }
  27%,76% { transform: translateX(0); filter: brightness(1.1); }
}

@keyframes auracleCriticalRing {
  0% { opacity: .62; transform: scale(.88); }
  90%,100% { opacity: 0; transform: scale(1.13); }
}

@keyframes auracleBusy {
  0%,100% { transform: translateY(0) rotate(0); }
  25% { transform: translateY(-2px) rotate(-.6deg); }
  50% { transform: translateY(-4px) rotate(0); }
  75% { transform: translateY(-2px) rotate(.6deg); }
}

@keyframes auracleDots {
  0% { clip-path: inset(0 68% 0 0); }
  34% { clip-path: inset(0 36% 0 0); }
  67%,100% { clip-path: inset(0 0 0 0); }
}

@keyframes auracleReady {
  0%,100% { transform: translateY(0) scale(.992); filter: brightness(.94); }
  50% { transform: translateY(-2px) scale(1.006); filter: brightness(1.02); }
}

@keyframes auracleSeal {
  0%,100% { transform: scale(.94); opacity: .12; }
  50% { transform: scale(1.02); opacity: .34; }
}

@media (prefers-reduced-motion: reduce) {
  .auracle-pointer-rig,
  .auracle-mascot-actor::before,
  .auracle-mascot-actor img,
  .auracle-mascot-signal,
  .auracle-state-actor img,
  .auracle-state-actor::before,
  .auracle-state-actor::after {
    animation: none !important;
    transition: none !important;
    transform: none !important;
  }
}