/* «Энергетический лик» — анимации 2D-проводника. Состояния на .eg[data-state]. */
.eg { display: inline-block; line-height: 0; }
.eg-svg { width: 100%; height: 100%; display: block; overflow: visible; }

/* базовый покой (idle): дыхание, вращение колец, мягкое сияние */
.eg-glow  { transform-origin: 100px 100px; animation: egBreath 5.5s ease-in-out infinite; }
.eg-orb   { transform-origin: 100px 100px; animation: egBreath 5.5s ease-in-out infinite; }
.eg-rays  { transform-origin: 100px 100px; animation: egRaysIdle 6s ease-in-out infinite; }
.eg-ring  { transform-origin: 100px 100px; animation: egSpin 26s linear infinite; }
.eg-ring2 { transform-origin: 100px 100px; animation: egSpinRev 34s linear infinite; }
.eg-spark { transform-origin: 100px 100px; animation: egSpin 12s linear infinite; }
.eg-glyph { transition: opacity .5s ease; }

@keyframes egBreath { 0%,100% { transform: scale(1);    opacity: 1;   } 50% { transform: scale(1.045); opacity: .82; } }
@keyframes egRaysIdle { 0%,100% { transform: scale(1); opacity: .4; } 50% { transform: scale(1.03); opacity: .55; } }
@keyframes egSpin    { to { transform: rotate(360deg); } }
@keyframes egSpinRev { to { transform: rotate(-360deg); } }

/* говорит: лучи пульсируют, кольца быстрее, ярче */
.eg[data-state="talking"] .eg-rays  { animation: egRaysTalk 1.1s ease-in-out infinite; opacity: .7; }
.eg[data-state="talking"] .eg-glow  { animation: egBreath 1.4s ease-in-out infinite; }
.eg[data-state="talking"] .eg-orb   { animation: egPulse 1.4s ease-in-out infinite; }
.eg[data-state="talking"] .eg-ring  { animation: egSpin 10s linear infinite; }
.eg[data-state="talking"] .eg-ring2 { animation: egSpinRev 14s linear infinite; }
.eg[data-state="talking"] .eg-glyph { opacity: 1; }

@keyframes egRaysTalk { 0%,100% { transform: scale(.94); opacity: .5; } 50% { transform: scale(1.12); opacity: .85; } }
@keyframes egPulse    { 0%,100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.08); opacity: .9; } }

/* слушает: собранность, кольца ближе, зелёный акцент внимания */
.eg[data-state="listening"] .eg-rays  { opacity: .25; animation-duration: 9s; }
.eg[data-state="listening"] .eg-ring  { animation: egSpin 34s linear infinite; }
.eg[data-state="listening"] .eg-ring2 { stroke: #8fd3a6; opacity: .6; }
.eg[data-state="listening"] .eg-glyph { opacity: .92; }

@media (prefers-reduced-motion: reduce) {
  .eg-glow, .eg-orb, .eg-rays, .eg-ring, .eg-ring2, .eg-spark { animation: none !important; }
}