/* ============================================================
   ANIMATIONS
============================================================ */
/*
  A collection of keyframe animations for various UI elements, including:
  - diagonalFlow: Creates a flowing diagonal background effect
  - borderPulse: Pulses the border color for emphasis
  - statusPulse: Scales an element up and down for attention
  - fadeInUp/Left/Right: Fades in elements with directional movement
  - fadeInScale: Fades in elements with a scaling effect
  - gradientShift: Animates background gradients for dynamic visuals
*/
@keyframes diagonalFlow {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes borderPulse {
  0%,100% { border-color: rgba(255, 255, 255, 0.7); }
  50% { border-color: rgba(255, 255, 255, 1); }
}

@keyframes statusPulse {
  0%,100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(59, 191, 217, 0.28);
  }
  50% {
    transform: scale(1.1);
    box-shadow: 0 0 0 8px rgba(36, 86, 166, 0.12);
  }
}

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

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

@keyframes fadeInRight {
  from { opacity: 0; transform: translateX(40px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes fadeInScale {
  from { opacity: 0; transform: scale(0.9); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes gradientShift {
  0%,100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}