/* AI Trading Animation Container */
.ai-trading-animation {
  position: relative;
  width: 500px;
  height: 200px;
  margin: 20px auto;
  background: rgba(10, 14, 41, 0.7);
  border-radius: 15px;
  overflow: hidden;
  border: 1px solid rgba(10, 231, 247, 0.3);
  box-shadow: 0 0 20px rgba(10, 231, 247, 0.2);
}

/* Data flow lines */
.data-flow {
  position: absolute;
  width: 100%;
  height: 100%;
  background: 
    linear-gradient(90deg, transparent 49%, rgba(10, 231, 247, 0.1) 50%, transparent 51%) 0 0 / 30px 30px repeat,
    linear-gradient(0deg, transparent 49%, rgba(10, 231, 247, 0.1) 50%, transparent 51%) 0 0 / 30px 30px repeat;
  animation: gridMove 15s linear infinite;
  z-index: 1;
}

@keyframes gridMove {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 30px 30px;
  }
}

/* AI Brain */
.ai-brain {
  position: absolute;
  left: 50px;
  top: 50%;
  transform: translateY(-50%);
  width: 80px;
  height: 80px;
  z-index: 5;
}

.brain {
  position: absolute;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at 30% 30%, #0ae7f7, #0066ff);
  border-radius: 50% 50% 40% 40%;
  animation: brainPulse 2s infinite alternate;
  box-shadow: 0 0 20px #0ae7f7;
}

.brain::before, .brain::after {
  content: '';
  position: absolute;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 50%;
}

.brain::before {
  width: 30px;
  height: 30px;
  top: 20px;
  left: 15px;
}

.brain::after {
  width: 25px;
  height: 25px;
  top: 22px;
  right: 18px;
}

.brain-lobes {
  position: absolute;
  width: 100%;
  height: 100%;
}

.lobe {
  position: absolute;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 50%;
}

.lobe:nth-child(1) {
  width: 20px;
  height: 20px;
  top: 10px;
  left: 20px;
}

.lobe:nth-child(2) {
  width: 18px;
  height: 18px;
  top: 12px;
  right: 22px;
}

.lobe:nth-child(3) {
  width: 22px;
  height: 22px;
  bottom: 15px;
  left: 30px;
}

@keyframes brainPulse {
  0% {
    transform: scale(1);
    box-shadow: 0 0 15px #0ae7f7;
  }
  100% {
    transform: scale(1.05);
    box-shadow: 0 0 25px #0ae7f7, 0 0 35px #0066ff;
  }
}

/* Data Input */
.data-input {
  position: absolute;
  left: 150px;
  top: 50%;
  transform: translateY(-50%);
  width: 200px;
  height: 100px;
  z-index: 4;
}

.market-data {
  position: absolute;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: bold;
  color: #0a0e29;
  animation: dataFloat 4s infinite linear;
}

.market-data:nth-child(1) {
  background: #ff6b35;
  top: 10px;
  left: 20px;
  animation-delay: 0s;
}

.market-data:nth-child(2) {
  background: #0ae7f7;
  top: 40px;
  left: 60px;
  animation-delay: 1s;
}

.market-data:nth-child(3) {
  background: #9d4edd;
  top: 15px;
  left: 100px;
  animation-delay: 2s;
}

.market-data:nth-child(4) {
  background: #ffea00;
  top: 50px;
  left: 140px;
  animation-delay: 3s;
}

@keyframes dataFloat {
  0% {
    transform: translateY(0) scale(1);
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  30% {
    transform: translateY(-20px) scale(1.1);
  }
  50% {
    transform: translateY(0) scale(1);
  }
  70% {
    transform: translateY(10px) scale(0.9);
  }
  90% {
    opacity: 1;
  }
  100% {
    transform: translateY(0) scale(1);
    opacity: 0;
  }
}

/* Analysis Process */
.analysis {
  position: absolute;
  left: 150px;
  top: 50%;
  transform: translateY(-50%);
  width: 200px;
  height: 100px;
  z-index: 3;
}

.analysis-line {
  position: absolute;
  height: 2px;
  background: linear-gradient(90deg, #0ae7f7, transparent);
  top: 50%;
  left: 0;
  width: 0;
  animation: analyze 4s infinite;
  box-shadow: 0 0 10px #0ae7f7;
}

@keyframes analyze {
  0% {
    width: 0;
    left: 0;
    opacity: 1;
  }
  50% {
    width: 100%;
    opacity: 1;
  }
  100% {
    width: 0;
    left: 100%;
    opacity: 0;
  }
}

/* Trading Decisions */
.trading-decisions {
  position: absolute;
  right: 150px;
  top: 50%;
  transform: translateY(-50%);
  width: 120px;
  height: 100px;
  z-index: 4;
}

.decision {
  position: absolute;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  animation: decisionPop 3s infinite;
  box-shadow: 0 0 15px rgba(255, 255, 255, 0.5);
}

.buy {
  background: linear-gradient(45deg, #00b894, #00a085);
  top: 10px;
  left: 40px;
  animation-delay: 0.5s;
}

.sell {
  background: linear-gradient(45deg, #ff7675, #e84343);
  top: 50px;
  left: 40px;
  animation-delay: 2s;
}

.hold {
  background: linear-gradient(45deg, #fdcb6e, #e8a429);
  top: 30px;
  left: 0;
  animation-delay: 3.5s;
}

@keyframes decisionPop {
  0%, 100% {
    transform: scale(0);
    opacity: 0;
  }
  50% {
    transform: scale(1);
    opacity: 1;
  }
  80% {
    transform: scale(0.9);
    opacity: 0.8;
  }
}

/* Profit Output */
.profit-output {
  position: absolute;
  right: 50px;
  top: 50%;
  transform: translateY(-50%);
  width: 80px;
  height: 80px;
  z-index: 5;
}

.coin {
  position: absolute;
  width: 40px;
  height: 40px;
  background: linear-gradient(45deg, #fdcb6e, #e8a429);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: #0a0e29;
  font-weight: bold;
  animation: coinSpin 2s infinite;
  box-shadow: 0 0 15px #fdcb6e;
}

.coin::before {
  content: '$';
  position: absolute;
}

.coin-stack {
  position: absolute;
  width: 40px;
  height: 60px;
  bottom: 0;
  left: 20px;
  background: linear-gradient(45deg, #fdcb6e, #e8a429, #d4a324);
  border-radius: 5px;
  animation: stackGrow 6s infinite;
  transform-origin: bottom;
}

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

@keyframes stackGrow {
  0%, 70% {
    height: 0;
    opacity: 0;
  }
  100% {
    height: 60px;
    opacity: 1;
  }
}

/* Connection Lines */
.connection {
  position: absolute;
  height: 2px;
  background: rgba(10, 231, 247, 0.5);
  top: 50%;
  z-index: 2;
  box-shadow: 0 0 5px #0ae7f7;
}

.connection-1 {
  left: 130px;
  width: 20px;
  animation: pulseLine 2s infinite;
}

.connection-2 {
  left: 350px;
  width: 20px;
  animation: pulseLine 2s infinite 0.5s;
}

.connection-3 {
  left: 470px;
  width: 20px;
  animation: pulseLine 2s infinite 1s;
}

@keyframes pulseLine {
  0%, 100% {
    opacity: 0.3;
  }
  50% {
    opacity: 1;
  }
}

/* Animation Title */
.animation-title {
  text-align: center;
  color: #0ae7f7;
  font-size: 1.2rem;
  margin-top: 10px;
  font-weight: bold;
  text-shadow: 0 0 10px rgba(10, 231, 247, 0.5);
  letter-spacing: 1px;
}