#intro {
  width: 100%;
  height: 100vh;
  position: relative;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
}/*
.intro-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url(../img/ai.jpg) no-repeat center center;
  background-size: cover;
  z-index: -2; 
} */
.animated-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
   background-color: rgba(0, 0, 0, 0.8);  /* Optional dark overlay */
  z-index: -1;
  overflow: hidden;
}

.node {
  position: absolute;
  border-radius: 50%;
  transition: transform 2s ease; /* Smooth transitions */
  pointer-events: none; /* Ignore mouse clicks */
}

.line {
  position: absolute;
  height: 2px;
  background-color: rgba(255, 255, 255, 0.7); /* Line color */
  transform-origin: 0 50%;
  transition: width 0.5s, transform 0.5s; /* Smooth movement */
}

@keyframes float {
  0% { transform: translateY(0); }
  50% { transform: translateY(-20px); }
  100% { transform: translateY(0); }
}
#typing-text {
  font-size: 24px;
  font-weight: bold;
  white-space: nowrap;
  overflow: hidden;
  display: inline-block;
  margin: 20px auto;
  text-align: center;
  border-right: 2px solid #00a8ff; /* This simulates the blinking cursor */
}

.blinking-cursor {
  animation: blink 0.7s steps(1) infinite;
}

@keyframes blink {
  from { border-right-color: #00a8ff; }
  to { border-right-color: #00a8ff; }
}