/* EGS Character Component - Reusable AI Intelligence Shape */

/* Base Character Container */
.egs-character {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
  overflow: visible;
  z-index: 5;
  transition: transform 0.5s ease, opacity 0.5s ease;
}

.egs-character:hover {
  transform: scale(1.1);
  opacity: 1;
}

.egs-character:active {
  transform: scale(0.9);
  opacity: 0.8;
}

.egs-neural-circle:hover {
  animation: 
    egsLiquidFloat 6s ease-in-out infinite,
    egsProfessionalPulse 2s cubic-bezier(0.4, 0.0, 0.2, 1) infinite;
}

.egs-neural-circle:hover::before {
  transform: translate(-50%, -50%) scale(1.05);
  box-shadow: 
    0 12px 48px rgba(59, 130, 246, 0.35),
    inset 0 2px 12px rgba(255, 255, 255, 0.6),
    inset 0 -2px 12px rgba(37, 99, 235, 0.3);
}

.egs-neural-circle:hover::after {
  transform: translate(-50%, -50%) scale(1.08);
  opacity: 1;
}

@keyframes egsProfessionalPulse {
  0%, 100% {
    transform: scale(1);
    filter: brightness(1);
  }
  50% {
    transform: scale(1.08);
    filter: brightness(1.15);
  }
}

/* Size Variants */
.egs-character-large {
  padding: 2rem 1rem 1rem 1rem;
  margin-bottom: 1.5rem;
}

.egs-character-medium {
  padding: 1.5rem 0.75rem 0.75rem 0.75rem;
  margin-bottom: 1rem;
}

.egs-character-small {
  padding: 1rem 0.5rem 0.5rem 0.5rem;
  margin-bottom: 0.5rem;
}

/* Revolutionary Liquid Intelligence Core */
.egs-neural-circle {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1);
  z-index: 10;
  animation: egsLiquidFloat 6s ease-in-out infinite;
  background: none;
  border: none;
  outline: none;

  margin-bottom: 1rem;
  filter: drop-shadow(0 2px 8px rgba(59,130,246,0.10));
}

/* Inner Core - New Layer for Depth */
.egs-neural-circle .egs-inner-core {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 40%;
  height: 40%;
  background: radial-gradient(circle,
    rgba(255, 255, 255, 0.9) 0%,
    rgba(147, 197, 253, 0.7) 50%,
    rgba(59, 130, 246, 0.5) 100%);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  z-index: 3;
  animation: 
    egsCorePulse 3s ease-in-out infinite,
    egsCoreRotate 20s linear infinite;
  box-shadow: 
    0 0 20px rgba(255, 255, 255, 0.5),
    inset 0 0 10px rgba(59, 130, 246, 0.3);
}

@keyframes egsCorePulse {
  0%, 100% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0.8;
  }
  50% {
    transform: translate(-50%, -50%) scale(1.1);
    opacity: 1;
  }
}

@keyframes egsCoreRotate {
  0% {
    filter: hue-rotate(0deg);
  }
  100% {
    filter: hue-rotate(360deg);
  }
}

/* Size-specific neural circle dimensions */
.egs-character-large .egs-neural-circle {
  width: 120px;
  height: 120px;
}

.egs-character-medium .egs-neural-circle {
  width: 80px;
  height: 80px;
}

.egs-character-small .egs-neural-circle {
  width: 60px;
  height: 60px;
}

/* Interactive cursor for clickable characters */
.egs-character.interactive .egs-neural-circle {
  cursor: pointer;
}

/* Main Liquid Shape */
.egs-neural-circle::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  background: 
    radial-gradient(circle at 30% 30%, 
      rgba(255, 255, 255, 0.95) 0%, 
      rgba(219, 234, 254, 0.85) 20%, 
      rgba(147, 197, 253, 0.75) 50%, 
      rgba(59, 130, 246, 0.65) 80%, 
      rgba(37, 99, 235, 0.55) 100%);
  border-radius: 63% 37% 54% 46% / 55% 48% 52% 45%;
  transform: translate(-50%, -50%);
  animation: 
    egsLiquidMorph 12s cubic-bezier(0.4, 0.0, 0.2, 1) infinite,
    egsGentleGlow 4s ease-in-out infinite;
  box-shadow: none;
  border: none;
  outline: none;
  transition: all 0.6s cubic-bezier(0.4, 0.0, 0.2, 1);
  backdrop-filter: blur(10px);
}

.egs-neural-circle:hover::before {
  box-shadow: none;
}

/* Secondary Liquid Layer */
.egs-neural-circle::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 75%;
  height: 75%;
  background: 
    radial-gradient(circle at 70% 70%, 
      rgba(255, 255, 255, 0.8) 0%, 
      rgba(219, 234, 254, 0.6) 30%, 
      rgba(147, 197, 253, 0.4) 60%, 
      transparent 100%);
  border-radius: 54% 46% 38% 62% / 49% 70% 30% 51%;
  transform: translate(-50%, -50%);
  animation: 
    egsLiquidMorph 10s cubic-bezier(0.4, 0.0, 0.2, 1) infinite reverse,
    egsInnerGlow 3s ease-in-out infinite;
  z-index: 2;
  border: none;
  outline: none;
  box-shadow: none;
  opacity: 0.9;
}

/* Floating Animation */
@keyframes egsLiquidFloat {
  0%, 100% { 
    transform: translateY(0px) scale(1) rotate(0deg);
    filter: 
      drop-shadow(0 8px 25px rgba(59, 130, 246, 0.3))
      drop-shadow(0 0 40px rgba(37, 99, 235, 0.2));
  }
  33% { 
    transform: translateY(-12px) scale(1.05) rotate(2deg);
    filter: 
      drop-shadow(0 12px 35px rgba(59, 130, 246, 0.4))
      drop-shadow(0 0 60px rgba(37, 99, 235, 0.3));
  }
  66% { 
    transform: translateY(-6px) scale(1.02) rotate(-1deg);
    filter: 
      drop-shadow(0 10px 30px rgba(59, 130, 246, 0.35))
      drop-shadow(0 0 50px rgba(37, 99, 235, 0.25));
  }
}

/* Liquid Morphing Animation */
@keyframes egsLiquidMorph {
  0%, 100% {
    border-radius: 63% 37% 54% 46% / 55% 48% 52% 45%;
    transform: translate(-50%, -50%) rotate(0deg) scale(1);
  }
  20% {
    border-radius: 40% 60% 60% 40% / 60% 30% 70% 40%;
    transform: translate(-50%, -50%) rotate(72deg) scale(1.02);
  }
  40% {
    border-radius: 54% 46% 38% 62% / 49% 70% 30% 51%;
    transform: translate(-50%, -50%) rotate(144deg) scale(1.05);
  }
  60% {
    border-radius: 61% 39% 55% 45% / 61% 38% 62% 39%;
    transform: translate(-50%, -50%) rotate(216deg) scale(1.03);
  }
  80% {
    border-radius: 47% 53% 34% 66% / 63% 47% 53% 37%;
    transform: translate(-50%, -50%) rotate(288deg) scale(1.01);
  }
}

/* Professional Glow Animation */
@keyframes egsGentleGlow {
  0%, 100% {
    filter: brightness(1) contrast(1);
    box-shadow: 
      0 8px 32px rgba(59, 130, 246, 0.25),
      inset 0 2px 8px rgba(255, 255, 255, 0.5),
      inset 0 -2px 8px rgba(37, 99, 235, 0.2);
  }
  50% {
    filter: brightness(1.1) contrast(1.05);
    box-shadow: 
      0 12px 40px rgba(59, 130, 246, 0.35),
      inset 0 2px 12px rgba(255, 255, 255, 0.6),
      inset 0 -2px 12px rgba(37, 99, 235, 0.3);
  }
}

/* Inner Glow Animation */
@keyframes egsInnerGlow {
  0%, 100% {
    opacity: 0.9;
    filter: blur(0px);
  }
  50% {
    opacity: 1;
    filter: blur(0.5px);
  }
}

/* Hover Effects for Interactive Characters */
.egs-character.interactive .egs-neural-circle:hover {
  transform: scale(1.05);
  filter: drop-shadow(0 8px 32px rgba(59, 130, 246, 0.3));
}

/* Elegant Intelligence Particles */
.egs-data-particles {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 3;
  overflow: hidden;
  animation: egsParticleDance 10s ease-in-out infinite;
}

@keyframes egsParticleDance {
  0%, 100% {
    transform: translateY(0) translateX(0);
  }
  50% {
    transform: translateY(-10px) translateX(10px);
  }
}

.egs-particle {
  position: absolute;
  width: 4px;
  height: 4px;
  background: radial-gradient(circle, 
    rgba(255, 255, 255, 1) 0%, 
    rgba(147, 197, 253, 0.8) 30%, 
    rgba(59, 130, 246, 0.6) 60%, 
    transparent 100%);
  border-radius: 50%;
    animation: egsElegantFlow 15s cubic-bezier(0.4, 0.0, 0.2, 1) infinite;
  opacity: 0;
  box-shadow: 
    0 0 6px rgba(59, 130, 246, 0.8),
    0 0 12px rgba(147, 197, 253, 0.5);
  filter: blur(0.5px);
}

/* Particle positioning and timing */
.egs-particle:nth-child(1) { 
  top: 20%; left: 20%; 
  animation-delay: 0s; 
  animation-duration: 12s;
}
.egs-particle:nth-child(2) { 
  top: 30%; left: 80%; 
  animation-delay: 2s; 
  animation-duration: 14s;
}
.egs-particle:nth-child(3) { 
  top: 50%; left: 30%; 
  animation-delay: 4s; 
  animation-duration: 16s;
}
.egs-particle:nth-child(4) { 
  top: 70%; left: 70%; 
  animation-delay: 6s; 
  animation-duration: 13s;
}
.egs-particle:nth-child(5) { 
  top: 40%; left: 60%; 
  animation-delay: 1s; 
  animation-duration: 15s;
}
.egs-particle:nth-child(6) { 
  top: 80%; left: 40%; 
  animation-delay: 3s; 
  animation-duration: 11s;
}

/*----------------------------------------------------------

/* Particle Flow Animation */
@keyframes egsElegantFlow {
  0% {
    transform: translateY(0) translateX(0) scale(0);
    opacity: 0;
    filter: blur(2px);
  }
  20% {
    transform: translateY(-15px) translateX(8px) scale(1);
    opacity: 0.8;
    filter: blur(0.5px);
  }
  50% {
    transform: translateY(-25px) translateX(-5px) scale(1.2);
    opacity: 1;
    filter: blur(0px);
  }
  80% {
    transform: translateY(-35px) translateX(-12px) scale(0.8);
    opacity: 0.6;
    filter: blur(1px);
  }
  100% {
    transform: translateY(-45px) translateX(-20px) scale(0);
    opacity: 0;
    filter: blur(2px);
  }
}

/* Character Text */
.egs-character-text {
  color: rgba(255, 255, 255, 0.95);
  font-weight: 500;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  letter-spacing: 0.5px;
  z-index: 15;
  text-transform: none;
  pointer-events: none;
  text-align: center;
  line-height: 1.3;
  max-width: 200px;
  word-wrap: break-word;
  opacity: 0.9;
  transition: opacity 0.3s ease;
}

.egs-character:hover .egs-character-text {
  opacity: 1;
}

/* Size-specific text styling */
.egs-character-large .egs-character-text {
  font-size: 0.9rem;
  margin-top: 0.5rem;
}

.egs-character-medium .egs-character-text {
  font-size: 0.8rem;
  margin-top: 0.4rem;
  max-width: 150px;
}

.egs-character-small .egs-character-text {
  font-size: 0.65rem;
  margin-top: 0.25rem;
  max-width: 100px;
  line-height: 1.2;
}


/* AI State Classes */
.egs-neural-circle.thinking {
  animation: 
    egsIntelligenceThinking 1.2s ease-in-out infinite,
    egsBlueResonance 2s ease-in-out infinite;
}

.egs-neural-circle.thinking::before {
  animation: egsThinkingGlow 1s ease-in-out infinite;
}

.egs-neural-circle.thinking::after {
  animation: egsThinkingCore 0.8s ease-in-out infinite;
}

@keyframes egsIntelligenceThinking {
  0%, 100% {
    transform: scale(1);
    filter: brightness(1);
  }
  50% {
    transform: scale(1.1);
    filter: brightness(1.3);
  }
}



@keyframes egsThinkingGlow {
  0%, 100% {
    opacity: 0.8;
    transform: translate(-50%, -50%) scale(1.1);
  }
  50% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.3);
  }
}

@keyframes egsThinkingCore {
  0%, 100% {
    opacity: 0.7;
    transform: translate(-50%, -50%) scale(1.2);
  }
  50% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.5);
  }
}

/* Success State */
.egs-neural-circle.success {
  animation: 
    egsBlueSuccess 1.5s cubic-bezier(0.175, 0.885, 0.32, 1.275),
    egsSuccessGlow 1s ease-out;
  background: 
    radial-gradient(circle at 30% 30%, rgba(34, 197, 94, 0.9) 0%, rgba(59, 130, 246, 0.8) 40%, rgba(37, 99, 235, 0.6) 70%, transparent 100%);
}

@keyframes egsBlueSuccess {
  0% {
    transform: scale(1);
    filter: brightness(1);
  }
  50% {
    transform: scale(1.3);
    filter: brightness(1.5);
  }
  100% {
    transform: scale(1);
    filter: brightness(1);
  }
}

@keyframes egsSuccessGlow {
  0%, 100% {
    box-shadow: 
      0 0 60px rgba(34, 197, 94, 0.8),
      0 0 120px rgba(59, 130, 246, 0.6),
      inset 0 0 40px rgba(147, 197, 253, 0.4);
  }
  50% {
    box-shadow: 
      0 0 100px rgba(34, 197, 94, 1),
      0 0 200px rgba(59, 130, 246, 0.8),
      inset 0 0 60px rgba(147, 197, 253, 0.7);
  }
}

/* Error State */
.egs-neural-circle.error {
  animation: 
    egsBlueError 1s cubic-bezier(0.68, -0.55, 0.265, 1.55),
    egsErrorGlow 0.8s ease-out;
  background: 
    radial-gradient(circle at 30% 30%, rgba(239, 68, 68, 0.9) 0%, rgba(59, 130, 246, 0.8) 40%, rgba(37, 99, 235, 0.6) 70%, transparent 100%);
}

@keyframes egsBlueError {
  0%, 100% {
    transform: translateX(0) scale(1);
    filter: brightness(1);
  }
  10%, 30%, 50%, 70%, 90% {
    transform: translateX(-6px) scale(1.05);
    filter: brightness(1.4);
  }
  20%, 40%, 60%, 80% {
    transform: translateX(6px) scale(1.05);
    filter: brightness(1.4);
  }
}

@keyframes egsErrorGlow {
  0%, 100% {
    box-shadow: 
      0 0 60px rgba(239, 68, 68, 0.8),
      0 0 120px rgba(59, 130, 246, 0.6),
      inset 0 0 40px rgba(147, 197, 253, 0.4);
  }
  50% {
    box-shadow: 
      0 0 100px rgba(239, 68, 68, 1),
      0 0 200px rgba(59, 130, 246, 0.8),
      inset 0 0 60px rgba(147, 197, 253, 0.7);
  }
}

/* Processing State */
.egs-neural-circle.processing {
  animation: 
    egsBlueProcessing 2s linear infinite,
    egsProcessingGlow 3s ease-in-out infinite;
  background: 
    radial-gradient(circle at 30% 30%, rgba(59, 130, 246, 1) 0%, rgba(37, 99, 235, 0.9) 40%, rgba(29, 78, 216, 0.7) 70%, transparent 100%);
}

@keyframes egsBlueProcessing {
  0% {
    transform: rotate(0deg) scale(1);
  }
  50% {
    transform: rotate(180deg) scale(1.1);
  }
  100% {
    transform: rotate(360deg) scale(1);
  }
}

@keyframes egsProcessingGlow {
  0%, 100% {
    box-shadow: 
      0 0 80px rgba(59, 130, 246, 0.8),
      0 0 160px rgba(37, 99, 235, 0.6),
      inset 0 0 50px rgba(147, 197, 253, 0.5);
  }
  50% {
    box-shadow: 
      0 0 120px rgba(59, 130, 246, 1),
      0 0 240px rgba(37, 99, 235, 0.8),
      inset 0 0 70px rgba(147, 197, 253, 0.7);
  }
}

/* Theme Variants */
.egs-character-minimal .egs-character-text {
  display: none;
}

.egs-character-floating {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  z-index: 1000;
  background: rgba(26, 29, 46, 0.9);
  border-radius: 50%;
  padding: 1rem;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(59, 130, 246, 0.2);
}

.egs-character-floating .egs-character-text {
  position: absolute;
  bottom: 100%;
  right: 0;
  margin-bottom: 1rem;
  background: rgba(26, 29, 46, 0.95);
  padding: 0.5rem 1rem;
  border-radius: 8px;
  border: 1px solid rgba(59, 130, 246, 0.3);
  white-space: nowrap;
  opacity: 0;
  transform: translateY(10px);
  transition: all 0.3s ease;
}

.egs-character-floating:hover .egs-character-text {
  opacity: 1;
  transform: translateY(0);
}

/* Responsive Design */
@media (max-width: 768px) {
  .egs-character-large {
    padding: 1.5rem 0.75rem 0.75rem 0.75rem;
    margin-bottom: 1rem;
  }
  
  .egs-character-large .egs-neural-circle {
    width: 100px;
    height: 100px;
  }
  
  .egs-character-large .egs-character-text {
    font-size: 0.8rem;
    max-width: 180px;
  }
  
  .egs-character-floating {
    bottom: 1rem;
    right: 1rem;
    padding: 0.75rem;
  }
}