/* Floating orb animations for login page */
@keyframes float-1 {
  0%, 100% {
    transform: translate(0, 0) scale(1);
    opacity: 0.8;
  }
  25% {
    transform: translate(30px, -40px) scale(1.1);
    opacity: 1;
  }
  50% {
    transform: translate(-20px, -60px) scale(1.2);
    opacity: 1;
  }
  75% {
    transform: translate(-40px, 20px) scale(1.05);
    opacity: 0.9;
  }
}

@keyframes float-2 {
  0%, 100% {
    transform: translate(0, 0) scale(1);
    opacity: 0.6;
  }
  25% {
    transform: translate(-50px, 30px) scale(1.15);
    opacity: 0.8;
  }
  50% {
    transform: translate(40px, 50px) scale(1.25);
    opacity: 1;
  }
  75% {
    transform: translate(30px, -20px) scale(1.1);
    opacity: 0.7;
  }
}

@keyframes float-3 {
  0%, 100% {
    transform: translate(0, 0) scale(1);
    opacity: 0.5;
  }
  33% {
    transform: translate(-30px, -30px) scale(1.3);
    opacity: 0.8;
  }
  66% {
    transform: translate(40px, 20px) scale(1.15);
    opacity: 0.6;
  }
}

@keyframes float-4 {
  0%, 100% {
    transform: translate(0, 0) scale(1);
    opacity: 0.7;
  }
  33% {
    transform: translate(25px, 35px) scale(1.2);
    opacity: 1;
  }
  66% {
    transform: translate(-35px, -25px) scale(1.4);
    opacity: 0.9;
  }
}

.float-orb-1 {
  animation: float-1 20s ease-in-out infinite;
}

.float-orb-2 {
  animation: float-2 25s ease-in-out infinite;
}

.float-orb-3 {
  animation: float-3 18s ease-in-out infinite;
}

.float-orb-4 {
  animation: float-4 22s ease-in-out infinite;
}