/* ============================================================
   DevOps / SRE / Cloud Infrastructure — unique animated hero visual
   An instrument-panel gauge (uptime/load dial) with a sweeping
   needle + radial progress arc, plus a small CI/CD pipeline strip
   of stage dots that light up in sequence beneath it.
   Scoped entirely to #svcDevopsVisual — touches nothing shared.
   ============================================================ */

#svcDevopsVisual {
    filter: drop-shadow(0 0 22px rgba(255, 122, 47, 0.14));
}

#svcDevopsVisual svg {
    overflow: visible;
}

/* ---------- Gauge face ---------- */
#svcDevopsVisual .dv-gauge-face {
    fill: rgba(255, 122, 47, 0.04);
    stroke: none;
}

#svcDevopsVisual .dv-gauge-rim {
    fill: none;
    stroke: rgba(255, 122, 47, 0.28);
    stroke-width: 1.25;
}

/* ---------- Tick marks ---------- */
#svcDevopsVisual .dv-ticks-major line {
    stroke: var(--ce-amber, #ffb347);
    stroke-width: 1.6;
    stroke-linecap: round;
    opacity: 0.85;
}

#svcDevopsVisual .dv-ticks-minor line {
    stroke: var(--ce-orange, #ff7a2f);
    stroke-width: 1;
    stroke-linecap: round;
    opacity: 0.35;
}

/* ---------- Progress arc ---------- */
#svcDevopsVisual .dv-arc-track {
    fill: none;
    stroke: rgba(255, 122, 47, 0.12);
    stroke-width: 3;
    stroke-linecap: round;
}

#svcDevopsVisual .dv-arc-progress {
    fill: none;
    stroke: var(--ce-amber, #ffb347);
    stroke-width: 3;
    stroke-linecap: round;
    stroke-dasharray: 201.06;
    filter: drop-shadow(0 0 5px rgba(255, 179, 71, 0.75));
    animation: dvArcSweep 4.8s cubic-bezier(0.45, 0, 0.55, 1) infinite alternate;
}

/* ---------- Needle ---------- */
#svcDevopsVisual .dv-needle-group {
    transform-origin: 100px 88px;
    animation: dvNeedleSweep 4.8s cubic-bezier(0.45, 0, 0.55, 1) infinite alternate;
}

#svcDevopsVisual .dv-needle {
    stroke: var(--ce-ember, #ff4d00);
    stroke-width: 2;
    stroke-linecap: round;
    filter: drop-shadow(0 0 4px rgba(255, 77, 0, 0.85));
}

#svcDevopsVisual .dv-pivot-ring {
    fill: var(--ce-board, #121212);
    stroke: var(--ce-amber, #ffb347);
    stroke-width: 1.4;
}

#svcDevopsVisual .dv-pivot-dot {
    fill: var(--ce-amber, #ffb347);
    animation: dvPivotPulse 2.4s ease-in-out infinite;
    transform-origin: 100px 88px;
}

/* ---------- Pipeline stage strip ---------- */
#svcDevopsVisual .dv-pipeline-track {
    stroke: rgba(255, 122, 47, 0.18);
    stroke-width: 1.5;
    stroke-linecap: round;
}

#svcDevopsVisual .dv-stage {
    stroke: rgba(255, 122, 47, 0.4);
    stroke-width: 1;
    fill: rgba(255, 122, 47, 0.12);
    animation-name: dvStageCycle;
    animation-duration: 4.8s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    transform-box: fill-box;
    transform-origin: center;
}

#svcDevopsVisual .dv-stage-1 { animation-delay: 0s; }
#svcDevopsVisual .dv-stage-2 { animation-delay: -1.2s; }
#svcDevopsVisual .dv-stage-3 { animation-delay: -2.4s; }
#svcDevopsVisual .dv-stage-4 { animation-delay: -3.6s; }

/* queued (dim) -> running (bright pulse) -> passed (steady lit) -> reset to queued */
@keyframes dvStageCycle {
    0%,
    4% {
        fill: rgba(255, 122, 47, 0.1);
        stroke: rgba(255, 122, 47, 0.35);
        filter: none;
        r: 6;
    }
    12% {
        fill: var(--ce-amber, #ffb347);
        stroke: var(--ce-amber, #ffb347);
        filter: drop-shadow(0 0 6px rgba(255, 179, 71, 0.95));
        r: 7.5;
    }
    24%,
    88% {
        fill: var(--ce-orange, #ff7a2f);
        stroke: var(--ce-amber, #ffb347);
        filter: drop-shadow(0 0 2.5px rgba(255, 122, 47, 0.6));
        r: 6.5;
    }
    96%,
    100% {
        fill: rgba(255, 122, 47, 0.1);
        stroke: rgba(255, 122, 47, 0.35);
        filter: none;
        r: 6;
    }
}

@keyframes dvNeedleSweep {
    0% { transform: rotate(-118deg); }
    100% { transform: rotate(118deg); }
}

@keyframes dvArcSweep {
    0% { stroke-dashoffset: 201.06; }
    100% { stroke-dashoffset: 0; }
}

@keyframes dvPivotPulse {
    0%, 100% { opacity: 0.75; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.35); }
}

/* ---------- Reduced motion: freeze on a clean static readout ---------- */
@media (prefers-reduced-motion: reduce) {
    #svcDevopsVisual .dv-arc-progress,
    #svcDevopsVisual .dv-needle-group,
    #svcDevopsVisual .dv-pivot-dot,
    #svcDevopsVisual .dv-stage {
        animation: none !important;
    }
    #svcDevopsVisual .dv-arc-progress { stroke-dashoffset: 70; }
    #svcDevopsVisual .dv-needle-group { transform: rotate(28deg); }
    #svcDevopsVisual .dv-pivot-dot { opacity: 0.9; }
    #svcDevopsVisual .dv-stage-1,
    #svcDevopsVisual .dv-stage-2 {
        fill: var(--ce-orange, #ff7a2f);
        stroke: var(--ce-amber, #ffb347);
        filter: drop-shadow(0 0 2.5px rgba(255, 122, 47, 0.6));
    }
    #svcDevopsVisual .dv-stage-3 {
        fill: var(--ce-amber, #ffb347);
        stroke: var(--ce-amber, #ffb347);
        filter: drop-shadow(0 0 4px rgba(255, 179, 71, 0.8));
    }
    #svcDevopsVisual .dv-stage-4 {
        fill: rgba(255, 122, 47, 0.1);
        stroke: rgba(255, 122, 47, 0.35);
    }
}