@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0');

/* ==========================================================================
   SVG Common Icon Styles
   ========================================================================== */
.m-icon {
  font-family: 'Material Symbols Outlined';
  text-anchor: middle;
  dominant-baseline: middle;
  font-size: 32px; /* Default size */
}

.icon-md {
  font-size: 28px;
}

.icon-lg {
  font-size: 48px;
}

/* ==========================================================================
   SVG Animations
   ========================================================================== */
@keyframes float {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-8px);
  }
}

.floating {
  animation: float 3s ease-in-out infinite;
}

.floating-delayed {
  animation: float 3s ease-in-out 1.5s infinite;
}

/* ==========================================================================
   SVG Component specific (Pain points cards, etc.)
   ========================================================================== */
.card-bg {
  fill: #ffffff;
}

.card-accent-1 {
  fill: #ef4444;
}

.card-accent-2 {
  fill: #f59e0b;
}

.card-accent-3 {
  fill: #3b82f6;
}

/* ==========================================================================
   AUG Tree SVG Animations & Styles
   ========================================================================== */
.aug-tree-svg .tree-line { stroke: #cbd5e1; stroke-width: 2; stroke-dasharray: 6, 6; stroke-linecap: round; animation: augTreeLineMarch 2s linear infinite; fill: none; }
@keyframes augTreeLineMarch { from { stroke-dashoffset: 24; } to { stroke-dashoffset: 0; } }
.aug-tree-svg .tree-node-bg { fill: #ffffff; stroke: #e2e8f0; stroke-width: 2; rx: 8; transition: all 0.3s ease; }
.aug-tree-svg .tree-node-bg:hover { stroke: #f18e1e; stroke-width: 2; transform: translateY(-2px); }
.aug-tree-svg .node-text { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; font-size: 14px; font-weight: 600; fill: #1e293b; }
.aug-tree-svg .tag-text { font-family: monospace; font-size: 11px; fill: #64748b; }
.aug-tree-svg .pulse-dot { animation: augTreePulse 2s infinite ease-in-out; }
@keyframes augTreePulse { 0% { r: 3; opacity: 1; } 50% { r: 5; opacity: 0.5; } 100% { r: 3; opacity: 1; } }
.aug-tree-svg .hover-group { cursor: pointer; }
.aug-tree-svg .hover-group:hover .tree-node-bg { stroke: #f18e1e; }

/* ==========================================================================
   AUG Route SVG Animations & Styles
   ========================================================================== */
.aug-route-svg .route-line { stroke: #cbd5e1; stroke-width: 3; stroke-dasharray: 8, 8; fill: none; animation: augRouteFlow 1.5s linear infinite; }
.aug-route-svg .route-line-fast { animation: augRouteFlow 1s linear infinite; }
.aug-route-svg .route-line-slow { animation: augRouteFlow 2s linear infinite; }
@keyframes augRouteFlow { from { stroke-dashoffset: 32; } to { stroke-dashoffset: 0; } }
.aug-route-svg .route-node { fill: #ffffff; stroke: #e2e8f0; stroke-width: 2; rx: 8; transition: all 0.3s ease; }
.aug-route-svg .db-icon-bg { fill: #f8fafc; }
.aug-route-svg .hover-route { cursor: pointer; }
.aug-route-svg .hover-route:hover .route-node { stroke: #f18e1e; transform: translateX(4px); box-shadow: 0 4px 6px rgba(0,0,0,0.1); }
.aug-route-svg .hover-route:hover .route-line { stroke: #f18e1e; }
.aug-route-svg .data-packet { animation: augPacketPulse 1.5s infinite alternate; }
@keyframes augPacketPulse { from { opacity: 0.6; filter: drop-shadow(0 0 2px rgba(241,142,30,0.5)); } to { opacity: 1; filter: drop-shadow(0 0 8px rgba(241,142,30,0.8)); } }

/* ==========================================================================
   AUG API SVG Animations & Styles
   ========================================================================== */
.aug-api-svg .api-line { stroke: #cbd5e1; stroke-width: 3; stroke-dasharray: 8, 8; fill: none; animation: augApiFlow 1.5s linear infinite; }
.aug-api-svg .api-line-fast { animation: augApiFlow 1s linear infinite; }
.aug-api-svg .api-line-slow { animation: augApiFlow 2s linear infinite; }
@keyframes augApiFlow { from { stroke-dashoffset: 32; } to { stroke-dashoffset: 0; } }
.aug-api-svg .it-node { fill: #ffffff; stroke: #e2e8f0; stroke-width: 2; rx: 8; transition: all 0.3s ease; }
.aug-api-svg .api-node-text { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; font-weight: 600; fill: #1e293b; }
.aug-api-svg .json-text { font-family: monospace; font-size: 11px; font-weight: bold; fill: #f18e1e; }
.aug-api-svg .api-packet { animation: augPacketFloat 2s ease-in-out infinite; }
@keyframes augPacketFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
.aug-api-svg .hover-api-node { cursor: pointer; transition: transform 0.3s ease; }
.aug-api-svg .hover-api-node:hover { transform: translateY(-4px); }
.aug-api-svg .hover-api-node:hover .it-node { stroke: #014099; }

/* ==========================================================================
   AVEVA Customer Success & Accelerators SVG Animations & Styles
   ========================================================================== */
.aveva-success-svg {
  width: 100%;
  max-width: 360px;
  height: auto;
  aspect-ratio: 1 / 1;
  display: block;
  margin: 0 auto;
}
.aveva-success-svg .stream-line {
  stroke: #94a3b8;
  stroke-width: 2.5;
  stroke-dasharray: 6, 6;
  fill: none;
  animation: avevaStreamFlow 2s linear infinite;
}
.aveva-success-svg .stream-line-accent {
  stroke: #0891b2;
  stroke-width: 2.5;
  stroke-dasharray: 6, 6;
  fill: none;
  animation: avevaStreamFlow 1.4s linear infinite;
}
@keyframes avevaStreamFlow {
  from { stroke-dashoffset: 24; }
  to { stroke-dashoffset: 0; }
}
.aveva-success-svg .node-card {
  fill: #ffffff;
  stroke: #e2e8f0;
  stroke-width: 1.5;
  rx: 14;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.aveva-success-svg .node-group {
  cursor: pointer;
}
.aveva-success-svg .node-group:hover .node-card {
  stroke: #007b8a;
  stroke-width: 2;
  filter: drop-shadow(0 8px 20px rgba(0, 123, 138, 0.18));
}
.aveva-success-svg .hub-card {
  fill: url(#aveva-hub-gradient);
  stroke: rgba(255, 255, 255, 0.35);
  stroke-width: 2;
  rx: 20;
  filter: drop-shadow(0 12px 28px rgba(0, 123, 138, 0.3));
  transition: all 0.3s ease;
}
.aveva-success-svg .hub-group {
  cursor: pointer;
}
.aveva-success-svg .hub-group:hover .hub-card {
  filter: drop-shadow(0 16px 36px rgba(0, 123, 138, 0.42));
  transform: translateY(-2px);
}
.aveva-success-svg .radar-wave {
  animation: radarPing 3s cubic-bezier(0, 0, 0.2, 1) infinite;
  transform-origin: 280px 205px;
}
@keyframes radarPing {
  0% { r: 50; opacity: 0.7; stroke-width: 2; }
  70% { r: 125; opacity: 0; stroke-width: 1; }
  100% { r: 125; opacity: 0; }
}
.aveva-success-svg .live-pulse {
  animation: liveDotPulse 1.8s infinite ease-in-out;
  transform-origin: center;
}
@keyframes liveDotPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}