/**
 * NumeraIQ Integration Section Styles
 * Matching React Integration.tsx exactly with rotating rings
 */

/* Integration wrapper */
.integration-wrapper {
  position: relative;
}

/* Integration steps - visible by default */
.integration-step {
  opacity: 1;
  transform: translateY(0);
}

/* Rotating ring (matching React: animate rotate 360, duration 20s, linear infinite) */
.integration-ring {
  animation: rotateRing 20s linear infinite;
}

@keyframes rotateRing {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* Glow pulse effect (matching React: scale and opacity animation) */
.integration-glow {
  animation: glowPulse 3s ease-in-out infinite;
}

.integration-step:nth-child(1) .integration-glow {
  animation-delay: 0s;
}

.integration-step:nth-child(2) .integration-glow {
  animation-delay: 0.5s;
}

.integration-step:nth-child(3) .integration-glow {
  animation-delay: 1s;
}

@keyframes glowPulse {
  0%, 100% {
    transform: scale(1);
    opacity: 0.3;
  }
  50% {
    transform: scale(1.2);
    opacity: 0.5;
  }
}

/* Icon container hover effect */
.integration-icon-container {
  transition: transform 0.3s ease;
}

/* Main icon circle - dark background with shadow */
.integration-circle {
  background-color: #0a0a0a !important;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

/* Icon color - lime/yellow */
.integration-circle svg {
  color: #D4FF00 !important;
  stroke: #D4FF00 !important;
}

/* Ensure glow effect is visible */
.integration-glow {
  background-color: rgba(212, 255, 0, 0.2) !important;
}

.integration-step:hover .integration-icon-container {
  transform: scale(1.05);
}

/* Mobile arrow bounce */
.integration-arrow {
  animation: arrowBounce 1.5s ease-in-out infinite;
}

@keyframes arrowBounce {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(8px);
  }
}

/* CTA arrow animation */
.integration-cta-arrow {
  display: inline-block;
  transition: transform 0.3s ease;
}

.group:hover .integration-cta-arrow,
.btn-primary:hover .integration-cta-arrow {
  transform: translateX(4px);
}

/* Mobile line animation */
.integration-mobile-line {
  transform-origin: top;
}

/* Responsive */
@media (max-width: 1023px) {
  .integration-paths {
    display: none;
  }
}