/* Login Page Specific Styles */

/* Input Box Styles */
.input-boxes {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  border-radius: 0.5rem !important;
  transition: all 0.3s ease;
}

.input-boxes:focus-within {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.3) !important;
  box-shadow: 0 0 15px rgba(255, 255, 255, 0.1);
}

.input-boxes input {
  transition: all 0.3s ease;
}

.input-boxes input:focus {
  outline: none;
}

/* Button Styles */
.login-btn {
  transition: all 0.3s ease;
  background: #1a1a1a;
  padding: 0.7rem 0 !important;
}

.login-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.4);
  background: #2a2a2a;
}

/* Create Account Link Styles */
.create-account-link {
  transition: all 0.3s ease;
  text-decoration: none;
  color: #ffffff;
  opacity: 0.8;
}

.create-account-link:hover {
  color: #ffffff;
  opacity: 1;
  text-decoration: underline;
}

/* Container Animation */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.login-container {
  animation: fadeIn 0.5s ease-out;
}

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

@keyframes bounce {
  0%,
  100% {
    transform: translateY(0);
  }
  20% {
    transform: translateY(-12px);
  }
  40% {
    transform: translateY(-18px);
  }
  50% {
    transform: translateY(-20px);
  }
  60% {
    transform: translateY(-18px);
  }
  80% {
    transform: translateY(-12px);
  }
}

.login-container > img {
  animation: fadeInUp 0.5s 0.1s both, bounce 1.4s infinite cubic-bezier(0.68, -0.55, 0.27, 1.55);
}
#logo-text {
  animation: fadeInUp 0.5s 0.2s both;
}
.login-container > .fs-8 {
  animation: fadeInUp 0.5s 0.3s both;
}
.w-95 .input-boxes:nth-child(1) {
  animation: fadeInUp 0.5s 0.4s both;
}
.w-95 .input-boxes:nth-child(2) {
  animation: fadeInUp 0.5s 0.5s both;
}
.w-95 .input-boxes:nth-child(3) {
  animation: fadeInUp 0.5s 0.6s both;
}
.login-btn {
  animation: fadeInUp 0.5s 0.7s both;
}
.create-account-link {
  animation: fadeInUp 0.5s 0.8s both;
}