```css
/* =======================================================
   SWIP LIVE OPERATION ANIMATION
   PART 1
======================================================= */

svg{
width:100%;
height:auto;
display:block;
}

/* ================= WATER ================= */

#waterFlow{

animation:waterFlow 4s linear infinite;

transform-origin:center;

}

#outletWater{

animation:waterFlow 4s linear infinite;

animation-delay:0.5s;

transform-origin:center;

}

/* ================= FLOW LINES ================= */

#flowLines line{

stroke-dasharray:12 12;

animation:flowMove 1.2s linear infinite;

}

/* ================= FLOW ARROWS ================= */

#flowArrows polygon{

animation:arrowPulse 1.5s ease-in-out infinite;

}

/* ================= SENSOR ================= */

#sensorPH,
#sensorORP,
#sensorEC,
#sensorTEMP,
#sensorCOR{

animation:sensorPulse 2s infinite;

}

/* ================= SWIP CORE ================= */

#swipCore{

animation:corePulse 3s ease-in-out infinite;

transform-origin:760px 610px;

}

/* ================= PLC ================= */

#plcLed{

animation:ledBlink 1.2s infinite;

}

/* ================= PUMP ================= */

#pumpBody{

transform-origin:1320px 755px;

}

/* ================= CHEMICAL ================= */

#chemicalFlow{

transition:width 1.5s ease;

}

/* ================= DASHBOARD ================= */

#dashPH,
#dashPump,
#dashStatus{

transition:all .5s ease;

}

/* ================= WATER ================= */

@keyframes waterFlow{

0%{

transform:translateX(0);

}

50%{

transform:translateX(8px);

}

100%{

transform:translateX(0);

}

}

/* ================= FLOW ================= */

@keyframes flowMove{

0%{

stroke-dashoffset:24;

}

100%{

stroke-dashoffset:0;

}

}
```
/* ================= SENSOR ================= */

@keyframes sensorPulse{

0%{

transform:scale(1);

filter:drop-shadow(0 0 0px #2ECC71);

}

50%{

transform:scale(1.12);

filter:drop-shadow(0 0 12px #2ECC71);

}

100%{

transform:scale(1);

filter:drop-shadow(0 0 0px #2ECC71);

}

}

/* ================= CORE ================= */

@keyframes corePulse{

0%{

transform:scale(1);

}

50%{

transform:scale(1.03);

}

100%{

transform:scale(1);

}

}

/* ================= LED ================= */

@keyframes ledBlink{

0%{

fill:#2ECC71;

}

50%{

fill:#8BFFAE;

}

100%{

fill:#2ECC71;

}

}

/* ================= ARROWS ================= */

@keyframes arrowPulse{

0%{

opacity:.35;

transform:translateX(0);

}

50%{

opacity:1;

transform:translateX(6px);

}

100%{

opacity:.35;

transform:translateX(0);

}

}

/* ================= PUMP ================= */

.pumpRunning{

animation:pumpRotate .8s linear infinite;

}

@keyframes pumpRotate{

from{

transform:rotate(0deg);

}

to{

transform:rotate(360deg);

}

}

/* ================= WATER WARNING ================= */

.waterAlarm{

animation:alarmWater .5s linear infinite;

}

@keyframes alarmWater{

0%{

fill:#00AEEF;

}

50%{

fill:#FF6B6B;

}

100%{

fill:#00AEEF;

}

}

/* ================= SENSOR ALARM ================= */

.sensorAlarm{

animation:sensorAlarm .5s linear infinite;

}

@keyframes sensorAlarm{

0%{

fill:#E74C3C;

}

50%{

fill:#FFB5B5;

}

100%{

fill:#E74C3C;

}

}
/* ================= STATUS COLORS ================= */

.statusMonitoring{

fill:#6FD9FF;

}

.statusAnalysis{

fill:#FFD54F;

}

.statusAuto{

fill:#2ECC71;

}

.statusAlarm{

fill:#FF4D4D;

}

/* ================= DASHBOARD BLINK ================= */

.dashboardAlert{

animation:dashboardAlert .7s infinite;

}

@keyframes dashboardAlert{

0%{

opacity:1;

}

50%{

opacity:.4;

}

100%{

opacity:1;

}

}

/* ================= CHEMICAL FLOW ================= */

.chemicalRunning{

animation:chemicalFlowMove 1.2s linear infinite;

}

@keyframes chemicalFlowMove{

0%{

width:0;

}

100%{

width:98px;

}

}

/* ================= CORE GLOW ================= */

#swipCore polygon{

transition:all .4s ease;

}

.coreAlarm{

filter:drop-shadow(0 0 20px #FF4D4D);

}

.coreWorking{

filter:drop-shadow(0 0 20px #00AEEF);

}

.coreSuccess{

filter:drop-shadow(0 0 20px #2ECC71);

}

/* ================= TEXT ================= */

#swipStatus{

transition:all .4s ease;

}

#dashPH{

transition:all .4s ease;

}

#dashPump{

transition:all .4s ease;

}

#dashStatus{

transition:all .4s ease;

}

/* ================= END ================= */