/* ESB Animation */
.hero-visual {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1;
  position: relative;
}

.esb-animation {
  width: 600px;
  height: 400px;
  position: relative;
}

.esb-tube {
  position: absolute;
  left: 50%;
  top: 30%;
  transform: translateX(-50%);
  width: 550px;
  height: 80px;
  perspective: 1000px;
}

.tube-glow {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 40px;
  background: radial-gradient(ellipse, rgba(14, 165, 233, 0.3) 0%, transparent 70%);
  animation: pulse 2s ease-in-out infinite;
  filter: blur(10px);
}

@keyframes pulse {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 0.8; }
}

.esb-core {
  position: absolute;
  width: 100%;
  height: 100%;
  background: var(--gradient);
  border-radius: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 40px rgba(14, 165, 233, 0.6),
              inset 0 0 20px rgba(255, 255, 255, 0.2);
  border: 3px solid rgba(255, 255, 255, 0.3);
}

.esb-label {
  font-weight: 800;
  font-size: 1.4rem;
  color: var(--white);
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
  letter-spacing: 0.2em;
}

.message {
  position: absolute;
  width: 14px;
  height: 14px;
  /*background: #10b981;*/
  background: #C63AFC;
  border-radius: 50%;
  /*box-shadow: 0 0 20px #10b981, 0 0 40px #10b981;*/
  box-shadow: #E5A1FF;
  opacity: 0;
  top: 50%;
  transform: translateY(-50%);
}

.message-1 {
  animation: flyThrough 1s ease-in-out infinite;
  animation-delay: 0s;
}

.message-2 {
  animation: flyThrough 1s ease-in-out infinite;
  animation-delay: 0.7s;
}

.message-3 {
  animation: flyThrough 1s ease-in-out infinite;
  animation-delay: 1.4s;
}

.message-4 {
  animation: flyThrough 1s ease-in-out infinite;
  animation-delay: 2.1s;
}

.message-5 {
  animation: flyThrough 1s ease-in-out infinite;
  animation-delay: 2.8s;
}

.message-6 {
  animation: flyThrough 1s ease-in-out infinite;
  animation-delay: 3.5s;
}

@keyframes flyThrough {
  0% {
    left: -30px;
    opacity: 0;
    transform: translateY(-50%) scale(0.5);
  }
  10% {
    opacity: 1;
    transform: translateY(-50%) scale(1);
  }
  50% {
    transform: translateY(-50%) scale(1.3);
    box-shadow: 0 0 30px #10b981, 0 0 60px #10b981;
  }
  90% {
    opacity: 1;
    transform: translateY(-50%) scale(1);
  }
  100% {
    left: calc(100% + 30px);
    opacity: 0;
    transform: translateY(-50%) scale(0.5);
  }
}

.app-nodes {
  position: absolute;
  width: 100%;
  height: 100%;
}

.app-node {
  position: absolute;
  padding: 0.75rem 1.25rem;
  background: rgba(255, 255, 255, 0.1);
  border: 2px solid var(--primary);
  border-radius: 8px;
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--white);
  backdrop-filter: blur(10px);
  box-shadow: 0 4px 15px rgba(14, 165, 233, 0.3);
  animation: fadeIn 0.6s ease-out both;
  white-space: nowrap;
  top: 70%;
  transform: translateX(-50%);
}

.app-left-1 {
  left: 15%;
  animation-delay: 1s;
}

.app-left-2 {
  left: 32.5%;
  animation-delay: 1.2s;
}

.app-left-3 {
  left: 50%;
  animation-delay: 1.4s;
}

.app-right-1 {
  left: 67.5%;
  animation-delay: 1.6s;
}

.app-right-2 {
  left: 85%;
  animation-delay: 1.8s;
}

.app-right-3 {
  display: none;
}

.message-6 {
  display: none;
}

.line-6 {
  display: none;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

.connection-lines {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: -1;
}

.conn-line {
  stroke: var(--primary);
  stroke-width: 2;
  stroke-dasharray: 5, 5;
  opacity: 0.5;
  animation: dashMove 20s linear infinite;
}

@keyframes dashMove {
  to {
    stroke-dashoffset: -100;
  }
}

.line-1 { animation-delay: 0s; }
.line-2 { animation-delay: 0.5s; }
.line-3 { animation-delay: 1s; }
.line-4 { animation-delay: 1.5s; }
.line-5 { animation-delay: 2s; }
.line-6 { animation-delay: 2.5s; }

/* Responsive adjustment */
@media (max-width: 768px) {
  .esb-animation {
    width: 100%;
    height: 350px;
    transform: scale(0.75);
  }

  .app-node {
    font-size: 0.7rem;
    padding: 0.5rem 0.75rem;
  }

  .esb-label {
    font-size: 1.1rem;
  }
}