/* ============================================
   INTEGRAZIONI API SECTION
   ============================================ */
/* Integration flow animation */
section.visible .integration-flow {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.6s;
}

/* Pulse ring animation for integration hub */
@keyframes pulseRing {
  0% {
    width: 180px;
    height: 180px;
    opacity: 1;
  }
  100% {
    width: 320px;
    height: 320px;
    opacity: 0;
  }
}
/* API Card base styles */
.api-card {
  background: rgba(100, 150, 255, 0.04);
  border: 1px solid rgba(100, 150, 255, 0.25);
  border-radius: 12px;
  padding: 18px;
  transition: all 0.3s ease;
}

.api-card:hover {
  background: rgba(100, 150, 255, 0.08);
  border-color: rgba(100, 150, 255, 0.5);
  box-shadow: 0 8px 25px rgba(100, 150, 255, 0.2);
}

/* API Card positioning - complex absolute positioning */
.api-card[style*="--card-index: 0"] {
  top: 50%;
  left: calc(50% + 280px);
  transform: translate(-50%, -50%);
}

.api-card[style*="--card-index: 1"] {
  top: calc(50% - 240px);
  left: calc(50% + 140px);
  transform: translate(-50%, -50%);
}

.api-card[style*="--card-index: 2"] {
  top: calc(50% - 240px);
  left: calc(50% - 140px);
  transform: translate(-50%, -50%);
}

.api-card[style*="--card-index: 3"] {
  top: 50%;
  left: calc(50% - 280px);
  transform: translate(-50%, -50%);
}

.api-card[style*="--card-index: 4"] {
  top: calc(50% + 240px);
  left: calc(50% - 140px);
  transform: translate(-50%, -50%);
}

.api-card[style*="--card-index: 5"] {
  top: calc(50% + 240px);
  left: calc(50% + 140px);
  transform: translate(-50%, -50%);
}

.api-card:hover {
  transform: translate(-50%, calc(-50% - 5px)) scale(1.05) !important;
}

/* Integration Hub Circle */
.hub-circle {
  background: radial-gradient(circle at center, rgba(100, 150, 255, 0.25) 0%, rgba(41, 54, 131, 0.15) 70%);
  border: 3px solid rgba(100, 150, 255, 0.5);
  box-shadow: 0 0 40px rgba(100, 150, 255, 0.4), 0 0 80px rgba(100, 150, 255, 0.2), inset 0 0 60px rgba(100, 150, 255, 0.1);
}

.pulse-ring {
  border: 2px solid rgba(100, 150, 255, 0.6);
}

/* Responsive */
@media (max-width: 768px) {
  .integration-flow {
    min-height: auto;
    margin: 30px 0;
  }
  .integration-hub,
  .pulse-ring {
    display: none;
  }
  .api-cards-container {
    position: static;
    height: auto;
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .api-card {
    position: static !important;
    width: 100% !important;
    transform: none !important;
    top: auto !important;
    left: auto !important;
  }
  .api-card:hover {
    transform: translateY(-5px) !important;
  }
  .integration-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}