/* ==========================================
   HERO ABSTRACT ILLUSTRATION SYSTEM
   ========================================== */

/* Hero Background Container */
.hero-abstract-bg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
  z-index: 1;
  opacity: 0.6;
}

/* Abstract Wave Patterns */
.abstract-wave {
  position: absolute;
  width: 100%;
  height: 100%;
  background: linear-gradient(45deg, transparent 40%, rgba(0, 229, 255, 0.1) 50%, transparent 60%);
  animation: wave-flow 20s ease-in-out infinite;
  transform-origin: center;
}

.abstract-wave:nth-child(2) {
  background: linear-gradient(-45deg, transparent 40%, rgba(103, 58, 183, 0.08) 50%, transparent 60%);
  animation-delay: -7s;
  animation-duration: 25s;
}

.abstract-wave:nth-child(3) {
  background: linear-gradient(90deg, transparent 30%, rgba(0, 255, 136, 0.06) 50%, transparent 70%);
  animation-delay: -14s;
  animation-duration: 30s;
}

/* Organic Blob Shapes */
.abstract-blob {
  position: absolute;
  border-radius: 50% 30% 70% 40%;
  filter: blur(1px);
  animation: blob-morph 15s ease-in-out infinite;
  max-width: 20vw;
  max-height: 15vh;
}

.blob-1 {
  width: min(300px, 20vw);
  height: min(200px, 15vh);
  background: radial-gradient(ellipse at center, rgba(0, 229, 255, 0.12) 0%, transparent 70%);
  top: 10%;
  left: 10%;
  animation-delay: 0s;
}

.blob-2 {
  width: min(250px, 18vw);
  height: min(350px, 20vh);
  background: radial-gradient(ellipse at center, rgba(233, 30, 99, 0.1) 0%, transparent 65%);
  top: 40%;
  right: 15%;
  animation-delay: -5s;
}

.blob-3 {
  width: min(180px, 15vw);
  height: min(280px, 18vh);
  background: radial-gradient(ellipse at center, rgba(0, 255, 136, 0.08) 0%, transparent 60%);
  bottom: 20%;
  left: 25%;
  animation-delay: -10s;
}

/* Flowing Lines - Neural Network Style */
.neural-line {
  position: absolute;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(0, 229, 255, 0.4), rgba(103, 58, 183, 0.4), transparent);
  border-radius: 1px;
  animation: neural-pulse 12s ease-in-out infinite;
}

.line-1 {
  width: 60%;
  top: 25%;
  left: 20%;
  transform: rotate(15deg);
  animation-delay: 0s;
}

.line-2 {
  width: 40%;
  top: 60%;
  right: 10%;
  transform: rotate(-25deg);
  animation-delay: -4s;
}

.line-3 {
  width: 50%;
  bottom: 30%;
  left: 15%;
  transform: rotate(8deg);
  animation-delay: -8s;
}

/* Abstract Particles */
.abstract-particle {
  position: absolute;
  width: 4px;
  height: 4px;
  background: radial-gradient(circle, currentColor 0%, transparent 70%);
  border-radius: 50%;
  animation: particle-drift 18s linear infinite;
}

.particle-cyan { color: rgba(0, 229, 255, 0.6); }
.particle-purple { color: rgba(103, 58, 183, 0.5); }
.particle-green { color: rgba(0, 255, 136, 0.4); }
.particle-pink { color: rgba(233, 30, 99, 0.5); }

/* Gradient Orbs */
.gradient-orb {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.1), transparent);
  animation: orb-float 20s ease-in-out infinite;
  filter: blur(0.5px);
}

.orb-1 {
  width: min(120px, 12vw);
  height: min(120px, 12vw);
  background: radial-gradient(circle at 30% 30%, rgba(0, 229, 255, 0.15), transparent);
  top: 15%;
  right: 20%;
  animation-delay: 0s;
}

.orb-2 {
  width: min(80px, 8vw);
  height: min(80px, 8vw);
  background: radial-gradient(circle at 30% 30%, rgba(0, 255, 136, 0.12), transparent);
  bottom: 25%;
  right: 35%;
  animation-delay: -7s;
}

.orb-3 {
  width: min(150px, 15vw);
  height: min(150px, 15vw);
  background: radial-gradient(circle at 30% 30%, rgba(103, 58, 183, 0.1), transparent);
  top: 45%;
  left: 5%;
  animation-delay: -14s;
}

/* Keyframe Animations for Abstract Illustrations */
@keyframes wave-flow {
  0%, 100% {
    transform: translateX(-20px) translateY(0) scaleY(1);
    opacity: 0.3;
  }
  25% {
    transform: translateX(0) translateY(-8px) scaleY(1.1);
    opacity: 0.7;
  }
  50% {
    transform: translateX(15px) translateY(0) scaleY(0.9);
    opacity: 0.5;
  }
  75% {
    transform: translateX(5px) translateY(5px) scaleY(1.05);
    opacity: 0.8;
  }
}

@keyframes blob-morph {
  0%, 100% {
    border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%;
    transform: scale(1) rotate(0deg);
  }
  25% {
    border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
    transform: scale(1.05) rotate(5deg);
  }
  50% {
    border-radius: 30% 70% 40% 60% / 50% 60% 30% 70%;
    transform: scale(0.95) rotate(-3deg);
  }
  75% {
    border-radius: 70% 30% 60% 40% / 70% 40% 50% 60%;
    transform: scale(1.02) rotate(2deg);
  }
}

@keyframes neural-pulse {
  0%, 100% {
    opacity: 0.2;
    transform: scaleX(0.8);
  }
  25% {
    opacity: 0.8;
    transform: scaleX(1.2);
  }
  50% {
    opacity: 0.4;
    transform: scaleX(1);
  }
  75% {
    opacity: 0.9;
    transform: scaleX(1.1);
  }
}

@keyframes particle-drift {
  0% {
    transform: translateY(100vh) translateX(0) scale(0);
    opacity: 0;
  }
  10% {
    opacity: 1;
    transform: translateY(90vh) translateX(10px) scale(1);
  }
  50% {
    opacity: 0.8;
    transform: translateY(50vh) translateX(-20px) scale(1.2);
  }
  90% {
    opacity: 0.3;
    transform: translateY(10vh) translateX(30px) scale(0.8);
  }
  100% {
    transform: translateY(-10vh) translateX(0) scale(0);
    opacity: 0;
  }
}

@keyframes orb-float {
  0%, 100% {
    transform: translateY(0) translateX(0) scale(1);
    opacity: 0.3;
  }
  25% {
    transform: translateY(-20px) translateX(10px) scale(1.1);
    opacity: 0.6;
  }
  50% {
    transform: translateY(-5px) translateX(-15px) scale(0.9);
    opacity: 0.4;
  }
  75% {
    transform: translateY(-15px) translateX(5px) scale(1.05);
    opacity: 0.7;
  }
}

/* Responsive Design */
@media (max-width: 768px) {
  .abstract-wave {
    height: 80px;
  }
  
  .abstract-blob {
    width: 100px !important;
    height: 100px !important;
  }
  
  .neural-line {
    height: 1px;
  }
  
  .gradient-orb {
    width: 80px !important;
    height: 80px !important;
  }
}

@media (max-width: 480px) {
  .hero-abstract-bg {
    opacity: 0.3;
  }
  
  .abstract-wave {
    height: 60px;
  }
  
  .abstract-blob {
    width: 80px !important;
    height: 80px !important;
  }
  
  .gradient-orb {
    width: 60px !important;
    height: 60px !important;
  }
  
  .abstract-particle {
    width: 2px;
    height: 2px;
  }
}