/* Existing float animation (from previous version, adjusted to -10px as per your new input) */
 @keyframes float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-10px); }
}

.float-animation, .floating { /* Apply to both classes for consistency */
  animation: float 3s ease-in-out infinite;
}

/* Animations */
@keyframes pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.05); opacity: 0.8; }
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  75% { transform: translateX(5px); }
}

@keyframes ripple {
  to {
    transform: scale(4);
    opacity: 0;
  }
}

@keyframes pulse-flow {
  0%, 100% { opacity: 0; transform: translateX(0); }
  50% { opacity: 1; }
  100% { transform: translateX(100%); }
}

/* Utility Classes for Animations */
.pulse-animation {
  animation: pulse 2s infinite;
}

.shake-animation {
  animation: shake 0.5s;
}

.flow-animation {
  position: absolute;
  width: 4px;
  height: 4px;
  background: #8b5cf6;
  border-radius: 50%;
  animation: pulse-flow 3s infinite;
}

/* Event Buttons */
.event-button {
  transition: all 0.3s ease;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.event-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 16px -4px rgba(0, 0, 0, 0.2);
}

.event-button.active {
  background-color: rgb(139 92 246); /* Tailwind purple-500 */
  color: white;
  transform: translateY(0);
}

.event-button.active .event-icon {
  background-color: rgba(255, 255, 255, 0.2);
}

/* Ripple Effect */
.ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5); /* White with opacity for ripple */
  transform: scale(0);
  animation: ripple 0.6s ease-out;
}

/* Impact Indicators */
.impact-indicator {
  transition: all 0.5s ease;
}

/* Server Status (if used) */
.server-status {
  transition: all 0.3s ease;
}

/* Warning Badge */
.warning-badge {
  animation: pulse 1.5s infinite;
}

/* Service Cards */
.service-card {
  transition: all 0.3s ease;
  cursor: pointer;
}

.service-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 24px -10px rgba(0, 0, 0, 0.15);
}

.service-icon {
  transition: all 0.3s ease;
}

.service-card:hover .service-icon {
  transform: scale(1.1);
}

/* Connection Lines (for potential future use) */
.connection-line {
  stroke: #e5e7eb; /* gray-200 */
  stroke-width: 2;
  fill: none;
  stroke-dasharray: 5,5;
  transition: all 0.3s ease;
}

.connection-line.active {
  stroke: #8b5cf6; /* purple-500 */
  stroke-dasharray: 0;
  stroke-width: 3;
}

/* Tooltips */
.tooltip {
  position: absolute;
  background: #1f2937; /* gray-800 */
  color: white;
  padding: 12px 16px;
  border-radius: 8px;
  font-size: 14px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s;
  z-index: 1000;
  max-width: 300px;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.25);
}

.tooltip.show {
  opacity: 1;
}

.tooltip::before {
  content: '';
  position: absolute;
  bottom: -6px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 6px solid #1f2937; /* gray-800 */
}