/* ===== SERVICES HERO VISUALS ===== */

.hero-visual {
  position: relative;
  overflow: hidden;
}

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

.floating-shape {
  position: absolute;
  animation: float 12s ease-in-out infinite;
  will-change: transform;
}

.floating-shape.shape-1 {
  top: 10%;
  left: 5%;
  width: 120px;
  height: 120px;
  animation-duration: 15s;
}

.floating-shape.shape-2 {
  top: 60%;
  right: 8%;
  width: 100px;
  height: 100px;
  animation-duration: 18s;
  animation-delay: 1s;
}

.floating-shape.shape-3 {
  bottom: 15%;
  right: 20%;
  width: 80px;
  height: 80px;
  animation-duration: 10s;
  animation-delay: 2s;
}

@keyframes float {
  0%,
  100% {
    transform: translateY(0) rotate(0deg);
  }
  50% {
    transform: translateY(-30px) rotate(15deg);
  }
}

/* ===== SERVICES GRID VISUALS ===== */

.service-visual .box,
.service-visual .flow {
  stroke: #667eea;
  stroke-width: 1.5;
  fill: rgba(102, 126, 234, 0.1);
  transition: all 0.3s ease;
}

.service-card:hover .service-visual .box {
  fill: rgba(102, 126, 234, 0.2);
  transform: scale(1.05);
}

.service-visual .bot {
  fill: rgba(79, 172, 254, 0.1);
  stroke: #4facfe;
  stroke-width: 1.5;
}

.service-visual .eye {
  fill: #4facfe;
}

.service-visual .antenna {
  stroke: #4facfe;
  stroke-width: 1.5;
}

.service-visual .bar {
  fill: #43e97b;
  transition: height 0.5s ease-out;
}

.service-visual .trend {
  stroke: #38f9d7;
  stroke-width: 2;
  fill: none;
}

.service-visual .bulb {
  fill: rgba(250, 112, 154, 0.2);
  stroke: #fa709a;
  stroke-width: 1.5;
}

.service-visual .stem {
  fill: #fa709a;
}

.service-visual .arrow {
  stroke: #fee140;
  stroke-width: 2;
  fill: none;
}

/* Keyframe Animations */
.blink {
  animation: blink 2s infinite;
}

@keyframes blink {
  50% {
    opacity: 0;
  }
}

.grow {
  animation: grow 1.5s ease-out forwards;
  transform-origin: bottom;
}

@keyframes grow {
  from {
    transform: scaleY(0);
  }
  to {
    transform: scaleY(1);
  }
}

.pulse {
  animation: pulse 2s infinite;
}

@keyframes pulse {
  50% {
    transform: scale(1.1);
  }
}

/* ===== PROCESS VISUAL ANIMATIONS ===== */

.process-step-visual {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.process-step-visual.animate-in-visual {
  opacity: 1;
  transform: translateY(0);
}

.step-illustration {
  transition: transform 0.4s ease;
}

.process-step-visual:hover .step-illustration {
  transform: scale(1.05) rotate(3deg);
}