/* ============================================================
   HamTech Automation — Custom App Development hero visual
   Scope: everything here targets #svcAppsVisual only (the mount
   div is sized/positioned by services/services.css). Schematic
   PCB-style "interconnected systems" animation: mobile / cloud /
   server nodes on a triangular circuit loop, with small glowing
   data pulses traveling the traces (SMIL animateMotion + mpath —
   no JS needed) and a periodic brighter flash on the server node
   to read as "processing".
   ============================================================ */

#svcAppsVisual svg {
    overflow: visible;
}

/* ---------- gradient stops (node glow) ---------- */
#svcAppsVisual .apps-grad-stop-a {
    stop-color: var(--ce-orange);
    stop-opacity: 0.6;
}
#svcAppsVisual .apps-grad-stop-b {
    stop-color: var(--ce-orange);
    stop-opacity: 0;
}

/* ---------- circuit traces + vias ---------- */
#svcAppsVisual .apps-trace {
    fill: none;
    stroke: var(--ce-orange);
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: 0.8;
}
#svcAppsVisual .apps-pads circle {
    fill: var(--ce-amber);
    opacity: 0.45;
}

/* ---------- node glow (ambient + processing pulse) ---------- */
#svcAppsVisual .apps-node-glow {
    fill: url(#appsNodeGlow);
    opacity: 0.34;
}
#svcAppsVisual .apps-node-glow--mobile,
#svcAppsVisual .apps-node-glow--cloud {
    animation: apps-glow-breathe 7s ease-in-out infinite;
}
#svcAppsVisual .apps-node-glow--cloud {
    animation-delay: 2.3s;
}
#svcAppsVisual .apps-node-glow--server {
    animation: apps-glow-process 5.2s ease-in-out infinite;
}

@keyframes apps-glow-breathe {
    0%, 100% { opacity: 0.3; }
    50%      { opacity: 0.5; }
}
@keyframes apps-glow-process {
    0%, 70%, 100% { opacity: 0.32; }
    85%           { opacity: 0.9; }
}

/* ---------- node bodies ---------- */
#svcAppsVisual .apps-node-body {
    fill: var(--ce-surface);
    stroke: var(--ce-orange);
    stroke-width: 1.6;
}
#svcAppsVisual .apps-node-line {
    stroke: var(--ce-amber);
    stroke-width: 1.3;
    stroke-linecap: round;
}
#svcAppsVisual .apps-node-dot {
    fill: var(--ce-amber);
}

/* cloud node: amber "outline" shape peeking out from behind a dark
   "fill" shape of the same silhouette, slightly smaller — gives a
   clean stroked cloud silhouette from simple primitives */
#svcAppsVisual .apps-node-outline {
    fill: var(--ce-orange);
    filter: url(#appsGlowSoft);
}
#svcAppsVisual .apps-node-fill {
    fill: var(--ce-board);
}

/* server / database LEDs */
#svcAppsVisual .apps-node-led {
    fill: var(--ce-amber);
}
#svcAppsVisual .apps-node-led--warn {
    fill: var(--ce-ember);
}
#svcAppsVisual .apps-node-led--active {
    animation: apps-led-flicker 5.2s ease-in-out infinite;
}

@keyframes apps-led-flicker {
    0%, 70%, 100% { opacity: 0.6; }
    85%           { opacity: 1; }
}

/* ---------- traveling data pulses ---------- */
#svcAppsVisual .apps-pulse {
    fill: var(--ce-amber);
    filter: url(#appsGlowStrong);
}
#svcAppsVisual .apps-pulse--trail {
    fill: var(--ce-orange);
    opacity: 0.75;
}

/* ---------- reduced motion: remove movement, keep the schematic ---------- */
@media (prefers-reduced-motion: reduce) {
    #svcAppsVisual .apps-pulse {
        visibility: hidden;
    }
    #svcAppsVisual .apps-node-glow {
        animation: none !important;
        opacity: 0.4;
    }
    #svcAppsVisual .apps-node-led--active {
        animation: none !important;
        opacity: 0.75;
    }
}