/* Animated Tech Background */
.tm-parallax {
  position: relative;
  overflow: hidden;
  background: linear-gradient(125deg, #0a0e29, #1a1f4b, #0f1538);
}

/* Floating particles animation */
.particles-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

.particle {
  position: absolute;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  animation: float 15s infinite linear;
}

@keyframes float {
  0% {
    transform: translateY(100vh) rotate(0deg);
    opacity: 0;
  }
  10% {
    opacity: 0.7;
  }
  90% {
    opacity: 0.7;
  }
  100% {
    transform: translateY(-100px) rotate(360deg);
    opacity: 0;
  }
}

/* Circuit board animation */
.circuit-board {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: 
    linear-gradient(rgba(10, 231, 247, 0.1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(10, 231, 247, 0.1) 1px, transparent 1px);
  background-size: 50px 50px;
  animation: circuitMove 20s linear infinite;
  z-index: 1;
  opacity: 0.3;
}

@keyframes circuitMove {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 50px 50px;
  }
}

/* Data stream effect */
.data-stream {
  position: absolute;
  top: 0;
  width: 2px;
  height: 100%;
  background: linear-gradient(to bottom, transparent, #0ae7f7, transparent);
  box-shadow: 0 0 10px 2px #0ae7f7;
  animation: dataFlow 3s linear infinite;
  opacity: 0;
}

@keyframes dataFlow {
  0% {
    top: -100%;
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    top: 100%;
    opacity: 0;
  }
}

/* Binary rain effect */
.binary-rain {
  position: absolute;
  top: 0;
  color: rgba(10, 231, 247, 0.7);
  font-family: monospace;
  font-size: 14px;
  animation: binaryFall 10s linear infinite;
  text-shadow: 0 0 5px #0ae7f7;
}

@keyframes binaryFall {
  0% {
    transform: translateY(-100px);
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    transform: translateY(100vh);
    opacity: 0;
  }
}

/* Enhanced logo styling */
.logo-container {
  position: relative;
  display: inline-block;
  padding: 20px 40px;
  border-radius: 10px;
  overflow: hidden;
}

.logo-container::before {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  background: linear-gradient(45deg, #ff6b35, #0ae7f7, #ff6b35, #0ae7f7);
  z-index: -1;
  border-radius: 12px;
  animation: borderGlow 3s linear infinite;
  background-size: 400%;
}

.logo-container::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(10, 14, 41, 0.9);
  z-index: -1;
  border-radius: 10px;
}

@keyframes borderGlow {
  0% {
    background-position: 0 0;
  }
  50% {
    background-position: 400% 0;
  }
  100% {
    background-position: 0 0;
  }
}

.glow {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 120%;
  height: 120%;
  background: radial-gradient(circle, rgba(10, 231, 247, 0.2) 0%, transparent 70%);
  animation: pulse 4s infinite alternate;
}

@keyframes pulse {
  0% {
    opacity: 0.3;
    transform: translate(-50%, -50%) scale(0.8);
  }
  100% {
    opacity: 0.7;
    transform: translate(-50%, -50%) scale(1.2);
  }
}

.circuit-line {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: 
    linear-gradient(90deg, transparent 49%, rgba(10, 231, 247, 0.3) 50%, transparent 51%) 0 0 / 20px 20px repeat,
    linear-gradient(0deg, transparent 49%, rgba(10, 231, 247, 0.3) 50%, transparent 51%) 0 0 / 20px 20px repeat;
  animation: circuitFlow 10s linear infinite;
  border-radius: 10px;
  opacity: 0.5;
}

@keyframes circuitFlow {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 20px 20px;
  }
}

.logo {
  font-size: 2.5rem;
  font-weight: bold;
  background: linear-gradient(45deg, #ff6b35, #0ae7f7);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  position: relative;
  z-index: 2;
  letter-spacing: 2px;
  text-shadow: 0 0 10px rgba(10, 231, 247, 0.3);
}

.ai-badge {
  position: absolute;
  top: -10px;
  right: -10px;
  background: linear-gradient(45deg, #ff6b35, #0ae7f7);
  color: #0a0e29;
  font-size: 0.8rem;
  font-weight: bold;
  padding: 3px 8px;
  border-radius: 10px;
  animation: badgePulse 2s infinite alternate;
  z-index: 3;
}

@keyframes badgePulse {
  0% {
    transform: scale(1);
    box-shadow: 0 0 5px #ff6b35;
  }
  100% {
    transform: scale(1.1);
    box-shadow: 0 0 15px #0ae7f7;
  }
}

/* Ensure content stays above background */
.tm-hero-text-container, .tm-navbar, .tm-intro-next {
  position: relative;
  z-index: 10;
}