.fade-in {
  animation: fadeIn 0.5s ease forwards;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.slide-in {
  animation: slideIn 0.4s ease forwards;
}

@keyframes slideIn {
  from { transform: translateX(-20px); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

.pulse {
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(0, 188, 212, 0.4); }
  70% { transform: scale(1.05); box-shadow: 0 0 0 10px rgba(0, 188, 212, 0); }
  100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(0, 188, 212, 0); }
}

@keyframes movePacket {
  0% { left: 0; opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { left: 100%; opacity: 0; }
}

.animate-packet {
  position: absolute;
  animation: movePacket 2s infinite linear;
}

@keyframes flowArrow {
  0% { transform: translateX(-5px); opacity: 0.3; }
  50% { opacity: 1; }
  100% { transform: translateX(5px); opacity: 0.3; }
}

.animate-flow-arrow {
  display: inline-block;
  animation: flowArrow 1.5s infinite ease-in-out;
}

@keyframes flood {
  0% { transform: scale(0); opacity: 1; }
  100% { transform: scale(2); opacity: 0; }
}

.flood-animation {
  position: absolute;
  width: 50px;
  height: 50px;
  background: rgba(0, 188, 212, 0.3);
  border-radius: 50%;
  pointer-events: none;
  animation: flood 2s infinite ease-out;
}