/**
 * Kredo Drift — Aura Animation Styles (Two-Ring Concentric Design)
 *
 * WHY two animation groups: the inner ring (Identity Core) breathes slowly
 * and stays stable — it represents structural identity. The outer ring
 * (Cognitive Profile) has a slightly different rhythm, creating a layered
 * depth effect without the complexity of counter-rotation.
 */

/* ============================================================
   Energy Field Animations
   ============================================================ */

/* Gentle global breathing for stable auras (no per-dimension drift) */
@keyframes energyPulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.02); opacity: 0.93; }
}

.energy-field-animated {
  animation: energyPulse 5s ease-in-out infinite;
  transform-origin: center;
}

/* WHY separate outer ring breath: different period (8s vs 5s) creates
   visual separation between rings without explicit rotation. The slight
   desync makes the aura feel organic rather than mechanical. */
@keyframes outerRingBreath {
  0%, 100% { transform: scale(1); opacity: 1; }
  35% { transform: scale(1.015); opacity: 0.96; }
  65% { transform: scale(0.99); opacity: 0.98; }
}

.outer-ring-group {
  transform-origin: 220px 220px;
}

.inner-ring-group {
  transform-origin: 220px 220px;
}

/* WHY 5 tiers of lobe animation: each maps to a drift severity range.
   Low drift gets slow, gentle pulsing. High drift gets chaotic rotation +
   hue shifts — the aura should feel increasingly unstable as identity erodes. */
@keyframes lobePulseCalm {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.02); opacity: 0.94; }
}

@keyframes lobePulseMild {
  0%, 100% { transform: scale(1); opacity: 1; }
  25% { transform: scale(1.06); opacity: 0.85; }
  50% { transform: scale(0.94); opacity: 0.78; }
  75% { transform: scale(1.04); opacity: 0.82; }
}

@keyframes lobePulseModerate {
  0%, 100% { transform: scale(1) rotate(0deg); opacity: 1; }
  20% { transform: scale(1.12) rotate(0.5deg); opacity: 0.7; }
  40% { transform: scale(0.88) rotate(-0.8deg); opacity: 0.82; }
  60% { transform: scale(1.10) rotate(0.6deg); opacity: 0.65; }
  80% { transform: scale(0.90) rotate(-0.4deg); opacity: 0.78; }
}

@keyframes lobePulseAggressive {
  0% { transform: scale(1) rotate(0deg); opacity: 1; filter: hue-rotate(0deg); }
  12% { transform: scale(1.18) rotate(1.8deg); opacity: 0.5; filter: hue-rotate(10deg); }
  28% { transform: scale(0.82) rotate(-2.5deg); opacity: 0.75; filter: hue-rotate(-6deg); }
  45% { transform: scale(1.20) rotate(2.2deg); opacity: 0.4; filter: hue-rotate(14deg); }
  62% { transform: scale(0.84) rotate(-1.5deg); opacity: 0.7; filter: hue-rotate(-4deg); }
  80% { transform: scale(1.16) rotate(1.2deg); opacity: 0.45; filter: hue-rotate(8deg); }
  100% { transform: scale(1) rotate(0deg); opacity: 1; filter: hue-rotate(0deg); }
}

@keyframes lobePulseCritical {
  0% { transform: scale(1) rotate(0deg); opacity: 1; filter: hue-rotate(0deg) saturate(1); }
  6% { transform: scale(1.25) rotate(3.5deg); opacity: 0.25; filter: hue-rotate(18deg) saturate(1.6); }
  14% { transform: scale(0.75) rotate(-4.5deg); opacity: 0.8; filter: hue-rotate(-12deg) saturate(0.6); }
  24% { transform: scale(1.28) rotate(3deg); opacity: 0.2; filter: hue-rotate(22deg) saturate(2); }
  35% { transform: scale(0.72) rotate(-3.5deg); opacity: 0.7; filter: hue-rotate(-10deg) saturate(0.5); }
  46% { transform: scale(1.30) rotate(4deg); opacity: 0.15; filter: hue-rotate(20deg) saturate(2.2); }
  58% { transform: scale(0.74) rotate(-2.5deg); opacity: 0.75; filter: hue-rotate(-14deg) saturate(0.4); }
  70% { transform: scale(1.22) rotate(2.5deg); opacity: 0.3; filter: hue-rotate(16deg) saturate(1.8); }
  85% { transform: scale(0.78) rotate(-2deg); opacity: 0.55; filter: hue-rotate(-8deg) saturate(0.7); }
  100% { transform: scale(1) rotate(0deg); opacity: 1; filter: hue-rotate(0deg) saturate(1); }
}

/* Broken coherence link flicker */
@keyframes linkFlicker {
  0%, 100% { opacity: 0.3; }
  8% { opacity: 0.03; }
  16% { opacity: 0.28; }
  24% { opacity: 0.06; }
  38% { opacity: 0.35; }
  48% { opacity: 0.02; }
  60% { opacity: 0.3; }
  72% { opacity: 0.08; }
  85% { opacity: 0.25; }
}

/* Coherence link pulse — subtle brightening for strong connections */
@keyframes coherenceLink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

@keyframes ghostPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

.energy-lobe-group {
  /* WHY fixed origin: lobes must rotate/pulse around the SVG center (220,220),
     not their own bounding box — otherwise animation looks lopsided. */
  transform-origin: 220px 220px;
}

/* ============================================================
   Outer Ring Arc Indicators (Badge Mode)
   ============================================================ */

/* WHY pulsating arcs: in badge mode the outer ring is reduced to thin
   arc segments. The gentle pulse keeps them feeling alive — a static
   ring would look like a progress bar, not an energy field. */
@keyframes arcPulse {
  0%, 100% { opacity: 1; stroke-width: 3.5; }
  50% { opacity: 0.7; stroke-width: 4.5; }
}

.outer-ring-arc {
  animation: arcPulse 4s ease-in-out infinite;
  transform-origin: 220px 220px;
}

/* Stagger arc animations so they don't all breathe in unison */
.outer-ring-arc:nth-child(2) { animation-delay: 0.5s; }
.outer-ring-arc:nth-child(3) { animation-delay: 1.0s; }
.outer-ring-arc:nth-child(4) { animation-delay: 1.5s; }
.outer-ring-arc:nth-child(5) { animation-delay: 2.0s; }
.outer-ring-arc:nth-child(6) { animation-delay: 2.5s; }
.outer-ring-arc:nth-child(7) { animation-delay: 3.0s; }

/* Ring separator between inner and outer rings */
@keyframes ringGlow {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 0.6; stroke-dashoffset: 20; }
}

.ring-separator {
  animation: ringGlow 6s ease-in-out infinite;
  transform-origin: 220px 220px;
}

/* ============================================================
   Particle Animations
   ============================================================ */

@keyframes particleDrift {
  0% { transform: translateY(0) translateX(0) scale(1); opacity: 0; }
  15% { opacity: 0.7; }
  50% { transform: translateY(-8px) translateX(3px) scale(1.2); opacity: 0.5; }
  85% { opacity: 0.3; }
  100% { transform: translateY(-18px) translateX(6px) scale(0.6); opacity: 0; }
}

@keyframes particleDriftAgitated {
  0% { transform: translateY(0) translateX(0) scale(1); opacity: 0; }
  10% { opacity: 0.9; transform: translateY(-2px) translateX(-5px) scale(1.3); }
  30% { opacity: 0.5; transform: translateY(-10px) translateX(8px) scale(0.8); }
  50% { opacity: 0.8; transform: translateY(-6px) translateX(-6px) scale(1.4); }
  70% { opacity: 0.4; transform: translateY(-16px) translateX(10px) scale(0.7); }
  90% { opacity: 0.6; transform: translateY(-20px) translateX(-4px) scale(1.1); }
  100% { transform: translateY(-24px) translateX(2px) scale(0.5); opacity: 0; }
}

@keyframes particleOrbit {
  0% { transform: rotate(0deg) translateX(var(--orbit-r)) rotate(0deg); opacity: 0.4; }
  25% { opacity: 0.7; }
  50% { opacity: 0.3; }
  75% { opacity: 0.6; }
  100% { transform: rotate(360deg) translateX(var(--orbit-r)) rotate(-360deg); opacity: 0.4; }
}

.energy-particle {
  animation: particleDrift 3.5s ease-in-out infinite;
}

.energy-particle-agitated {
  animation: particleDriftAgitated 1.5s ease-in-out infinite;
}

.energy-particle-orbit {
  animation: particleOrbit var(--orbit-speed) linear infinite;
  transform-origin: 220px 220px;
}

/* ============================================================
   Core Heartbeat
   ============================================================ */

/* WHY double-beat pattern: mimics a biological heartbeat (lub-dub) to give
   the core a living, organic feel. Fast variant for high-drift agents. */
@keyframes coreHeartbeat {
  0%, 100% { transform: scale(1); opacity: 0.8; }
  5% { transform: scale(1.15); opacity: 1; }
  10% { transform: scale(1); opacity: 0.8; }
  15% { transform: scale(1.1); opacity: 0.95; }
  20% { transform: scale(1); opacity: 0.8; }
}

@keyframes coreHeartbeatFast {
  0%, 100% { transform: scale(1); opacity: 0.7; }
  8% { transform: scale(1.25); opacity: 1; }
  16% { transform: scale(0.95); opacity: 0.6; }
  24% { transform: scale(1.2); opacity: 0.9; }
  32% { transform: scale(1); opacity: 0.7; }
}

.core-heartbeat {
  animation: coreHeartbeat 4s ease-in-out infinite;
  transform-origin: center;
}

.core-heartbeat-fast {
  animation: coreHeartbeatFast 2s ease-in-out infinite;
  transform-origin: center;
}

/* Halo ring around strongest lobe */
@keyframes haloRing {
  0%, 100% { stroke-dashoffset: 0; opacity: 0.3; }
  50% { stroke-dashoffset: 30; opacity: 0.6; }
}

/* ============================================================
   Visualization Container
   ============================================================ */

.viz-container {
  width: 100%;
  max-width: 440px;
  aspect-ratio: 1;
  position: relative;
  z-index: 2;
}

.viz-container svg {
  width: 100%;
  height: 100%;
}

/* ============================================================
   Tooltip
   ============================================================ */

.aura-tooltip {
  position: fixed;
  z-index: 1000;
  padding: 0.5rem 0.85rem;
  background: rgba(12, 12, 20, 0.95);
  border: 1px solid var(--border-hover);
  border-radius: 8px;
  font-size: 0.78rem;
  font-family: var(--font-mono);
  color: var(--text-primary);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s ease;
  white-space: nowrap;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 4px 24px rgba(0,0,0,0.4);
}

.aura-tooltip.visible {
  opacity: 1;
}

/* ============================================================
   Score Pills
   ============================================================ */

.pill {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  padding: 0.3rem 0.65rem;
  border-radius: 20px;
  background: color-mix(in srgb, var(--pill-color) 15%, transparent);
  border: 1px solid color-mix(in srgb, var(--pill-color) 30%, transparent);
  color: var(--pill-color);
}

.pill.faint {
  opacity: 0.5;
}

.pill.warn {
  box-shadow: 0 0 12px color-mix(in srgb, var(--pill-color) 30%, transparent);
}

/* WHY animated glow on danger pills: draws the eye to the dimension that
   needs attention without requiring the user to scan numbers. */
.pill.danger {
  box-shadow: 0 0 16px color-mix(in srgb, var(--pill-color) 40%, transparent);
  animation: pillPulse 2s ease-in-out infinite;
}

.pill small {
  opacity: 0.7;
  font-size: 0.65rem;
}

/* Tier separator in pill lists */
.pill-tier-label {
  font-family: var(--font-mono);
  font-size: 0.58rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: rgba(255,255,255,0.25);
  padding: 0.1rem 0.3rem;
  flex-basis: 100%;
}

@keyframes pillPulse {
  0%, 100% { box-shadow: 0 0 12px color-mix(in srgb, var(--pill-color) 30%, transparent); }
  50% { box-shadow: 0 0 24px color-mix(in srgb, var(--pill-color) 50%, transparent); }
}