/* Agentic Mesh Feature Animation Styles */

/* Animation container */
.agentic-mesh-animation {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
}

.agentic-mesh-svg {
  width: 100%;
  height: auto;
  max-height: 70vh;
  overflow: hidden;
}

.agentic-mesh-animation svg {
  overflow: hidden;
}

/* Hide mobile by default */
.agentic-mesh-animation--mobile {
  display: none;
}

/* Registry hub hover effect */
.registry-hub {
  transition: transform 0.3s ease;
}

/* Agent nodes */
.agent-node {
  transition: transform 0.3s ease, opacity 0.3s ease;
}

/* External clients fade-in */
g.external-client {
  opacity: 0;
  animation: mesh-client-appear 0.6s ease forwards;
}

.external-clients > g.external-client:nth-of-type(1) { animation-delay: 0.2s; }
.external-clients > g.external-client:nth-of-type(2) { animation-delay: 0.35s; }
.external-clients > g.external-client:nth-of-type(3) { animation-delay: 0.5s; }
.external-clients > g.external-client:nth-of-type(4) { animation-delay: 0.65s; }
.external-clients > g.external-client:nth-of-type(5) { animation-delay: 0.8s; }
.external-clients > g.external-client:nth-of-type(6) { animation-delay: 0.95s; }

@keyframes mesh-client-appear {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* MCP tool icons */
.tool-icon {
  opacity: 0.7;
  transition: opacity 0.2s ease;
}

.tool-icon:hover {
  opacity: 1;
}

/* A2A particles glow enhancement */
.a2a-particles circle {
  will-change: transform;
}

/* Mobile responsive */
@media (max-width: 768px) {
  .agentic-mesh-animation:not(.agentic-mesh-animation--mobile) {
    display: none;
  }

  .agentic-mesh-animation--mobile {
    display: block;
    max-width: 320px;
    margin: 0 auto;
  }

  .agentic-mesh-svg--mobile {
    max-height: 60vh;
  }
}

/* Small mobile */
@media (max-width: 480px) {
  .agentic-mesh-animation--mobile {
    max-width: 280px;
  }
}

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  .agentic-mesh-animation animateMotion,
  .agentic-mesh-animation animate {
    animation: none !important;
  }

  .external-client {
    animation: none !important;
    opacity: 1 !important;
  }

  .a2a-particles,
  .a2a-particles-mobile {
    display: none;
  }
}

/* Print handling */
@media print {
  .agentic-mesh-animation {
    display: none;
  }
}